/* ============================================================
   Petra Wiemer – Praxis für Gesprächstherapie
   Gemeinsames Stylesheet für alle Seiten.

   Palette: Anthrazit · Weiß · warmes Hellgrau · Original-Gelb.
   Das Gelb (#FFCF1B) orientiert sich bewusst wieder stärker an der bisherigen Wix-Seite.
   ============================================================ */
:root{
  --kiefer:#30302D;
  --kiefer-70:#595954;
  --kiefer-45:#77766F;
  --papier:#FFFFFF;
  --nebel:#F4F3EE;
  --weiss:#FFFFFF;
  --bernstein:#FFCF1B;
  --bernstein-weich:#FFF3B2;
  --petrol:#6A5B18;
  --linie:rgba(48,48,45,.15);

  --serif:Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;

  --mass:1180px;
  --gap:clamp(1.5rem,4vw,3.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  margin:0;
  background:var(--papier);
  color:var(--kiefer);
  font-family:var(--sans);
  font-size:clamp(1.02rem,.55vw + .92rem,1.14rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}

/* --- Typografie ------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.14;margin:0}
h1{font-size:clamp(2.5rem,5.6vw,4.5rem)}
h2{font-size:clamp(1.85rem,3.2vw,2.7rem)}
h3{font-size:clamp(1.2rem,1.5vw,1.48rem);letter-spacing:-.01em}
h4{font-size:1.05rem}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
sup{font-size:.6em;vertical-align:super;letter-spacing:0}

.eyebrow{
  font-family:var(--sans);font-size:.73rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--kiefer-45);
  margin:0 0 1.1rem;
}
.lead{font-size:1.14em;color:var(--kiefer-70);max-width:38ch}
.fliesstext{max-width:62ch}
.fliesstext p{color:var(--kiefer-70)}
.wrap{width:100%;max-width:var(--mass);margin-inline:auto;padding-inline:var(--gap)}
.mager{color:var(--kiefer-45)}

/* --- Kopf ------------------------------------------------------ */
.kopf{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(9px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.kopf[data-scrolled="true"]{border-bottom-color:var(--linie)}
.kopf__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:82px}
.marke{text-decoration:none;display:block}
.marke__name{font-family:var(--serif);font-size:1.34rem;letter-spacing:-.01em;display:block;line-height:1.1}
.marke__rolle{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--kiefer-45);display:block;margin-top:.28rem}

.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
.nav a{
  text-decoration:none;font-size:.87rem;font-weight:500;letter-spacing:.02em;
  padding:.35rem 0;position:relative;color:var(--kiefer-70);transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--bernstein);transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;
}
.nav a:hover{color:var(--kiefer)}
.nav a:hover::after,.nav a[aria-current="page"]::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav__btn{
  display:none;background:none;border:1px solid var(--linie);border-radius:2px;
  padding:.55rem .8rem;font:inherit;font-size:.8rem;cursor:pointer;color:var(--kiefer);
}

/* --- Knöpfe ----------------------------------------------------- */
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  font:inherit;font-size:.92rem;font-weight:600;text-decoration:none;
  padding:.88rem 1.5rem;border-radius:2px;border:1px solid var(--bernstein);
  background:var(--bernstein);color:var(--kiefer);cursor:pointer;
  transition:background .22s,color .22s,transform .22s,border-color .22s;
}
.knopf:hover{background:var(--kiefer);border-color:var(--kiefer);color:var(--papier);transform:translateY(-1px)}
.knopf--leer{background:transparent;color:var(--kiefer);border-color:var(--kiefer)}
.knopf--leer:hover{background:var(--kiefer);color:var(--papier);border-color:var(--kiefer)}
.knopf[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* --- Hero -------------------------------------------------------- */
.hero{padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5.5rem)}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{margin-bottom:1.6rem}
.hero h1 em{font-style:italic;font-weight:300;color:var(--kiefer)}
.hero__aktionen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.hero--knapp{padding-bottom:clamp(2rem,4vw,3.5rem)}
.hero--knapp .hero__grid{grid-template-columns:1fr;max-width:60ch}

.bild img{border-radius:2px;filter:saturate(.9)}
.bild figcaption{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kiefer-45);margin-top:.9rem}

