/* Alex Brush und Marcellus, selbst gehostet (Lizenz: SIL Open Font License 1.1,
   https://openfontlicense.org/) - keine Verbindung zu Google-Servern,
   vermeidet die in Deutschland bekannte Google-Fonts-Abmahnproblematik. */
@font-face {
    font-family: "Alex Brush";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/AlexBrush-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Marcellus";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Marcellus-Regular.woff2") format("woff2");
}

:root {
    --farbe-text: #2d2438;
    --farbe-hintergrund: #faf7f2;
    --farbe-flaeche: #f2ebdd;
    --farbe-karte-hg: #fffdf8;
    --farbe-akzent: #4a3566;
    --farbe-akzent-dunkel: #362650;
    --farbe-akzent-sanft: #6b5389;
    --farbe-beere: #c14f6e;
    --farbe-beere-dunkel: #9c3a54;
    --farbe-rahmen: #e6ddc9;
    --farbe-warnung-hg: #eaeef5;
    --farbe-warnung-rahmen: #3f5170;
    --farbe-fehler-hg: #fbe9e5;
    --farbe-fehler-rahmen: #c1553f;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    line-height: 1.65;
}

.kopfzeile {
    padding: 1.1rem 1.5rem;
    border-bottom: 3px solid var(--farbe-beere);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.logo {
    font-size: clamp(2.2rem, 6.5vw, 3.6rem);
    font-weight: 400;
    color: var(--farbe-text);
    text-decoration: none;
    font-family: "Alex Brush", "Marcellus", cursive;
}

.zurueck {
    font-size: 0.85rem;
    color: var(--farbe-akzent-dunkel);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.inhalt {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

h1 {
    color: var(--farbe-akzent-dunkel);
    font-family: "Marcellus", Georgia, serif;
    font-weight: 400;
    font-size: 2rem;
}

h2 {
    color: var(--farbe-akzent-dunkel);
    font-family: "Marcellus", Georgia, serif;
    font-weight: 400;
}

.hook-headline {
    text-align: center;
    white-space: nowrap;
    font-size: clamp(0.75rem, 4.6vw, 2rem);
    margin: 0 auto;
}

.hook-untertitel {
    font-family: "Marcellus", Georgia, serif;
    font-style: italic;
    color: var(--farbe-akzent-sanft);
    text-align: center;
    white-space: nowrap;
    font-size: clamp(0.6rem, 3.6vw, 1.15rem);
    margin: 0.25rem auto 0;
}

/* Zierlinie: Linie-Ornament-Linie, angelehnt an die Fleurons auf den Karten selbst */
.zierlinie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.5rem 0 2rem;
    color: var(--farbe-beere);
    font-size: 1.15rem;
}

.zierlinie::before,
.zierlinie::after {
    content: "";
    flex: 1 1 auto;
    max-width: 260px;
    height: 2px;
    background: var(--farbe-beere);
    opacity: 0.6;
}

.zierlinie span {
    line-height: 1;
}

/* Kartenfächer als dekoratives Element (Bestellseite, Hero-Bereich) */
.kartenfaecher {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 150px;
    margin: 0.5rem 0 2rem;
}

.kartenfaecher img {
    height: 140px;
    width: auto;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(58, 47, 40, 0.18);
    background: white;
    border: 1px solid var(--farbe-rahmen);
    margin: 0 -14px;
    transition: transform 0.2s ease;
}

.kartenfaecher img:nth-child(1) { transform: rotate(-14deg) translateY(10px); }
.kartenfaecher img:nth-child(2) { transform: rotate(-6deg) translateY(2px); }
.kartenfaecher img:nth-child(3) { transform: rotate(0deg) translateY(-6px); z-index: 2; }
.kartenfaecher img:nth-child(4) { transform: rotate(6deg) translateY(2px); }
.kartenfaecher img:nth-child(5) { transform: rotate(14deg) translateY(10px); }

.kartenfaecher img:hover {
    transform: translateY(-10px) scale(1.03);
    z-index: 3;
}

/* "Über mich"-Kurzabschnitt (Bestellseite) */
.ueber-mich {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin: 1rem 0 2.5rem;
}

.foto-rahmen {
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
    max-width: 120px;
    max-height: 120px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    flex: none;
    background: var(--farbe-flaeche);
    border: 3px solid var(--farbe-beere);
    object-fit: cover;
    display: block;
}

/* Größere Variante für die eigenständige "Über mich"-Seite */
.foto-rahmen.gross {
    width: 130px;
    height: 130px;
    min-width: 130px;
    min-height: 130px;
    max-width: 130px;
    max-height: 130px;
    margin: 0 auto 2rem;
}

.ueber-mich-text p {
    margin: 0 0 0.7rem;
    font-size: 15px;
}

.ueber-mich-text p:last-child {
    margin-bottom: 0;
}

.weiterlesen {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--farbe-akzent-dunkel);
    text-decoration: none;
    border-bottom: 1px solid var(--farbe-akzent-sanft);
}

@media (max-width: 520px) {
    .ueber-mich { flex-direction: column; text-align: center; }
}

/* "So funktioniert es" */
.schritte {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.schritt {
    flex: 1;
    text-align: center;
}

.schritt-nummer {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--farbe-akzent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-family: "Marcellus", Georgia, serif;
    font-size: 15px;
}

.schritt p {
    font-size: 0.85rem;
    margin: 0;
    color: var(--farbe-text);
}

@media (max-width: 520px) {
    .schritte { flex-direction: column; gap: 0.9rem; }
    .schritt { display: flex; align-items: center; gap: 0.7rem; text-align: left; }
    .schritt-nummer { margin: 0; flex: none; }
}

/* Legungsarten als anklickbare Karten statt Fieldset/Radio-Liste */
.legungen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-bottom: 1.6rem;
}

.legungs-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    border: 1.5px solid var(--farbe-beere);
    border-radius: 12px;
    padding: 1.3rem 1.1rem 1.2rem;
    background: var(--farbe-karte-hg);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.legungs-karte:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(74, 53, 102, 0.14);
}

