/* Kurswechsel · Startseite · Gestaltung 28.10.2026
   Eigene Datei nur für die Startseite. Die Unterseiten laden weiter kurswechsel.css.

   Idee: eine Seekarte für einen Kurswechsel. Drei Zeichen tragen die Seite:
   1. die Kurslinie mit der kleinen Sonne am Wendepunkt (wie auf dem LinkedIn-Banner),
   2. Kreise wie die Matten in Claudias Arbeit: wer im Raum ist, wie ein System sich bewegt,
   3. der Horizont mit Sonne im Fuß ("Wenn der Wind sich dreht").

   Farben (Markenrichtlinien 2026, dazu ein helles Grau aus Claudias Fotos):
     Weiß    #FBFAF8  Grundfläche
     Creme   #F4EDE2  Warm Cream, jede zweite Fläche
     Nebel   #EAE8E5  helles Grau: Startbild, "Wie ich arbeite", Termin
     Weinrot #7A2428  Leitfarbe: Überschriften, Knöpfe, Links, Linien
     Oliv    #84896D  Erdung: nur die Linien im beweglichen System
     Senf    #D4A74A  Licht: nur die kleine Sonne
   Schrift: Cormorant Garamond (wie Schild und Visitenkarte), Inter für Text. */

@font-face{font-family:'Cormorant Garamond';src:url('../schriften/cormorant-garamond.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../schriften/cormorant-garamond-italic.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('../schriften/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --weiss:#FBFAF8;
  --creme:#F4EDE2;
  --nebel:#EAE8E5;
  --wein:#7A2428;
  --wein-tief:#5E1B1F;
  --oliv:#84896D;
  --senf:#D4A74A;
  --graphit:#2E2C30;
  --text:#3D3A3E;
  --leise:#67626A;
  --strich:rgba(46,44,48,.14);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rand:40px;
}
@media (max-width:700px){:root{--rand:24px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--weiss);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--wein);color:var(--weiss)}
:focus-visible{outline:2px solid var(--wein);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--rand)}
section{padding:136px 0}
@media (max-width:700px){section{padding:84px 0}}