/* --- SIGNATUR: die zwei Türen ------------------------------------ */
.tueren{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  padding-bottom:clamp(3.5rem,8vw,6rem);
}
.tuer{
  display:block;text-decoration:none;position:relative;
  background:var(--weiss);border:1px solid var(--linie);border-radius:2px;
  padding:clamp(1.8rem,3vw,2.6rem);
  transition:border-color .28s ease,transform .28s ease,background .28s ease;
}
.tuer::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--bernstein);transform:scaleY(0);transform-origin:top;
  transition:transform .34s ease;
}
.tuer:hover{transform:translateY(-3px);border-color:var(--kiefer-45)}
.tuer:hover::after,.tuer:focus-visible::after{transform:scaleY(1)}
.tuer__zahl{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kiefer-45);display:block;margin-bottom:1rem;
}
.tuer h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.7rem}
.tuer p{color:var(--kiefer-70);font-size:.97em;max-width:38ch}
.tuer__pfeil{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem;
  font-size:.9rem;font-weight:500;color:var(--kiefer);
}
.tuer__pfeil svg{transition:transform .28s ease}
.tuer:hover .tuer__pfeil svg{transform:translateX(5px)}

/* --- Abschnitte -------------------------------------------------- */
.abschnitt{padding:clamp(3.5rem,8vw,7rem) 0}
.abschnitt--nebel{background:var(--nebel)}
.abschnitt--weiss{background:var(--weiss)}
.abschnitt--dunkel{background:var(--kiefer);color:var(--papier)}
.abschnitt--dunkel p{color:rgba(237,240,234,.75)}
.abschnitt--dunkel .eyebrow{color:rgba(237,240,234,.5)}
.abschnitt__kopf{max-width:54ch;margin-bottom:clamp(2.4rem,5vw,4rem)}

/* --- Die Generationslinie ---------------------------------------- */
.faden{list-style:none;margin:0;padding:0;position:relative}
.faden::before{content:"";position:absolute;left:7px;top:.7rem;bottom:.7rem;width:1px;background:var(--linie)}
.faden li{position:relative;padding:0 0 2.5rem 3.1rem}
.faden li:last-child{padding-bottom:0}
.faden li::before{
  content:"";position:absolute;left:0;top:.55rem;width:15px;height:15px;
  border:1px solid var(--kiefer-45);border-radius:50%;
  background:var(--papier);transition:background .3s ease,border-color .3s ease;
}
.abschnitt--nebel .faden li::before{background:var(--nebel)}
.faden li:hover::before{background:var(--bernstein);border-color:var(--bernstein)}
.faden h3{margin-bottom:.45rem}
.faden p{color:var(--kiefer-70);max-width:46ch;font-size:.97em}

.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.zweispalt--schmal{grid-template-columns:1fr 1.05fr}
.vertiefung{border-top:1px solid var(--linie);padding-top:1.8rem;margin-top:2.6rem}
.vertiefung:first-of-type{margin-top:0}
.vertiefung h3{margin-bottom:.8rem}
.vertiefung p{color:var(--kiefer-70);font-size:.97em}

/* --- Über mich ---------------------------------------------------- */
.ueber__grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.portrait{border-radius:50%;width:260px;height:260px;object-fit:cover}
.zitat{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.4;
  color:var(--kiefer);margin:0 0 1.8rem;max-width:30ch;
  ;
}

/* --- Vita --------------------------------------------------------- */
.vita__zeile{display:grid;grid-template-columns:7.5rem 1fr;gap:1.5rem;padding:1rem 0;border-top:1px solid var(--linie);align-items:baseline}
.vita__zeile:last-child{border-bottom:1px solid var(--linie)}
.vita__jahr{font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--bernstein);font-variant-numeric:tabular-nums}
.vita__was{margin:0;font-size:.97em}
.vita__ort{display:block;color:var(--kiefer-45);font-size:.86em;margin-top:.15rem}