.legungs-karte input {
    position: absolute;
    opacity: 0;
}

.legungs-karte:has(input:checked) {
    border-width: 2.5px;
    background: #fff;
}

.legungs-karte .karten-bild {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-karten {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-karten img {
    height: 104px;
    width: auto;
    border-radius: 6px;
    margin: 0 -8px;
    background: white;
    border: 1px solid var(--farbe-rahmen);
    box-shadow: 0 3px 8px rgba(58, 47, 40, 0.18);
}

.mini-karten img:nth-child(1) { transform: rotate(-9deg); }
.mini-karten img:nth-child(2) { transform: translateY(-4px); z-index: 2; }
.mini-karten img:nth-child(3) { transform: rotate(9deg); }
.mini-karten img:nth-child(4) { transform: rotate(-4deg); }
.mini-karten img:nth-child(5) { transform: rotate(4deg); }

.mini-raster {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 4px;
    justify-content: center;
}

.mini-raster img {
    height: 42px;
    width: auto;
    border-radius: 3px;
    background: white;
    border: 1px solid var(--farbe-rahmen);
}

.legungs-karte .titel {
    font-family: "Marcellus", Georgia, serif;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--farbe-akzent-dunkel);
    display: block;
}

.legungs-karte .beschreibung {
    font-size: 0.85rem;
    color: #6b5a48;
    display: block;
    margin-top: 0.15rem;
}

.legungs-karte .preis {
    font-family: "Marcellus", Georgia, serif;
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--farbe-beere-dunkel);
    white-space: nowrap;
    margin-top: auto;
}

/* Persönliche Angaben (Formularfelder) */
.persoenliche-angaben {
    background: var(--farbe-flaeche);
    border-radius: 12px;
    padding: 1.3rem 1.3rem 1.5rem;
    margin-bottom: 1.6rem;
}

.persoenliche-angaben h3 {
    margin: 0 0 1rem;
}

.hilfetext {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--farbe-akzent-sanft);
}

.zeichen-zaehler {
    align-self: flex-end;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--farbe-akzent-sanft);
}

.wichtiger-hinweis {
    background: var(--farbe-warnung-hg);
    border: 1px solid var(--farbe-warnung-rahmen);
    border-left: 4px solid var(--farbe-warnung-rahmen);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(63, 81, 112, 0.12);
}

.fehlerbox {
    background: var(--farbe-fehler-hg);
    border: 1px solid var(--farbe-fehler-rahmen);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 500;
}

.checkbox-option {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem;
    font-weight: 400;
    font-size: 0.85rem;
    color: #4a3a2a;
}

.checkbox-option input {
    margin-top: 0.2rem;
    flex: none;
}

input,
select,
textarea {
    font: inherit;
    padding: 0.6rem;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 6px;
    background: #fff;
    color: var(--farbe-text);
}

/* Vertrauens-Hinweise vor dem Bestellen-Button */
.vertrauen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.1rem;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: #5a4a68;
}

.vertrauen span::before {
    content: "✓";
    color: var(--farbe-beere);
    margin-right: 0.35rem;
    font-weight: 700;
}