/* ---------- Schrift ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--wein)}
h2{font-size:clamp(36px,4.4vw,58px);line-height:1.06;letter-spacing:-.008em;margin-bottom:30px;text-wrap:balance}
h3{font-size:28px;line-height:1.2;font-weight:500;color:var(--graphit);margin-bottom:12px}
p{margin:0 0 20px;max-width:62ch}
.gross{font-size:clamp(18px,1.6vw,20px);line-height:1.7;color:var(--graphit)}
.klein{font-size:15px;color:var(--leise)}
.marke{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.3;color:var(--wein);margin:0 0 16px}

/* ---------- Knöpfe und Links ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:15px 30px;border:0;border-radius:999px;background:var(--wein);color:var(--weiss);font:500 16px/1.3 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .25s,padding .25s}
.knopf:hover{background:var(--wein-tief)}
.stiller{display:inline-block;color:var(--wein);font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .3s}
.stiller:hover{background-size:40% 1px}

/* ---------- Kopfleiste ---------- */
.kopf{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(251,250,248,.94);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--strich)}
.kopf-in{display:flex;align-items:center;gap:20px;max-width:1180px;margin:0 auto;padding:14px var(--rand)}
.wortmarke{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.lg-marke{width:38px;height:32px;color:var(--wein)}
.lg-name{font-family:var(--serif);font-size:26px;letter-spacing:.02em;color:var(--graphit);line-height:1}
.nav{display:flex;gap:30px;margin-left:auto;font-size:14.5px}
.nav a{color:var(--text);text-decoration:none;background:linear-gradient(var(--wein),var(--wein)) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .3s,color .2s}
.nav a:hover{color:var(--wein);background-size:100% 1px}
.kopf-tel{margin-left:34px;font-size:14.5px;font-weight:500;color:var(--wein);text-decoration:none;white-space:nowrap}
.tel-kurz{display:none}
@media (max-width:920px){.nav{display:none}.kopf-tel{margin-left:auto}}
@media (max-width:520px){.tel-lang{display:none}.tel-kurz{display:inline}.lg-marke{width:32px;height:27px}.lg-name{font-size:23px}}

/* ---------- Startbild ----------
   Claudias Foto liegt ohne Rahmen als Hintergrund rechts und läuft nach links weich aus.
   Der rote Teppich kommt unten rechts vom Rand ins Bild, ihr Gesicht bleibt frei. */
.hero{position:relative;padding:61px 0 0;background:#EFEDE9;overflow:hidden}
.hero-foto{position:absolute;left:0;top:61px;width:100%;height:calc(100% - 61px);object-fit:cover;object-position:78% 20%;animation:ruhig-an 1.6s ease-out both}
.hero-schleier{position:absolute;left:0;right:0;top:61px;bottom:0;background:linear-gradient(100deg,#EFEDE9 0%,rgba(239,237,233,.97) 30%,rgba(239,237,233,.72) 42%,rgba(239,237,233,.28) 53%,rgba(239,237,233,0) 62%)}
@keyframes ruhig-an{from{opacity:0}to{opacity:1}}
/* Name und Titel klein in den roten Pulli gesetzt */
.hero-name{position:absolute;z-index:2;right:var(--rand);top:clamp(460px,80vh,740px);margin:0;text-align:right;color:#F4EDE2;text-shadow:0 1px 12px rgba(60,20,22,.35);max-width:none;animation:auftauchen 1s ease-out .8s both}
.hero-name span{display:block;font-size:12.5px;letter-spacing:.06em;opacity:.92}
.hero-name .hero-name-gross{font-family:var(--serif);font-size:clamp(20px,1.65vw,26px);letter-spacing:.01em;opacity:1;margin-bottom:2px}
.hero-raster{position:relative;z-index:2;padding:clamp(52px,7vh,96px) var(--rand) 0}
.hero-inhalt{max-width:min(640px,50vw)}
.hero h1{font-size:clamp(50px,5.9vw,90px);font-weight:400;line-height:.98;letter-spacing:-.018em;animation:auftauchen 1s ease-out both}
.hero .unter{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.8vw,25px);line-height:1.36;color:var(--graphit);margin:22px 0 0;max-width:36ch;animation:auftauchen 1s ease-out .15s both}
.hero-tasten{margin-top:30px;animation:auftauchen 1s ease-out .3s both}
@keyframes auftauchen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes aufgehen{from{opacity:0;transform:scale(.4) rotate(-40deg)}to{opacity:1;transform:none}}

/* Claudias Satz liegt auf dem Teppich, über den Matten. Verschwindet nach der ersten Berührung. */
.hinweis{position:absolute;z-index:4;left:29%;top:10%;width:42%;margin:0;text-align:center;pointer-events:none;transition:opacity .5s;animation:auftauchen .8s ease-out 1.8s both}
.hinweis-satz{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.55vw,23px);line-height:1.25;color:#F4EDE2}
.hinweis-tun{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:#F4EDE2;opacity:.85}
.benutzt .hinweis{opacity:0}

/* Der Teppich: unter dem Text, ragt links und unten über den Rand (js/system.js hält die Matten im Bild) */
.buehne{position:relative;z-index:3;width:clamp(480px,48vw,740px);margin:clamp(24px,4vh,44px) 0 calc(-0.34 * clamp(480px,48vw,740px)) -7.8vw}
.system{width:100%}
.brett{display:block;width:100%;height:auto;overflow:visible;touch-action:none;user-select:none;-webkit-user-select:none;animation:ausrollen 1.3s cubic-bezier(.3,0,.2,1) .3s both}
@keyframes ausrollen{from{opacity:0;transform:translate(-8%,8%) rotate(8deg)}to{opacity:1;transform:none}}
.brett .teppich{filter:drop-shadow(0 -10px 40px rgba(60,20,22,.22))}
.brett .naht{fill:none;stroke:#F4EDE2;stroke-opacity:.18;stroke-width:1;stroke-dasharray:2 5}
.brett line{stroke:#F4EDE2;stroke-opacity:.55;stroke-width:1.5}
.brett .matte{stroke:#2E2C30;stroke-opacity:0;stroke-width:2;transition:stroke-opacity .2s}
.brett .m-creme .matte{fill:#F4EDE2}
.brett .m-leinen .matte{fill:#D5B38E}
.brett .m-salbei .matte{fill:#C4C7B6}
.brett .m-weiss .matte{fill:#FBFAF8}
.brett .m-oliv .matte{fill:#84896D}
.brett .figur{fill:#2E2C30;opacity:.7}
.brett .m-oliv .figur{fill:#FBFAF8;opacity:.9}
.brett .knoten{cursor:grab}
.brett .knoten:hover .matte{stroke-opacity:.35}
.brett .gezogen{cursor:grabbing}
.brett .gezogen .matte{stroke:#D4A74A;stroke-opacity:1}
.brett .puls{fill:none;stroke:#F4EDE2;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:puls 2.4s ease-out 1.6s infinite}
@keyframes puls{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.55);opacity:0}}
.benutzt .brett .puls{display:none}
@media (prefers-reduced-motion:reduce){.brett .puls{display:none}}

@media (max-width:900px){
  .hero{height:auto}
  .hero-foto{position:relative;top:auto;height:auto;aspect-ratio:4/5;object-position:76% 14%;
    -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent);mask-image:linear-gradient(to bottom,#000 84%,transparent)}
  .hero-schleier{display:none}
  .hero-name{top:calc(61px + 125vw * .75);bottom:auto;right:var(--rand)}
  .hero-name .hero-name-gross{font-size:20px}
  .hero-name span{font-size:11.5px}
  .hero-raster{padding:0 var(--rand) 8px;margin-top:-24px}
  .hero-inhalt{max-width:none}
  .buehne{width:auto;margin:28px -20px 12px}
  .hinweis{left:23%;top:8%;width:54%}
  .hinweis-satz{font-size:16.5px}
  .hinweis-tun{font-size:12px}
  .system{width:100%}
}

/* ---------- Drei Zusagen ---------- */
section.streifen{padding:0;background:var(--weiss);border-bottom:1px solid var(--strich)}
.streifen-in{max-width:1180px;margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.streifen-in>div{position:relative;padding:36px 32px 38px;border-left:1px solid var(--strich)}
.streifen-in>div:first-child{border-left:0;padding-left:0}
.streifen-in>div:last-child{padding-right:0}
.streifen b{display:block;font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.25;color:var(--graphit);margin-bottom:6px}
.streifen span{display:block;font-size:15px;line-height:1.6;color:var(--leise)}
@media (max-width:820px){
  .streifen-in{grid-template-columns:1fr}
  .streifen-in>div{padding:24px 0;border-left:0;border-top:1px solid var(--strich)}
  .streifen-in>div:first-child{border-top:0}
}

/* ---------- Worum es geht ---------- */
.auftakt{padding:150px 0 140px}
.auftakt .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:96px}
.auftakt .marke,.auftakt h2{grid-column:1/-1}
.auftakt h2{font-size:clamp(40px,5.6vw,76px);line-height:1.02;max-width:16ch;margin-bottom:64px}
.auftakt-bild{grid-column:1;grid-row:3/span 4;align-self:start}
.auftakt-bild img{width:100%;height:auto;aspect-ratio:1100/1123;object-fit:cover}
.auftakt p:not(.marke){grid-column:2}
.auftakt .gross{font-size:clamp(19px,1.7vw,22px)}
@media (max-width:900px){
  .auftakt{padding:88px 0 84px}
  .auftakt .wrap{display:block}
  .auftakt h2{margin-bottom:32px}
  .auftakt-bild{margin:0 0 32px;max-width:520px}
}

/* ---------- Angebot: vier Felder, Kreiszeichen zeigen, wer im Raum ist ---------- */
.angebot{background:var(--creme)}
.angebote{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:60px;border-top:1px solid var(--strich)}
.reihe{padding:48px 56px 54px 0;border-bottom:1px solid var(--strich)}
.reihe:nth-child(even){padding:48px 0 54px 56px;border-left:1px solid var(--strich)}
.zeichen{display:block;color:var(--wein);margin:0 0 18px -4px;overflow:visible}
.zeichen circle{transition:transform .6s cubic-bezier(.3,0,.2,1)}
.reihe:hover .zeichen .k0{transform:translateX(-3px)}
.reihe:hover .zeichen .k1{transform:translateX(3px)}
.reihe:hover .zeichen .k2{transform:translate(-2px,2px)}
.reihe:hover .zeichen .k3{transform:translate(2px,2px)}
.reihe h3{font-size:34px;color:var(--wein);font-weight:400;margin-bottom:14px}
.reihe p{max-width:none}
.reihe ul{list-style:none;padding:0;margin:4px 0 26px;font-size:16px;color:var(--text)}
.reihe li{padding:8px 0;border-bottom:1px solid var(--strich)}
.reihe li:first-child{border-top:1px solid var(--strich)}
.reihe .preis{font-family:var(--serif);font-size:22px;color:var(--graphit);margin-bottom:12px}
.mehr{font-size:15px;margin:18px 0 0}
.mehr a{color:var(--leise);text-decoration:none;border-bottom:1px solid var(--strich);padding-bottom:2px}
.mehr a:hover{color:var(--wein);border-bottom-color:var(--wein)}
@media (max-width:900px){
  .angebote{grid-template-columns:1fr;margin-top:36px}
  .reihe,.reihe:nth-child(even){padding:40px 0;border-left:0}
}

/* ---------- Wie ich arbeite ---------- */
.haltung{background:var(--nebel);padding:140px 0}
@media (min-width:901px){
  .haltung .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:80px;align-items:start}
  .haltung .marke{grid-column:1;grid-row:1}
  .haltung h2{grid-column:1;grid-row:2;font-size:clamp(46px,5.6vw,80px);line-height:1.02;margin:0}
  .haltung .system.klein{grid-column:1;grid-row:3/span 3;margin-top:40px}
  .haltung p:not(.marke){grid-column:2}
  .haltung p:nth-of-type(2){grid-row:2;margin-top:10px}
  .haltung p:nth-of-type(3){grid-row:3}
  .haltung .wrap>div:last-child{grid-column:2;grid-row:4}
}
.haltung p:not(.marke){font-size:18px;color:var(--graphit)}
.system.klein{max-width:440px}
.system.klein .brett{animation:none}
@media (max-width:900px){.system.klein{margin:32px auto 36px;max-width:380px}}
@media (max-width:700px){.haltung{padding:84px 0}}

/* ---------- Über mich: Porträt mit versetztem Rahmen ---------- */
.ueber-mich{background:var(--weiss)}
.ueber{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:96px;align-items:start}
.portraet{position:sticky;top:110px;margin:0 22px 22px 0;background:var(--nebel);box-shadow:22px 22px 0 -1px var(--weiss),22px 22px 0 0 var(--wein)}
.portraet img{width:100%;height:auto;aspect-ratio:880/1375;object-fit:cover}
.ueber h2{font-size:clamp(38px,4.2vw,56px)}
.beleg{font-size:15px;line-height:1.7;color:var(--leise);border-left:1.5px solid var(--wein);padding-left:20px;margin:34px 0}
@media (max-width:900px){
  .ueber{grid-template-columns:1fr;gap:40px}
  .portraet{position:relative;top:auto;max-width:420px}
}

/* ---------- Ablauf: Wegpunkte auf der Kurslinie, die am Ende abbiegt ---------- */
.ablauf{background:var(--creme);padding-bottom:120px}
.schritte{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:56px;padding-top:48px}
.schritte::before{content:"";position:absolute;top:8.25px;left:0;right:40px;height:1.5px;background:var(--wein)}
.schritte::after{content:"";position:absolute;top:-30px;right:0;width:40px;height:40px;border-right:1.5px solid var(--wein);border-bottom:1.5px solid var(--wein);border-bottom-right-radius:40px}
.schritte>div{position:relative}
.schritte>div::before{content:"";position:absolute;top:-45px;left:0;width:12px;height:12px;border-radius:50%;background:var(--creme);border:1.5px solid var(--wein)}
.schritte>div:last-child::before{background:var(--wein)}
.ziffer{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:var(--wein);margin-bottom:12px}
.schritte h3{font-size:28px}
.schritte .klein{font-size:15.5px;color:var(--text)}
@media (max-width:820px){
  .schritte{grid-template-columns:1fr;gap:40px;padding:0 0 0 38px}
  .schritte::before{top:6px;bottom:6px;left:5.25px;right:auto;width:1.5px;height:auto}
  .schritte::after{display:none}
  .schritte>div::before{top:4px;left:-38px}
}

/* ---------- Praxisraum als Band ---------- */
.raumband{margin:0;background:var(--creme)}
.raumband img{width:100%;height:clamp(260px,34vw,520px);object-fit:cover;object-position:50% 40%}

/* ---------- Aufstellungen: Text mit Foto links, Formular rechts ---------- */
.aufstellungen{background:var(--weiss)}
.spalten{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:96px;align-items:start}
.auf-foto{margin:6px 0 36px}
.auf-foto img{width:100%;height:auto;aspect-ratio:1320/630;object-fit:cover}
.aufstellungen .preis-auf{font-family:var(--serif);font-size:23px;color:var(--graphit)}
.spalte-form{position:sticky;top:110px;background:var(--creme);padding:46px 44px 42px;border-radius:2px}
.meldung{margin:0 0 24px;padding:14px 18px;border-left:2px solid var(--wein);background:var(--weiss);font-size:15px;line-height:1.7}
.meldung a{color:inherit}
.formular{display:grid;gap:22px}
.formular label{display:block;font-size:14px;color:var(--leise);margin-bottom:4px}
.formular input,.formular textarea{width:100%;font:16px/1.5 var(--sans);color:var(--graphit);padding:10px 0;border:0;border-bottom:1px solid #8C8790;background:transparent;border-radius:0}
.formular input:focus,.formular textarea:focus{outline:none;border-bottom-color:var(--wein);box-shadow:0 1px 0 var(--wein)}
.formular label.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;margin:4px 0 0}
.zustimmung input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--wein)}
.zustimmung a{color:var(--wein)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:900px){.spalten{grid-template-columns:1fr;gap:44px}.spalte-form{position:static;padding:32px 24px}}

/* ---------- Fragen ---------- */
.fragen{background:var(--creme)}
.fragen .spalten{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.spalte-kopf{position:sticky;top:110px}
.krise{font-size:15px;line-height:1.7;color:var(--leise);border-left:1.5px solid var(--wein);padding-left:20px;margin-top:36px}
.faq details{border-bottom:1px solid var(--strich)}
.faq details:first-child{border-top:1px solid var(--strich)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:24px 48px 24px 0;font-family:var(--serif);font-size:25px;line-height:1.3;color:var(--graphit);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";position:absolute;right:2px;top:50%;width:26px;height:26px;margin-top:-13px;border:1.2px solid var(--wein);border-radius:50%;transition:background .25s}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:1.4px solid var(--wein);border-bottom:1.4px solid var(--wein);transform:rotate(45deg);transition:transform .3s,margin .3s,border-color .25s}
.faq details[open] summary::before{background:var(--wein)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--weiss)}
.faq summary:hover{color:var(--wein)}
.faq details p{font-size:16.5px;max-width:64ch}
.faq details[open]{padding-bottom:10px}
@media (max-width:900px){.spalte-kopf{position:static}.fragen .spalten,.termin .spalten{grid-template-columns:1fr}}

/* ---------- Termin ---------- */
.termin{background:var(--nebel)}
.termin .spalten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.termin h2{font-size:clamp(40px,4.6vw,62px)}
.buchung-knopf{margin:32px 0 52px}
.kontakt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 34px;font-size:16.5px;color:var(--graphit)}
.kontakt span{display:block;font-size:14px;color:var(--leise);margin-bottom:6px}
.kontakt .nummer{margin:0 0 14px;max-width:none}
.kontakt .nummer small{display:block;margin-top:2px;font-size:13.5px;color:var(--leise)}
.kontakt a.wa{color:var(--wein);border-bottom-color:rgba(122,36,40,.35)}
.kontakt a.wa:hover{border-bottom-color:var(--wein)}
.kontakt a{color:var(--graphit);text-decoration:none;border-bottom:1px solid var(--strich)}
.kontakt a:hover{color:var(--wein);border-bottom-color:var(--wein)}
.anfahrt{padding:36px 40px 18px;background:var(--weiss);margin-top:8px}
.anfahrt h3{font-size:32px;color:var(--wein);font-weight:400;margin-bottom:22px}
.anfahrt p{font-size:16px;max-width:52ch}
.anfahrt b{font-weight:600;color:var(--graphit)}
@media (max-width:900px){.termin .spalten{grid-template-columns:1fr}.kontakt{grid-template-columns:1fr}.anfahrt{padding:28px 24px 10px;margin-top:0}}

/* ---------- Fuß: Horizont mit Sonne ---------- */
footer{background:var(--weiss);padding:128px 0 48px;text-align:center}
footer p{max-width:none}
footer h2{font-size:clamp(40px,5vw,68px);margin-bottom:38px}
.horizont{display:flex;align-items:center;gap:18px;max-width:760px;margin:96px auto 0;color:var(--wein)}
.horizont span{flex:1;height:1px;background:var(--strich)}
.sonne.gross{width:34px;height:34px;flex:none}
.fuss-marke-block{display:flex;flex-direction:column;align-items:center;margin:36px 0 0}
.fuss-logo{width:52px;height:45px;color:var(--wein);margin-bottom:12px}
.fuss-marke{font-family:var(--serif);font-size:26px;color:var(--graphit);margin:0}
.fuss-claim{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,38px);line-height:1.2;color:var(--wein);margin:6px 0 34px}
.sozial{display:flex;justify-content:center;gap:24px;margin:0 0 32px}
.sozial a{display:inline-flex;padding:4px;color:var(--leise);transition:color .2s}
.sozial a:hover{color:var(--wein)}
.sozial svg{width:21px;height:21px;display:block}
.fuss-zeile{font-size:13.5px;color:var(--leise);margin:0 0 18px}
footer a{color:var(--leise);text-decoration:none}
footer a:hover{color:var(--wein)}

/* ===== Korrekturen 29.10.2026 (Thomas/Claude) — nach Kontrastmessung, einzeln entfernbar ===== */
/* Fuß-Knopf: „footer a:hover" färbte die Schrift beim Überfahren weinrot auf dunklem Weinrot (1,28:1) */
.knopf:hover{color:var(--weiss)}
/* Schriftzug im Kopfbild: über dem hellen Haar stellenweise kaum lesbar — weicher, kräftigerer Schatten */
.hero-name{text-shadow:0 1px 2px rgba(40,14,16,.6),0 0 16px rgba(40,14,16,.55),0 0 32px rgba(40,14,16,.3)}