/* --- Schulungen: Angebotskarten ----------------------------------- */
.kurse{display:grid;gap:1.4rem}
.kurs{
  background:var(--weiss);border:1px solid var(--linie);border-radius:2px;
  padding:clamp(1.6rem,3vw,2.4rem);
}
.abschnitt--weiss .kurs{background:var(--papier)}
.kurs__kopf{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-start}
.kurs h3{max-width:34ch}
.kurs__text{color:var(--kiefer-70);font-size:.97em;max-width:62ch;margin-top:.9rem}
.marker{
  display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .6rem;border-radius:2px;
  background:var(--bernstein-weich);color:#7A5A0C;white-space:nowrap;
}
.marker--offen{background:#CFE3D5;color:#1F4A31}
.marker--warteliste{background:var(--bernstein-weich);color:#7A5A0C}
.marker--voll{background:rgba(29,43,38,.1);color:var(--kiefer-45)}

/* Die sechs Angaben – überall gleiche Reihenfolge, gleicher Kasten */
.fakten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.1rem 1.6rem;margin:1.8rem 0 0;padding-top:1.5rem;
  border-top:1px solid var(--linie);
}
.fakten div{margin:0}
.fakten dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kiefer-45);margin-bottom:.25rem}
.fakten dd{margin:0;font-size:.93rem;line-height:1.5}
.kurs__fuss{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.8rem}
.pdf{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:500;
  text-decoration:none;color:var(--kiefer);border-bottom:1px solid var(--linie);padding-bottom:2px;
}
.pdf:hover{border-bottom-color:var(--petrol)}

/* --- Termine ------------------------------------------------------ */
.termine{border-top:1px solid var(--linie)}
.termin{
  display:grid;grid-template-columns:10rem 1fr 9rem 8rem;gap:1.5rem;
  align-items:center;padding:1.15rem 0;border-bottom:1px solid var(--linie);
}
.termin__datum{font-size:.9rem;font-weight:600;color:var(--kiefer);font-variant-numeric:tabular-nums}
.termin__titel{margin:0;font-size:.97rem}
.termin__ort{display:block;font-size:.84rem;color:var(--kiefer-45)}
.termin__tat{justify-self:end}
.termin__tat a{font-size:.88rem;font-weight:500;color:var(--kiefer);text-decoration:none;border-bottom:1px solid var(--linie);padding-bottom:2px}
.termin__tat a:hover{border-bottom-color:var(--petrol)}

/* --- Generationsgrafik (Erklärseite) ------------------------------ */
.generationen{display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.gen__liste{list-style:none;margin:0;padding:0;position:relative}
.gen__liste::before{content:"";position:absolute;left:11px;top:1.4rem;bottom:1.4rem;width:1px;background:var(--linie)}
.gen__btn{
  display:flex;align-items:flex-start;gap:1rem;width:100%;
  background:none;border:0;padding:.9rem 0;font:inherit;text-align:left;
  cursor:pointer;color:var(--kiefer-70);transition:color .2s;
}
.gen__btn:hover{color:var(--kiefer)}
.gen__punkt{
  flex:0 0 23px;width:23px;height:23px;border:1px solid var(--kiefer-45);
  border-radius:50%;background:var(--weiss);position:relative;z-index:1;
  transition:background .3s,border-color .3s;
}
.gen__btn[aria-selected="true"]{color:var(--kiefer)}
.gen__btn[aria-selected="true"] .gen__punkt{background:var(--bernstein);border-color:var(--bernstein)}
.gen__label{font-size:.95rem;font-weight:500;line-height:1.4}
.gen__label small{display:block;font-weight:400;font-size:.8rem;color:var(--kiefer-45);letter-spacing:.04em}
.gen__panel{border-left:1px solid var(--linie);padding-left:clamp(1.5rem,3vw,2.5rem);min-height:220px}
.gen__panel[hidden]{display:none}
.gen__panel h3{margin-bottom:.8rem}
.gen__panel p{color:var(--kiefer-70)}

/* --- Fragenliste (stiller Selbsttest) ----------------------------- */
.fragen{list-style:none;margin:0;padding:0;counter-reset:f;display:grid;gap:.2rem;max-width:64ch}
.fragen li{
  counter-increment:f;display:grid;grid-template-columns:2.4rem 1fr;gap:.6rem;
  padding:.85rem 0;border-bottom:1px solid var(--linie);color:var(--kiefer-70);
}
.fragen li::before{
  content:counter(f,decimal-leading-zero);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--bernstein);
  padding-top:.28rem;font-variant-numeric:tabular-nums;
}