.auswahl-anzeige {
    text-align: center;
    font-size: 0.9rem;
    color: var(--farbe-akzent-dunkel);
    margin: 0 0 0.6rem;
    font-weight: 600;
}

button {
    font: inherit;
    font-weight: 600;
    padding: 0.9rem 1.2rem;
    border: none;
    border-radius: 8px;
    background: var(--farbe-beere);
    color: #fffaf7;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(193, 79, 110, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

button:hover {
    background: var(--farbe-beere-dunkel);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(193, 79, 110, 0.38);
}

a {
    color: var(--farbe-akzent-dunkel);
}

/* Bücher-Bereich (Startseite) */
h3 {
    color: var(--farbe-akzent-dunkel);
    font-family: "Marcellus", Georgia, serif;
    font-weight: 400;
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

.buch-karte {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 10px;
    background: var(--farbe-flaeche);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.buch-cover {
    width: 110px;
    height: auto;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.buch-text p {
    margin-top: 0;
}

.buch-button {
    display: inline-block;
    font-weight: 600;
    color: var(--farbe-akzent-dunkel);
    border: 1.5px solid var(--farbe-akzent-dunkel);
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.buch-button:hover {
    background: var(--farbe-akzent-dunkel);
    color: white;
}

/* Aufruf-zur-Bestellung-Bereich (Startseite) */
.cta-bereich {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 0.5rem;
}

.cta-button {
    display: inline-block;
    font-weight: 600;
    font-size: 1.1rem;
    color: #fffaf7;
    background: var(--farbe-beere);
    padding: 0.9rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(193, 79, 110, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cta-button:hover {
    background: var(--farbe-beere-dunkel);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(193, 79, 110, 0.38);
}

@media (max-width: 480px) {
    .buch-karte {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.fusszeile {
    max-width: 640px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--farbe-akzent-sanft);
}

.ki-hinweis {
    max-width: 480px;
    margin: 0.75rem auto 0;
}

.cookie-hinweis {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--farbe-text);
    color: #fff;
    border-top: 3px solid var(--farbe-beere);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.cookie-hinweis[hidden] {
    display: none;
}

.cookie-hinweis p {
    margin: 0;
    font-size: 0.9rem;
    max-width: 640px;
}

.cookie-hinweis a {
    color: #fff;
    text-decoration: underline;
}

.cookie-hinweis button {
    flex-shrink: 0;
    padding: 0.6rem 1.2rem;
    box-shadow: none;
}

/* Breite Bestellseite: Abschnitte mit Hintergrundstreifen und zwei Spalten */
.hauptmenue {
    display: flex;
    gap: 1.4rem;
}

.hauptmenue a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--farbe-akzent-dunkel);
    text-decoration: none;
}

.hauptmenue a:hover {
    color: var(--farbe-beere-dunkel);
}

@media (max-width: 900px) {
    .hauptmenue { display: none; }
}

.inhalt.breit {
    max-width: none;
    padding: 0;
}

.sektion {
    padding: 2.4rem 1.5rem;
}

.sektion.getoent {
    background: var(--farbe-flaeche);
}

.sektion-innen {
    max-width: 1040px;
    margin: 0 auto;
}

.spalte {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sektion-innen > h2,
.sektion-innen > .abschnitts-text {
    text-align: center;
}

.abschnitts-text {
    max-width: 640px;
    margin: 0 auto 1.6rem;
}

.hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.hero .hook-headline {
    text-align: left;
    white-space: normal;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.2;
    margin: 0 0 0.7rem;
}

.hero .hook-untertitel {
    text-align: left;
    white-space: normal;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    margin: 0 0 1.5rem;
}

.hero .kartenfaecher {
    height: 260px;
    margin: 0;
}

.hero .kartenfaecher img {
    height: 235px;
    margin: 0 -24px;
}

.doppel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.doppel .ueber-mich {
    margin: 0;
}

.doppel h2 {
    margin-top: 0;
}

.doppel .schritte {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
}

.doppel .schritt {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-align: left;
}

.doppel .schritt-nummer {
    margin: 0;
    flex: none;
}

.doppel .schritt p {
    font-size: 0.95rem;
}

.getoent .buch-karte {
    background: var(--farbe-karte-hg);
}

@media (max-width: 860px) {
    .hero,
    .doppel {
        grid-template-columns: 1fr;
    }
    .doppel { gap: 2rem; }
    .hero { text-align: center; }
    .hero .hook-headline,
    .hero .hook-untertitel { text-align: center; }
    .hero .kartenfaecher { height: 180px; }
    .hero .kartenfaecher img { height: 160px; margin: 0 -16px; }
    .hero-text { order: 2; }
    .legungen { grid-template-columns: 1fr; }
}

/* Bestellkasten breiter und flacher: Angaben in Reihen statt einer langen Spalte */
.spalte {
    max-width: 860px;
}

.persoenliche-angaben {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem 1.2rem;
    padding: 1.1rem 1.3rem 1.2rem;
}

.persoenliche-angaben h3,
.persoenliche-angaben .voll,
.persoenliche-angaben .checkbox-option {
    grid-column: 1 / -1;
}

.persoenliche-angaben h3 {
    margin: 0;
}

.persoenliche-angaben input,
.persoenliche-angaben select,
.persoenliche-angaben textarea {
    padding: 0.45rem 0.6rem;
}

.spalte button {
    align-self: center;
    min-width: 320px;
}

@media (max-width: 700px) {
    .persoenliche-angaben { grid-template-columns: 1fr; }
    .spalte button { min-width: 0; align-self: stretch; }
}

.getoent .persoenliche-angaben {
    background: var(--farbe-karte-hg);
    border: 1px solid var(--farbe-rahmen);
}

/* Live-Chat mit Susannes KI */
.chat-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.chat-kopf h1 {
    font-size: 1.4rem;
    margin: 0;
}

.chat-timer {
    font-family: "Marcellus", Georgia, serif;
    font-size: 1.4rem;
    color: var(--farbe-akzent-dunkel);
    background: var(--farbe-karte-hg);
    border: 1.5px solid var(--farbe-beere);
    border-radius: 999px;
    padding: 0.15rem 0.9rem;
    font-variant-numeric: tabular-nums;
}

.chat-timer.knapp {
    background: var(--farbe-beere);
    color: #fffaf7;
}

.chat-timer.vorbei {
    opacity: 0.6;
}

.chat-verlauf {
    background: var(--farbe-karte-hg);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 12px;
    padding: 1rem;
    height: min(55vh, 460px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.chat-blase {
    max-width: 85%;
    padding: 0.65rem 0.9rem;
    border-radius: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 15px;
}

.chat-blase.ki {
    align-self: flex-start;
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    border-bottom-left-radius: 4px;
}

.chat-blase.kundin {
    align-self: flex-end;
    background: var(--farbe-akzent);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-blase.hinweis {
    background: var(--farbe-fehler-hg);
    border: 1px solid var(--farbe-fehler-rahmen);
}

.chat-blase.schreibt:empty::after {
    content: "...";
    letter-spacing: 0.2em;
    color: var(--farbe-akzent-sanft);
}

form.chat-eingabe {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.chat-eingabe textarea {
    flex: 1;
    resize: none;
}

.chat-zaehler {
    text-align: right;
    font-size: 0.8rem;
    color: var(--farbe-akzent-sanft);
    margin: 0.2rem 0 0;
}

.chat-ende {
    background: var(--farbe-flaeche);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
    margin-top: 1rem;
    text-align: center;
}

.chat-hinweis {
    font-size: 0.8rem;
    color: var(--farbe-akzent-sanft);
    margin-top: 1.2rem;
}

/* Bestellseite mit Chat: zwei Angebote nebeneinander */
.angebote.mit-chat {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1.8rem;
    align-items: start;
}

.angebot h3 {
    text-align: center;
    margin: 0 0 1rem;
}

.mit-chat .legungen {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-bottom: 0;
}

.mit-chat .legungs-karte {
    flex-direction: row;
    text-align: left;
    gap: 1rem;
    padding: 0.8rem 1rem;
}

.mit-chat .legungs-karte > span:nth-of-type(2) {
    flex: 1;
}

.mit-chat .legungs-karte .karten-bild {
    height: 84px;
    width: 104px;
    flex: none;
    overflow: hidden;
}

.mit-chat .mini-karten img {
    height: 66px;
    margin: 0 -11px;
}

.mit-chat .mini-raster {
    gap: 3px;
}

.mit-chat .mini-raster img {
    height: 25px;
}

.mit-chat .legungs-karte .preis {
    margin-top: 0;
}

.paket-liste {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.2rem;
}

.paket-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1.5px solid var(--farbe-beere);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    background: var(--farbe-karte-hg);
}

.paket-zeile .titel {
    font-family: "Marcellus", Georgia, serif;
    font-size: 1.05rem;
    color: var(--farbe-akzent-dunkel);
}

.paket-zeile .preis {
    font-family: "Marcellus", Georgia, serif;
    font-size: 1.15rem;
    color: var(--farbe-beere-dunkel);
}

.angebot .chat-beschreibung {
    font-size: 0.9rem;
    margin: 0 0 1rem;
    text-align: center;
}

.angebot .cta-button {
    display: block;
    text-align: center;
}

@media (max-width: 860px) {
    .angebote.mit-chat { grid-template-columns: 1fr; }
    .chat-kopf { flex-direction: column; align-items: flex-start; }
}

/* Häufige Fragen */
.faq {
    gap: 0.7rem;
}

.faq details {
    background: var(--farbe-karte-hg);
    border: 1px solid var(--farbe-rahmen);
    border-radius: 10px;
    padding: 0.2rem 1rem;
}

.faq summary {
    cursor: pointer;
    padding: 0.7rem 0;
    font-family: "Marcellus", Georgia, serif;
    font-size: 1.02rem;
    color: var(--farbe-akzent-dunkel);
}

.faq summary:focus-visible {
    outline: 2px solid var(--farbe-beere);
    outline-offset: 2px;
}

.faq details[open] summary {
    color: var(--farbe-beere-dunkel);
}

.faq details p {
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
}

/* Zwei klar getrennte Angebote (Kartenlegung per E-Mail / Live-Chat), Buttons auf gleicher Höhe */
.angebote.mit-chat {
    align-items: stretch;
}

.mit-chat .angebot {
    display: flex;
    flex-direction: column;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-rahmen);
    border-top: 4px solid var(--farbe-beere);
    border-radius: 16px;
    padding: 1.4rem 1.4rem 1.5rem;
    box-shadow: 0 6px 18px rgba(74, 53, 102, 0.08);
}

.mit-chat .angebot h3 {
    font-size: 1.35rem;
    margin: 0 0 0.3rem;
}

.mit-chat .angebot .chat-beschreibung {
    min-height: 3.4em;
}

.mit-chat .angebot-inhalt {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2rem;
}

.mit-chat .angebot-inhalt .legungen,
.mit-chat .angebot-inhalt .paket-liste {
    flex: 1;
    margin-bottom: 0;
}

.mit-chat .paket-zeile {
    flex: 1;
}

.mit-chat .angebot .cta-button {
    margin-top: auto;
}

/* Bestellkasten kompakt: breiter und flacher, Felder in einer Reihe */
.spalte {
    max-width: 980px;
    gap: 0.8rem;
}

.persoenliche-angaben {
    grid-template-columns: repeat(12, 1fr);
    gap: 0.55rem 0.9rem;
    padding: 0.9rem 1.1rem 1rem;
    font-size: 0.9rem;
}

.persoenliche-angaben h3 {
    order: 0;
    font-size: 1.05rem;
    margin: 0;
}

.persoenliche-angaben label {
    gap: 0.15rem;
    font-size: 0.85rem;
}

.persoenliche-angaben input,
.persoenliche-angaben select,
.persoenliche-angaben textarea {
    padding: 0.35rem 0.55rem;
    font-size: 0.9rem;
}

.persoenliche-angaben .f-geschlecht { grid-column: span 2; order: 1; }
.persoenliche-angaben .f-name { grid-column: span 3; order: 2; }
.persoenliche-angaben .f-alter { grid-column: span 2; order: 3; }
.persoenliche-angaben .f-mail { grid-column: span 5; order: 4; }
.persoenliche-angaben .voll { order: 5; }
.persoenliche-angaben .checkbox-option { order: 6; font-size: 0.8rem; gap: 0.45rem; }

.persoenliche-angaben .hilfetext {
    font-size: 0.75rem;
}

.wichtiger-hinweis {
    padding: 0.7rem 1rem;
    margin: 0.4rem 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.vertrauen {
    margin: 0;
    font-size: 0.8rem;
}

@media (max-width: 700px) {
    .persoenliche-angaben .f-geschlecht,
    .persoenliche-angaben .f-name,
    .persoenliche-angaben .f-alter,
    .persoenliche-angaben .f-mail {
        grid-column: 1 / -1;
    }
}

/* Widerrufsbutton (§ 356a BGB): gut sichtbar auf jeder Seite */
.fusszeile .widerruf-button {
    display: inline-block;
    font-weight: 600;
    color: var(--farbe-beere-dunkel);
    background: var(--farbe-karte-hg);
    border: 1.5px solid var(--farbe-beere);
    border-radius: 8px;
    padding: 0.55rem 1.3rem;
    text-decoration: none;
}

.fusszeile .widerruf-button:hover {
    background: var(--farbe-beere);
    color: #fffaf7;
}

/* Nach Ablauf der Zeit muessen Eingabefeld und Zaehler wirklich verschwinden (display:flex ueberstimmt sonst hidden) */
form.chat-eingabe[hidden],
.chat-zaehler[hidden] {
    display: none;
}