/* --- Bücher -------------------------------------------------------- */
.buecher{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.buecher li{padding-left:1.2rem;border-left:2px solid var(--bernstein)}
.buecher strong{font-weight:600}
.buecher span{display:block;font-size:.9rem;color:var(--kiefer-45)}

/* --- Formulare ----------------------------------------------------- */
.formular{display:grid;gap:1.1rem;max-width:44rem}
.formular__reihe{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.feld{display:grid;gap:.4rem}
.feld label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kiefer-45)}
.feld input,.feld textarea,.feld select{
  font:inherit;font-size:.97rem;padding:.75rem .85rem;
  border:1px solid var(--linie);border-radius:2px;
  background:var(--weiss);color:var(--kiefer);width:100%;
}
.abschnitt--weiss .feld input,.abschnitt--weiss .feld textarea,.abschnitt--weiss .feld select{background:var(--papier)}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--kiefer);outline:none;box-shadow:0 0 0 3px rgba(255,207,27,.28)}
.hinweis{font-size:.82rem;color:var(--kiefer-45);margin:0;max-width:52ch}
.zustimmung{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.86rem;color:var(--kiefer-70)}
.zustimmung input{width:18px;height:18px;margin-top:.28rem;accent-color:var(--bernstein)}

.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.newsletter .formular{max-width:none}
.newsletter .feld input{background:rgba(248,250,246,.08);border-color:rgba(237,240,234,.25);color:var(--papier)}
.newsletter .feld label{color:rgba(237,240,234,.6)}
.newsletter .zustimmung{color:rgba(237,240,234,.7)}
.newsletter .hinweis{color:rgba(237,240,234,.5)}
.newsletter .knopf{background:var(--bernstein);border-color:var(--bernstein);color:var(--kiefer)}
.newsletter .knopf:hover{background:var(--papier);border-color:var(--papier)}
.newsletter__reihe{display:grid;grid-template-columns:1fr auto;gap:.9rem;align-items:end}

/* --- Kontaktkarte -------------------------------------------------- */
.karte{font-style:normal;line-height:1.85}
.karte dt{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--kiefer-45);margin-top:1.7rem}
.karte dt:first-of-type{margin-top:0}
.karte dd{margin:.2rem 0 0}
.karte a{text-decoration:none;border-bottom:1px solid var(--bernstein);padding-bottom:1px}
.karte a:hover{color:var(--petrol)}

/* --- Querverweis --------------------------------------------------- */
.verweis{
  display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;
  background:var(--weiss);border:1px solid var(--linie);border-radius:2px;
  padding:clamp(1.5rem,3vw,2.2rem);
}
.abschnitt--weiss .verweis{background:var(--papier)}
.verweis p{color:var(--kiefer-70);font-size:.97em;max-width:52ch}
.verweis h3{margin-bottom:.5rem}

/* --- Fuß ----------------------------------------------------------- */
.fuss{background:#30302D;color:var(--papier);padding:clamp(2.8rem,6vw,4rem) 0 2rem}
.fuss__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.fuss h2{font-size:1.3rem;margin-bottom:.7rem}
.fuss p,.fuss li{color:rgba(237,240,234,.72);font-size:.92rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--bernstein)}
.fuss__titel{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(237,240,234,.5);margin:0 0 .9rem}
.fuss__unten{
  border-top:1px solid rgba(237,240,234,.16);margin-top:2.6rem;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.82rem;color:rgba(237,240,234,.55);
}

/* --- Reveal beim Scrollen ------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].sichtbar{opacity:1;transform:none}

/* --- Rückmeldung nach Formularabsenden ----------------------------- */
.quittung{
  border-left:2px solid var(--bernstein);padding:.4rem 0 .4rem 1.1rem;
  font-size:.95rem;color:var(--kiefer-70);
}
.newsletter .quittung{color:rgba(237,240,234,.8)}

/* --- Responsiv ------------------------------------------------------ */
@media (max-width:900px){
  .hero__grid,.zweispalt,.zweispalt--schmal,.ueber__grid,.fuss__grid,
  .tueren,.generationen,.newsletter,.formular__reihe,.verweis{grid-template-columns:1fr}
  .hero__grid .bild{order:-1}
  .portrait{width:200px;height:200px}
  .nav__btn{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;
    gap:0;background:var(--papier);border-bottom:1px solid var(--linie);
    padding:.5rem var(--gap) 1.4rem;display:none;
  }
  .nav[data-offen="true"]{display:flex}
  .nav a{padding:.75rem 0;font-size:1rem;width:100%}
  .vita__zeile{grid-template-columns:1fr;gap:.2rem}
  .termin{grid-template-columns:1fr;gap:.4rem;padding:1.3rem 0}
  .termin__tat{justify-self:start;margin-top:.4rem}
  .gen__panel{border-left:0;border-top:1px solid var(--linie);padding:1.6rem 0 0}
  .verweis{gap:1.2rem}
  .fuss__grid{gap:2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}


/* ============================================================
   Ergänzungen für die statische Mehrseiten-Version 2026
   ============================================================ */
.skip-link{position:fixed;left:1rem;top:1rem;z-index:1000;background:var(--kiefer);color:var(--papier);padding:.65rem 1rem;text-decoration:none;transform:translateY(-180%);transition:transform .2s}.skip-link:focus{transform:none}
.klein{font-size:.72em;letter-spacing:.08em}.hero--start{padding-top:clamp(3rem,7vw,6rem)}.startwege{padding:0 0 clamp(3.5rem,8vw,6.5rem)}
.karten{display:grid;gap:1.4rem}.karten--3{grid-template-columns:repeat(3,1fr)}.karten .tuer h3{font-size:clamp(1.35rem,2vw,1.75rem);margin-bottom:.7rem}
.formatzeile{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}.formatzeile span{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--linie);background:rgba(248,250,246,.55);padding:.4rem .7rem;border-radius:999px;font-size:.8rem;color:var(--kiefer-70)}.formatzeile span::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--bernstein)}
.infokarte{border-top:1px solid var(--linie);margin-top:2.2rem;padding-top:1.5rem;max-width:34rem}.infokarte h3{margin-bottom:.6rem}.infokarte p{color:var(--kiefer-70);font-size:.95em}
.portrait--gross{width:min(320px,100%);height:auto;aspect-ratio:1;object-fit:cover}.rechtstext{max-width:780px}.rechtstext h2{font-size:1.45rem;margin:2.2rem 0 .7rem}.rechtstext p{color:var(--kiefer-70)}.rechtshinweis{border-left:3px solid var(--bernstein);background:var(--bernstein-weich);padding:1rem 1.2rem;margin:2rem 0;font-size:.94rem}.fuss__ehemals{font-family:var(--sans);font-size:.6em}.verweis--dunkel{background:transparent;border-color:rgba(237,240,234,.2)}.verweis--dunkel p{color:rgba(237,240,234,.72)}.knopf--hell{background:var(--papier);border-color:var(--papier);color:var(--kiefer)}.knopf--hell:hover{background:var(--bernstein);border-color:var(--bernstein)}
@media (max-width:1050px){.karten--3{grid-template-columns:1fr 1fr}.karten--3 .tuer:last-child{grid-column:1/-1}}
@media (max-width:900px){.karten--3,.karten--2{grid-template-columns:1fr}.karten--3 .tuer:last-child{grid-column:auto}}

/* --- Neue Angebotsstruktur / Original-Farbwelt ------------------- */
.karten--2{grid-template-columns:repeat(2,1fr)}
.zielgruppen{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}
.zielgruppen span{display:inline-flex;align-items:center;border:1px solid var(--linie);background:var(--weiss);padding:.48rem .78rem;font-size:.85rem;font-weight:600}
.zielgruppen span::before{content:"";width:.5rem;height:.5rem;background:var(--bernstein);border-radius:50%;margin-right:.55rem}
.eyebrow::before{content:"";display:inline-block;width:1.8rem;height:3px;background:var(--bernstein);vertical-align:middle;margin-right:.65rem;transform:translateY(-1px)}
.kopf[data-scrolled="true"]{box-shadow:0 3px 18px rgba(48,48,45,.06)}
@media (max-width:900px){.karten--2{grid-template-columns:1fr}}


/* --- FAQ ----------------------------------------------------------- */
.faq{max-width:820px;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem 2.3rem 1.25rem 0;font-family:var(--serif);font-size:1.18rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:1.05rem;font-family:var(--sans);font-size:1.5rem;font-weight:300;color:var(--kiefer-45)}
.faq details[open] summary::after{content:"–"}
.faq details p{max-width:65ch;color:var(--kiefer-70);padding:0 2.3rem 1.2rem 0;margin:0}

/* --- Datenschutzfreundlicher Erstkontakt -------------------------- */
.datenschutz-kurz{font-size:.82rem;color:var(--kiefer-45);margin-top:-.3rem;max-width:62ch}
.datenschutz-kurz strong{color:var(--kiefer-70)}

/* ============================================================
   Version 2 – Petra-Hoeren-Markenoptik
   Farben direkt aus dem bisherigen Logo abgeleitet.
   ============================================================ */
:root{
  --kiefer:#282A25;
  --kiefer-70:#55574F;
  --kiefer-45:#77796F;
  --papier:#FFFFFF;
  --nebel:#F7F6F0;
  --weiss:#FFFFFF;
  --bernstein:#F6BE34;
  --bernstein-weich:#FFF2CF;
  --petrol:#66780E;
  --gruen:#A2BB12;
  --gruen-dunkel:#66780E;
  --gruen-weich:#F1F5D9;
  --linie:rgba(40,42,37,.14);
}

body{background:#fff}
.kopf{background:rgba(255,255,255,.96)}
.kopf__inner{min-height:94px}
.marke{
  display:flex;align-items:center;gap:.9rem;text-decoration:none;min-width:300px;
}
.marke__text{flex:0 0 auto}
.marke__name{font-size:1.3rem;color:var(--kiefer)}
.marke__rolle{font-size:.62rem;letter-spacing:.12em;white-space:nowrap}
.marke__bild{display:block;flex:0 0 145px;width:145px}
.marke__bild img{width:145px;height:auto}
.nav a::after{height:2px;background:var(--gruen)}
.nav a:hover{color:var(--gruen-dunkel)}
.nav__btn{border-color:rgba(102,120,14,.35)}

.eyebrow{color:var(--gruen-dunkel)}
.eyebrow::before{background:var(--bernstein)}
.hero h1 em{color:var(--gruen-dunkel)}
.hero--start{position:relative;overflow:hidden}
.hero--start::after{
  content:"";position:absolute;right:-12vw;bottom:-3rem;width:42vw;height:8rem;
  border-top:3px solid rgba(162,187,18,.28);border-radius:50%;pointer-events:none;
}

.knopf{border-color:var(--bernstein);background:var(--bernstein);color:var(--kiefer)}
.knopf:hover{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel);color:#fff}
.knopf--leer{background:transparent;border-color:rgba(102,120,14,.55);color:var(--gruen-dunkel)}
.knopf--leer:hover{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel);color:#fff}
.knopf--hell{background:#fff;border-color:#fff;color:var(--kiefer)}
.knopf--hell:hover{background:var(--bernstein);border-color:var(--bernstein);color:var(--kiefer)}
.knopf--klein{padding:.62rem 1rem;font-size:.82rem}
.is-disabled{opacity:.48;cursor:not-allowed;pointer-events:none;background:var(--nebel);border-color:var(--linie);color:var(--kiefer-45)}

.formatzeile span{background:var(--gruen-weich);border-color:rgba(162,187,18,.28)}
.formatzeile span::before{background:var(--gruen)}
.startwege .tuer:first-child::after{background:var(--gruen)}
.startwege .tuer:last-child::after{background:var(--bernstein)}
.tuer:hover{border-color:rgba(102,120,14,.45)}
.tuer__pfeil,.pdf{color:var(--gruen-dunkel)}
.pdf:hover{border-bottom-color:var(--gruen)}
.faden li:hover::before,.gen__btn[aria-selected="true"] .gen__punkt{background:var(--gruen);border-color:var(--gruen)}
.buecher li{border-left-color:var(--gruen)}
.zielgruppen span::before{background:var(--gruen)}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--gruen-dunkel);box-shadow:0 0 0 3px rgba(162,187,18,.18)}
.zustimmung input{accent-color:var(--gruen)}

.abschnitt--nebel{background:var(--nebel)}
.abschnitt--dunkel{background:var(--kiefer)}
.newsletter .knopf{background:var(--bernstein);border-color:var(--bernstein);color:var(--kiefer)}
.newsletter .knopf:hover{background:var(--gruen);border-color:var(--gruen);color:var(--kiefer)}

.marker--offen{background:var(--gruen-weich);color:#4F6206;border:1px solid rgba(162,187,18,.28)}
.marker--warteliste{background:var(--bernstein-weich);color:#785706;border:1px solid rgba(246,190,52,.34)}
.marker--voll{background:#ECEDE8;color:#686A62;border:1px solid var(--linie)}

/* --- Neue Terminübersicht --------------------------------------- */
.eventliste{display:grid;gap:1rem}
.eventkarte{
  display:grid;grid-template-columns:92px 1fr;gap:1.35rem;align-items:stretch;
  background:#fff;border:1px solid var(--linie);border-radius:8px;padding:1rem;
  box-shadow:0 8px 28px rgba(40,42,37,.035);transition:transform .2s,border-color .2s,box-shadow .2s;
}
.eventkarte:hover{transform:translateY(-2px);border-color:rgba(102,120,14,.34);box-shadow:0 12px 34px rgba(40,42,37,.07)}
.eventdatum{
  display:flex;min-height:100px;flex-direction:column;align-items:center;justify-content:center;
  background:var(--gruen-weich);border:1px solid rgba(162,187,18,.25);border-radius:7px;
  font-variant-numeric:tabular-nums;line-height:1;
}
.eventdatum strong{font-family:var(--serif);font-size:2rem;font-weight:400;color:var(--kiefer)}
.eventdatum span{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen-dunkel);margin:.2rem 0}
.eventdatum small{font-size:.67rem;color:var(--kiefer-45)}
.eventinhalt{min-width:0;padding:.15rem .3rem .1rem 0}
.eventkopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.eventkopf h3{font-size:clamp(1.2rem,1.6vw,1.5rem);margin-top:.12rem}
.eventart{margin:0;font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gruen-dunkel)}
.eventmeta{display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin:1rem 0 .95rem;color:var(--kiefer-70);font-size:.86rem}
.eventmeta span{display:inline-flex;align-items:center;gap:.4rem}
.eventmeta span::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--bernstein)}
.eventaktionen{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}
.eventkarte--voll{background:#FBFBF8}
.termininfo{margin-top:1.6rem;padding:1.15rem 1.25rem;border-left:3px solid var(--gruen);background:var(--gruen-weich);display:flex;gap:1.2rem;justify-content:space-between;align-items:center}
.termininfo div{display:grid;gap:.15rem}.termininfo span{font-size:.88rem;color:var(--kiefer-70)}
.beispielhinweis{margin-top:1.2rem;padding:.75rem .9rem;background:var(--bernstein-weich);border-left:3px solid var(--bernstein);max-width:62ch}

/* --- Footer mit Logo -------------------------------------------- */
.fuss{background:#282A25}
.fuss__marke{display:grid;gap:1.1rem}
.fuss__logo{display:block;width:min(255px,100%)}
.fuss__logo img{width:100%;height:auto;filter:none}
.fuss a:hover{color:var(--bernstein)}

@media (max-width:1120px){
  .marke{min-width:240px}.marke__bild{flex-basis:105px;width:105px}.marke__bild img{width:105px}.marke__rolle{font-size:.57rem}.nav{gap:1rem}
}
@media (max-width:900px){
  .kopf__inner{min-height:82px}.marke{min-width:0;gap:.6rem}.marke__bild{width:90px;flex-basis:90px}.marke__bild img{width:90px}
  .eventkarte{grid-template-columns:76px 1fr}.eventdatum{min-height:88px}.eventkopf{flex-direction:column;gap:.55rem}.termininfo{align-items:flex-start;flex-direction:column}
}
@media (max-width:560px){
  .marke__bild{display:none}.marke__name{font-size:1.2rem}.marke__rolle{font-size:.55rem}
  .eventkarte{grid-template-columns:1fr}.eventdatum{width:76px;min-height:76px}.eventdatum strong{font-size:1.65rem}
  .eventinhalt{padding:0}.eventaktionen .knopf{width:100%;justify-content:center}
}

/* --- Schwerpunkte einspaltig über die volle Breite ---------------- */
.faden--voll li{padding-bottom:2.2rem}
.faden--voll p{max-width:68ch}

/* --- Sehr schmale Geräte: Kopfzeile und Eyebrow entspannen -------- */
@media (max-width:380px){
  .marke__name{font-size:1.18rem}
  .marke__rolle{font-size:.6rem;letter-spacing:.1em}
  .eyebrow{letter-spacing:.12em}
}

/* --- Honeypot: für Menschen unsichtbar, für Bots verlockend ------ */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Hinweis bei fehlgeschlagenem Versand ------------------------ */
.formfehler{
  border-left:2px solid #B4432B;padding:.5rem 0 .5rem 1.1rem;
  margin-bottom:1.4rem;color:var(--kiefer-70);font-size:.95rem;
}