/* ==========================================================================
   SEITE · öffentliche Startseite Valentina Piffer
   Farben/Schriften kommen aus theme.css. Hier nur Struktur und Layout.
   Obere Hälfte dunkelblau, ab «About me» warm – so von der Kundin gewählt.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--navy);
     font-family:var(--font-base);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%}
svg{display:block}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* =======================================================================
   Startseite Valentina Piffer · Hybrid nach ihrem Wunsch:
   obere Hälfte = Variante 2 (Nachtblau, scharfe Ecken, Gold)
   ab «About me» = Variante 3 (Sand, weiche Ecken, Pillen)
   ======================================================================= */
.S{background:var(--paper);color:var(--navy);font-size:16px}
.S h1,.S h2,.S h3,.S .pf{font-family:var(--font-head);font-weight:500}
.S .wrap{max-width:1180px;margin:0 auto;padding:0 44px}
.S .narrow{max-width:760px;margin:0 auto}

/* ---------- Knöpfe: oben eckig+Gold, unten Pille+Tinte ---------- */
.S .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
        background:var(--gold);color:#152a46;font-size:11.5px;font-weight:650;letter-spacing:.14em;
        text-transform:uppercase;padding:15px 26px;border:1px solid var(--gold);transition:.16s}
.S .btn:hover{background:#d3ac6e;border-color:#d3ac6e}
.S .btn.gh{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.S .btn.gh:hover{background:rgba(255,255,255,.1);border-color:#fff}
.S .pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
         border-radius:999px;background:var(--navy);color:#fff;font-size:13px;font-weight:600;
         padding:15px 30px;border:1.5px solid var(--navy);transition:.16s}
.S .pill:hover{background:#162c47;border-color:#162c47}
.S .pill.gh{background:transparent;color:var(--navy);border-color:rgba(31,58,95,.35)}
.S .pill.gh:hover{border-color:var(--navy);background:rgba(31,58,95,.05)}
.S .pill.lt{background:#fff;color:var(--navy);border-color:#fff}
.S .pill.sm{padding:11px 21px;font-size:12px}

/* ======================= OBERE HÄLFTE · Nachtblau ======================= */
.S .stage{position:relative;min-height:min(920px,96vh);display:flex;flex-direction:column;
          background:var(--deep);overflow:hidden}
.S .stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 22%;opacity:.66}
.S .stage::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,37,64,.96) 0%,rgba(18,37,64,.9) 34%,rgba(18,37,64,.55) 62%,rgba(18,37,64,.3) 82%,rgba(18,37,64,.58) 100%)}
.S .stage>*{position:relative;z-index:2}

/* Marke — bewusst grösser und deutlicher als in den Vorschlägen */
.S .nav{display:flex;align-items:center;gap:34px;padding:28px 44px;max-width:1180px;margin:0 auto;width:100%;color:#fff}
.S .brand{display:flex;align-items:center;gap:16px}
.S .brand img{width:56px;height:56px;flex:none}
.S .brand .n{font-family:var(--font-head);font-size:23px;letter-spacing:.14em;line-height:1.15}
.S .brand .n small{display:block;font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:.22em;
                   font-weight:500;color:var(--mist);margin-top:6px}
.S .nav .links{display:flex;gap:28px;margin-left:auto;font-size:10.5px;font-weight:600;
               letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.S .nav .links a:hover{color:#fff}
.S .lang{font-size:10.5px;letter-spacing:.13em;color:rgba(255,255,255,.7);font-weight:600}
.S .lang b{color:#fff}

.S .hero{margin:auto 0;padding:46px 44px 96px;max-width:1180px;margin-inline:auto;width:100%;color:#fff}
.S .hero .k{display:flex;align-items:center;gap:15px;font-size:11px;font-weight:650;
            letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.S .hero .k::before{content:"";width:40px;height:1px;background:var(--gold)}
.S .hero h1{font-size:clamp(2.6rem,5.3vw,4.5rem);line-height:1.06;letter-spacing:-.012em;
            margin-top:28px;max-width:15ch;text-wrap:balance}
.S .hero .sub{margin-top:28px;font-size:17px;line-height:1.8;color:#cfdcea;max-width:44ch;font-weight:300}
.S .hero .cta{margin-top:42px;display:flex;flex-wrap:wrap;gap:14px}
.S .hero .cred{margin-top:44px;font-size:11.5px;letter-spacing:.11em;color:var(--mist);line-height:2}

.S .facts{background:var(--sand);color:var(--navy)}
.S .facts .in{max-width:1180px;margin:0 auto;padding:20px 44px;display:flex;flex-wrap:wrap;gap:12px 44px;font-size:13px}
.S .facts span{display:inline-flex;align-items:center;gap:9px}
.S .facts .ico{width:16px;height:16px;color:var(--navy);opacity:.62}

.S .dark{background:var(--deep);color:#fff}
.S .dark .sec{padding-top:104px;padding-bottom:104px}
.S .dark h2{font-size:clamp(1.85rem,3vw,2.5rem);line-height:1.22}
.S .dark .k{font-size:10.5px;font-weight:650;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.S .dark p{font-size:16px;line-height:1.9;color:#c6d5e6;font-weight:300}
.S .dark p + p{margin-top:20px}
.S .dark .loud{margin-top:30px;font-size:12.5px;font-weight:600;letter-spacing:.24em;
               text-transform:uppercase;color:var(--gold);line-height:2.2}
.S .dark .ask{margin:34px 0;padding-left:26px;border-left:2px solid var(--gold)}
.S .dark .ask p{font-family:var(--font-head);font-style:italic;font-size:1.45rem;
                line-height:1.5;color:#fff}
.S .dark .close{margin-top:56px;padding-top:44px;border-top:1px solid rgba(255,255,255,.14);text-align:center}
.S .dark .close p{font-family:var(--font-head);font-size:clamp(1.25rem,2.2vw,1.75rem);
                  line-height:1.5;color:#fff;max-width:34ch;margin-inline:auto}

/* Die fünf Schritte */
.S .steps{margin-top:56px;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.16)}
.S .step{display:grid;grid-template-columns:200px 1fr;gap:30px;padding:32px 0;
         border-bottom:1px solid rgba(255,255,255,.16);align-items:baseline}
.S .step .n{font-family:var(--font-head);font-size:1.05rem;letter-spacing:.14em;color:var(--gold)}
.S .step h3{font-size:1.35rem;color:#fff}
.S .step .lead{margin-top:6px;font-family:var(--font-head);font-style:italic;
               font-size:1.1rem;color:var(--mist)}
.S .step p{margin-top:12px;font-size:15px;line-height:1.85;max-width:62ch}

.S .eli{background:var(--navy);color:#fff;padding:96px 0}
.S .eli .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.S .eli h2{font-family:var(--font-head);font-weight:500;
           font-size:clamp(1.7rem,2.7vw,2.25rem);line-height:1.25;margin-top:14px}
.S .eli .k{font-size:10.5px;font-weight:650;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.S .eli p{font-size:15.5px;line-height:1.9;color:#c9d8e8;font-weight:300}
.S .eli p + p{margin-top:18px}
.S .eli .box{border:1px solid rgba(255,255,255,.22);padding:34px 30px}
.S .eli .box h3{font-size:1.35rem;color:#fff}
.S .eli .box p{margin-top:14px;font-size:14.5px}

/* ============ UNTERE HÄLFTE · Sand & Tiefe (ab «About me») ============ */
.S .warm{background:var(--paper)}
.S .warm .sec{padding-top:104px;padding-bottom:104px}
.S .warm .k{font-size:11px;font-weight:650;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.S .warm h2{font-size:clamp(1.85rem,3vw,2.5rem);line-height:1.22;margin-top:14px}
.S .warm h2 em{font-style:italic;color:var(--clay)}
.S .warm p{font-size:16px;line-height:1.9;color:var(--slate);font-weight:350}
.S .warm p + p{margin-top:20px}
.S .warm .sech{text-align:center;max-width:60ch;margin:0 auto}

.S .about{display:grid;grid-template-columns:1.06fr .94fr;gap:66px;align-items:start}
.S .about img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:18px;
              position:sticky;top:28px}
.S .about .hi{font-size:clamp(2rem,3.3vw,2.7rem)}
.S .about .born{margin:26px 0 20px;font-family:var(--font-head);font-style:italic;
                font-size:1.35rem;color:var(--clay)}
.S .about .strong{color:var(--navy);font-weight:600}
.S .about .beat{margin:30px 0;font-family:var(--font-head);font-size:1.5rem;color:var(--navy)}
.S .about .end{margin-top:34px;background:var(--sand);border-radius:16px;padding:30px 32px}
.S .about .end p{font-family:var(--font-head);font-size:1.3rem;line-height:1.55;color:var(--navy)}
.S .about .end p + p{margin-top:6px}

.S .light{background:var(--sand);border-radius:22px;padding:78px 44px;text-align:center}
.S .light img{width:104px;height:104px;margin:0 auto 30px}
.S .light h2{margin-top:0}
.S .light .lines{margin-top:26px}
.S .light .lines p{font-size:17px;line-height:2;color:var(--navy);font-weight:350;max-width:46ch;margin-inline:auto}
.S .light .lines p + p{margin-top:22px}
.S .light .punch{margin-top:30px;font-family:var(--font-head);font-style:italic;
                 font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.5;color:var(--navy);max-width:26ch;margin-inline:auto}
.S .light .pill{margin-top:36px}

.S .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;align-items:stretch}
.S .pack{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:38px 32px 32px;
         display:flex;flex-direction:column;gap:14px}
.S .pack.hl{background:var(--navy);border-color:var(--navy);color:#fff}
.S .pack h3{font-size:1.5rem;line-height:1.2}
.S .pack .claim{font-family:var(--font-head);font-style:italic;font-size:1.12rem;color:var(--clay)}
.S .pack.hl .claim{color:var(--gold)}
.S .pack p{font-size:14.5px;line-height:1.8;flex:1}
.S .pack.hl p{color:#cddaea}
.S .pack .what{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:600;
               color:var(--navy);padding-top:16px;border-top:1px solid var(--line)}
.S .pack.hl .what{color:#fff;border-color:rgba(255,255,255,.22)}
.S .pack .what .ico{width:17px;height:17px;color:var(--clay);margin-top:2px}
.S .pack.hl .what .ico{color:var(--gold)}
.S .pack .pr{font-family:var(--font-head);font-size:1.55rem}
.S .pack .pr small{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--slate);font-weight:400}
.S .pack.hl .pr small{color:var(--mist)}
.S .eliadd{margin-top:20px;background:var(--card);border:1.5px dashed var(--line);border-radius:18px;
           padding:28px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.S .eliadd h3{font-size:1.2rem}
.S .eliadd p{font-size:14.5px;max-width:56ch;flex:1;min-width:260px}

.S .faq{max-width:840px;margin:48px auto 0;display:grid;gap:12px}
.S .faq details{background:var(--card);border:1.5px solid var(--line);border-radius:16px}
.S .faq summary{list-style:none;cursor:pointer;padding:24px 56px 24px 28px;position:relative;
           font-family:var(--font-head);font-size:1.16rem;line-height:1.45}
.S .faq summary::-webkit-details-marker{display:none}
.S .faq summary::after{content:"";position:absolute;right:26px;top:50%;width:10px;height:10px;
                  border-right:1.6px solid var(--clay);border-bottom:1.6px solid var(--clay);
                  transform:translateY(-70%) rotate(45deg);transition:.2s}
.S .faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.S .faq details .body{padding:0 28px 26px}
.S .faq details p{font-size:15px;line-height:1.9}

.S .book{background:var(--navy);color:#fff;border-radius:22px;padding:78px 44px;text-align:center}
.S .book h2{font-size:clamp(1.9rem,3.1vw,2.6rem);line-height:1.22;max-width:20ch;margin:0 auto}
.S .book p{margin-top:20px;color:#c8d6e6;max-width:52ch;margin-inline:auto}
.S .book .slots{margin:38px auto 0;max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:13px}
.S .book .slot{display:block;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;
               background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:14px;
               padding:24px 22px;transition:.16s}
.S .book .slot:hover{border-color:var(--gold);background:rgba(255,255,255,.05)}
.S .book .slot.on{border-color:var(--gold);background:rgba(194,154,91,.14)}
.S .book .slot .t{display:block;font-family:var(--font-head);font-size:1.2rem}
.S .book .slot .d{display:block;margin-top:6px;font-size:13px;color:var(--mist)}
.S .book .slot .go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:11px;
                   font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.S .book .slot .go::after{content:"\2192"}
.S .book .slot.on .go::after{content:"\2193"}
.S .calbox{max-width:1040px;margin:0 auto}
.S .calbox.offen{margin-top:26px;background:#fff;border-radius:16px;overflow:hidden}
.S .calbox iframe{display:block;width:100%;height:770px;border:0}
.S .calbox .calfall{margin:0;padding:40px 28px;text-align:center;font-size:15px;color:var(--slate);line-height:1.9}
.S .calbox .calfall a{color:var(--navy);font-weight:600;border-bottom:1.5px solid var(--clay)}
@media(max-width:1180px){.S .calbox iframe{height:1480px}}
.S .book .hint{margin-top:26px;font-size:12.5px;color:#94aac4;line-height:1.8}
.S .book .hint a{color:var(--mist);border-bottom:1px solid rgba(175,196,214,.45)}
.S .book .hint a:hover{color:#fff;border-color:#fff}

.S .foot{padding-top:56px;padding-bottom:64px;font-size:13px;color:var(--slate);text-align:center;line-height:1.9}
.S .foot .sp{margin-top:12px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.S .foot a:hover{color:var(--navy)}

@media(max-width:960px){
 .S .wrap,.S .nav,.S .hero,.S .facts .in{padding-left:24px;padding-right:24px}
 .S .nav{gap:16px;flex-wrap:wrap;padding-top:20px}
 .S .nav .links{display:none}
 .S .brand img{width:46px;height:46px}
 .S .brand .n{font-size:19px}
 .S .stage{min-height:auto}
 .S .stage::after{background:linear-gradient(178deg,rgba(18,37,64,.93) 0%,rgba(18,37,64,.7) 38%,rgba(18,37,64,.9) 74%,rgba(18,37,64,.96) 100%)}
 .S .hero{padding-top:64px;padding-bottom:64px}
 .S .dark .sec,.S .warm .sec,.S .eli{padding:66px 0}
 .S .step{grid-template-columns:1fr;gap:8px;padding:26px 0}
 .S .eli .grid,.S .about,.S .packs,.S .book .slots{grid-template-columns:1fr;gap:30px}
 .S .calbox iframe{height:1480px}
 .S .about img{position:static;max-width:420px}
 .S .light,.S .book{padding:52px 24px;border-radius:18px}
 .S .packs{gap:16px}
}

/* --------------------------- Sprachwahl --------------------------------- */
.S .lang{display:inline-flex;gap:9px;font-size:10.5px;letter-spacing:.13em;font-weight:600}
.S .lang a{color:rgba(255,255,255,.62)}
.S .lang a:hover{color:#fff}
.S .lang a.on{color:#fff;border-bottom:1px solid var(--gold);padding-bottom:2px}
.S .foot .lang a{color:var(--slate)}
.S .foot .lang a.on{color:var(--navy);border-color:var(--clay)}

/* ------------------------- Kontaktformular ------------------------------ */
.S .kontakt{background:var(--sand);border-radius:var(--radius-lg);padding:64px 44px;margin-top:20px}
.S .kontakt .kopf{text-align:center;max-width:56ch;margin:0 auto}
.S .kontakt form{max-width:660px;margin:36px auto 0;display:grid;gap:16px}
.S .kontakt .zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.S .kontakt label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--navy)}
.S .kontakt input[type=text],.S .kontakt input[type=email],.S .kontakt input[type=tel],.S .kontakt textarea{
  width:100%;padding:14px 16px;font:inherit;font-size:15px;line-height:1.6;color:var(--navy);
  background:#fff;border:1.5px solid var(--line);border-radius:12px}
.S .kontakt textarea{min-height:150px;resize:vertical}
.S .kontakt input:focus,.S .kontakt textarea:focus{outline:2px solid var(--mist);outline-offset:1px;border-color:var(--mist)}
.S .kontakt .zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.7;color:var(--slate)}
.S .kontakt .zustimmung input{margin-top:4px;width:17px;height:17px;flex:none;accent-color:var(--navy)}
.S .kontakt .zustimmung a{border-bottom:1px solid var(--clay);color:var(--navy)}
.S .kontakt .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.S .kontakt button{justify-self:start}
.S .kontakt .fehler{font-size:13px;color:#8a2b22;margin-top:-8px}
.S .meldung{border-radius:14px;padding:16px 20px;font-size:14.5px;line-height:1.7;margin-bottom:22px}
.S .meldung.ok{background:#e4f0e9;border:1px solid #b9d6c6;color:#245240}
.S .meldung.no{background:#fbe9e7;border:1px solid #e5bdb7;color:#8a2b22}

/* ------------------------- Cookie-Hinweis ------------------------------- */
.cookie-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:900;max-width:760px;margin:0 auto;
  background:var(--deep,#122540);color:#dbe7f2;border-radius:16px;padding:18px 22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-size:13.5px;line-height:1.65;
  box-shadow:0 10px 40px rgba(0,0,0,.28)}
.cookie-consent a{color:#AFC4D6;border-bottom:1px solid rgba(175,196,214,.5)}
.cookie-consent span{flex:1;min-width:240px}
.cookie-consent .btn{font:inherit;font-size:12.5px;font-weight:600;padding:10px 20px;border-radius:999px;
  cursor:pointer;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff}
.cookie-consent .btn--primary{background:#C29A5B;border-color:#C29A5B;color:#152a46}
@media(max-width:600px){.cookie-consent{padding:16px}.cookie-consent .btn{flex:1}}

@media(max-width:960px){
 .S .kontakt{padding:44px 22px}
 .S .kontakt .zwei{grid-template-columns:1fr}
}

/* --- «Über mich»: langer Text unter dem Bild über die ganze Blockbreite --- */
.S .about{align-items:start}
.S .about-weiter{margin-top:52px;padding-top:44px;border-top:1px solid var(--line)}
.S .about-weiter{columns:2;column-gap:60px}
.S .about-weiter p{margin:0;break-inside:avoid}
.S .about-weiter p + p{margin-top:20px}
.S .about-weiter .end{column-span:all;margin-top:38px;background:var(--sand);
                      border-radius:var(--radius);padding:30px 32px;max-width:64ch}
.S .about-weiter .end p{columns:1;font-family:var(--font-head);font-size:1.3rem;line-height:1.55;color:var(--navy)}
.S .about-weiter .end p + p{margin-top:6px}
@media(max-width:960px){
 .S .about-weiter{margin-top:34px;padding-top:30px}
 .S .about-weiter{columns:1}
}

/* ----------------------------- Rechtstexte ------------------------------ */
.S .rechts{background:var(--paper);padding:0 0 90px}
.S .rechtskopf{background:var(--deep);color:#fff;padding:56px 0 52px}
.S .rechtskopf .in{max-width:820px;margin:0 auto;padding:0 24px}
.S .rechtskopf .marke{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.S .rechtskopf .marke img{width:44px;height:44px}
.S .rechtskopf .marke .n{font-family:var(--font-head);font-size:16px;letter-spacing:.16em;line-height:1.25}
.S .rechtskopf .marke .n small{display:block;font-family:var(--font-base);font-size:8.5px;
                               letter-spacing:.2em;color:var(--mist);margin-top:5px}
.S .rechtskopf h1{font-family:var(--font-head);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.2}
.S .rechtskopf .zurueck{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:12.5px;
                        color:var(--mist);border-bottom:1px solid rgba(175,196,214,.4);padding-bottom:2px}
.S .rechtskopf .zurueck:hover{color:#fff}
.S .rechtstext{max-width:820px;margin:0 auto;padding:56px 24px 0}
.S .rechtstext h2{font-family:var(--font-head);font-weight:500;font-size:1.45rem;margin-top:46px;line-height:1.3}
.S .rechtstext h2:first-child{margin-top:0}
.S .rechtstext p,.S .rechtstext li{font-size:15.5px;line-height:1.9;color:var(--slate);font-weight:350}
.S .rechtstext p{margin-top:14px}
.S .rechtstext ul{margin-top:14px;display:grid;gap:8px}
.S .rechtstext li{padding-left:20px;position:relative}
.S .rechtstext li::before{content:"";position:absolute;left:0;top:.85em;width:9px;height:1px;background:var(--clay)}
.S .rechtstext a{color:var(--navy);border-bottom:1px solid var(--clay)}
.S .rechtstext .adresse{margin-top:14px;background:var(--sand);border-radius:var(--radius);
                        padding:24px 26px;font-size:15.5px;line-height:1.9;color:var(--navy)}
.S .rechtstext .stand{margin-top:38px;font-size:13px;color:var(--slate)}

/* ==========================================================================
   PIN-SEITE (Baustelle)
   Ruhige, mittige Karte auf dunkelblauem Grund – dieselbe Anmutung wie der
   Einstieg der Seite, damit der Link schon nach der Marke aussieht.
   ========================================================================== */
.S .gate{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 20px;
         background:radial-gradient(120% 90% at 50% 0%, #1b3a63 0%, var(--deep) 58%, #0d1c31 100%);
         color:#F7F7F5}
.S .gate .box{width:100%;max-width:400px;text-align:center}
.S .gate .box > img{width:96px;height:96px;margin:0 auto;border-radius:50%;
                    box-shadow:0 18px 44px rgba(0,0,0,.35)}
.S .gate .n{margin-top:26px;font-family:var(--font-head);font-size:19px;letter-spacing:.16em;
            line-height:1.3;color:#fff}
.S .gate .n small{display:block;font-family:var(--font-base);font-size:8.5px;letter-spacing:.22em;
                  color:var(--mist);margin-top:8px;font-weight:500}
.S .gate .rule{width:44px;height:1px;background:var(--gold);margin:26px auto 0;opacity:.9}
.S .gate h1{font-family:var(--font-head);font-weight:500;font-size:clamp(1.5rem,5.5vw,1.85rem);
            line-height:1.3;margin-top:26px;text-wrap:balance}
.S .gate p{margin-top:14px;font-size:14.5px;line-height:1.75;color:#b9cbde;font-weight:300;
           max-width:34ch;margin-inline:auto}
.S .gate form{margin-top:30px;display:grid;gap:12px}
.S .gate input{width:100%;padding:17px 18px;font:inherit;font-size:24px;letter-spacing:.55em;
               text-indent:.55em;text-align:center;color:#fff;border-radius:4px;
               background:rgba(255,255,255,.06);border:1px solid rgba(175,196,214,.3);
               transition:.16s}
.S .gate input::placeholder{color:rgba(175,196,214,.45);letter-spacing:.4em}
.S .gate input:focus{outline:0;border-color:var(--gold);background:rgba(255,255,255,.1)}
.S .gate button{padding:16px 24px;font:inherit;font-size:11.5px;font-weight:650;letter-spacing:.16em;
                text-transform:uppercase;color:#152a46;background:var(--gold);border:0;border-radius:4px;
                cursor:pointer;transition:.16s}
.S .gate button:hover{background:#d3ac6e}
.S .gate .err{margin-top:16px;font-size:13.5px;line-height:1.6;border-radius:4px;padding:12px 14px;
              color:#f3cfcb;background:rgba(160,60,50,.22);border:1px solid rgba(200,120,110,.4)}
.S .gate .sprachen{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
                   display:flex;justify-content:center;gap:18px;
                   font-size:10.5px;letter-spacing:.16em;font-weight:600}
.S .gate .sprachen a{color:rgba(255,255,255,.5);padding-bottom:3px}
.S .gate .sprachen a:hover{color:#fff}
.S .gate .sprachen a.on{color:#fff;border-bottom:1px solid var(--gold)}
@media(max-width:400px){
  .S .gate .box > img{width:78px;height:78px}
  .S .gate input{font-size:21px;letter-spacing:.42em;text-indent:.42em}
}

/* ==========================================================================
   MENÜ FÜR HANDY UND TABLET
   Auf schmalen Bildschirmen war die Navigation vorher schlicht ausgeblendet.
   Jetzt liegt sie hinter einem Menüknopf – ohne JavaScript benutzbar.
   ========================================================================== */
.S .menue{display:none;margin-left:auto;position:relative}
.S .menue > summary{list-style:none;cursor:pointer;width:44px;height:44px;padding:0;margin:0;
                    display:grid;place-items:center;font-size:0;
                    border:1px solid rgba(255,255,255,.28);border-radius:6px;transition:.16s}
.S .menue > summary::-webkit-details-marker{display:none}
.S .menue > summary::after{content:none}
.S .menue > summary:hover{border-color:var(--gold)}
.S .menue .strich,.S .menue .strich::before,.S .menue .strich::after{
  display:block;width:20px;height:1.5px;background:#fff;border-radius:2px;transition:.18s}
.S .menue .strich{position:relative}
.S .menue .strich::before,.S .menue .strich::after{content:"";position:absolute;left:0}
.S .menue .strich::before{top:-6px}
.S .menue .strich::after{top:6px}
.S .menue[open] > summary{border-color:var(--gold)}
.S .menue[open] .strich{background:transparent}
.S .menue[open] .strich::before{transform:rotate(45deg);top:0}
.S .menue[open] .strich::after{transform:rotate(-45deg);top:0}

.S .menue .panel{position:absolute;right:0;top:calc(100% + 12px);z-index:60;width:min(78vw,280px);
                 background:var(--deep);border:1px solid rgba(255,255,255,.16);border-radius:12px;
                 padding:10px;display:grid;gap:2px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.S .menue .panel > a{display:block;padding:13px 14px;border-radius:8px;color:#dbe7f2;
                     font-size:13.5px;font-weight:500;letter-spacing:.02em;text-transform:none}
.S .menue .panel > a:hover{background:rgba(255,255,255,.07);color:#fff}
.S .menue .panel .btn{margin-top:8px;justify-content:center;font-size:10.5px;padding:14px 16px;
                      text-transform:uppercase;letter-spacing:.14em;font-weight:650}
.S .menue .panel .lang{margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
                       display:grid;gap:2px}
.S .menue .panel .lang a{display:block;padding:10px 14px;border-radius:8px;font-size:12.5px;
                         letter-spacing:.02em;color:rgba(255,255,255,.6);border:0}
.S .menue .panel .lang a.on{color:#fff;background:rgba(194,154,91,.16)}

@media(max-width:960px){
  .S .menue{display:block}
  .S .nav .links{display:none}
  .S .nav > .lang{display:none}
  .S .nav .btn.buchen{display:none}
  .S .nav{gap:14px;justify-content:space-between}
  .S .brand{margin-right:auto}
}
@media(min-width:961px){
  .S .nav .btn.buchen{padding:11px 18px;font-size:10.5px}
}

/* Kleine Auszeichnungsschriften waren stellenweise unter 11 px – zu klein. */
.S .k,.S .dark .k,.S .warm .k,.S .eli .k{font-size:11.5px}
.S .book .slot .go{font-size:11.5px}
@media(max-width:600px){
  .S .k,.S .dark .k,.S .warm .k,.S .eli .k{font-size:12px;letter-spacing:.16em}
  .S .book .slot .go{font-size:12px}
  .S .hero .k{font-size:12px;letter-spacing:.2em}
  .S .foot{font-size:13px}
  .S .facts .in{font-size:13px}
}

/* Kopfzeile über den Hero legen, damit das offene Menü nicht durchscheint. */
.S .stage > .nav{position:relative;z-index:30}
.S .menue .panel{background:var(--deep);backdrop-filter:none}

/* ==========================================================================
   LESBARKEIT UND BREITEN
   Fliesstext bleibt überall in einer gut lesbaren Zeilenlänge (rund 65–75
   Zeichen). Ohne Begrenzung laufen die Zeilen auf grossen Bildschirmen auf
   über 95 Zeichen — dann verliert man beim Lesen die Zeile.
   Dieser Block steht bewusst am Schluss der Datei.
   ========================================================================== */
.S .narrow{max-width:none}
.S .narrow > p,
.S .dark .ask p,
.S .steps .step p{max-width:68ch}
.S .narrow > .loud{max-width:60ch}
.S .eli p{max-width:60ch}
.S .eli .box p{max-width:52ch}
.S .warm .sech p{max-width:58ch;margin-inline:auto}
.S .light .lines p{max-width:48ch}
.S .about > div > p,
.S .about-weiter p{max-width:70ch}
.S .faq details p{max-width:70ch}
.S .kontakt .kopf p{max-width:50ch;margin-inline:auto}
.S .pack p,.S .eliadd p{max-width:44ch}
.S .book p{max-width:52ch}
.S .foot > div{max-width:60ch;margin-inline:auto}
.S .rechtstext p,.S .rechtstext li{max-width:72ch}

/* Der lange «Über mich»-Text bleibt zweispaltig, solange die Spalten breit
   genug sind. Darunter einspaltig, aber begrenzt statt über die volle Breite. */
@media(max-width:900px){
  .S .about-weiter{columns:1}
  .S .about-weiter p{max-width:68ch}
}

/* ==========================================================================
   MITTLERE BREITEN (Tablet, kleines Notebook)
   ========================================================================== */
@media(max-width:1180px){
  .S .wrap,.S .nav,.S .hero,.S .facts .in{padding-left:32px;padding-right:32px}
  .S .steps .step{grid-template-columns:170px 1fr;gap:26px}
}
@media(max-width:1024px){
  .S .packs{grid-template-columns:1fr 1fr}
  .S .packs .pack:last-child{grid-column:1 / -1}
}

/* ==========================================================================
   SCHMALE BREITEN (grosses Handy quer, kleines Tablet)
   Muss NACH der 1024er-Regel stehen, sonst bleiben zwei Spalten stehen.
   ========================================================================== */
@media(max-width:760px){
  .S .packs{grid-template-columns:1fr;gap:16px}
  .S .packs .pack:last-child{grid-column:auto}
  .S .facts .in{gap:10px 26px}
  .S .light,.S .book,.S .kontakt{padding-left:22px;padding-right:22px}
  .S .eliadd{flex-direction:column;align-items:flex-start;gap:14px}
  .S .eliadd .pill{width:100%}
  /* min-width 260 px sprengt bei 320 px die Karte (Text ragte 5 px über den Rand) */
  .S .eliadd p{min-width:0}
}

/* ==========================================================================
   HANDY
   Knöpfe dürfen umbrechen und laufen über die volle Breite — sonst schiebt
   ein langer Knopftext die ganze Seite seitlich raus.
   ========================================================================== */
@media(max-width:600px){
  .S .wrap,.S .nav,.S .hero,.S .facts .in{padding-left:20px;padding-right:20px}

  .S .btn,.S .pill{white-space:normal;text-align:center;line-height:1.45;
                   letter-spacing:.1em;padding:14px 20px}
  .S .hero .cta{display:grid;gap:11px}
  .S .hero .cta .btn{width:100%}
  .S .light .pill,.S .pack .pill,.S .eliadd .pill,.S .kontakt button{width:100%}

  .S .brand img{width:42px;height:42px}
  .S .brand .n{font-size:17px;letter-spacing:.1em}
  .S .brand .n small{font-size:8.5px;letter-spacing:.16em}

  .S .hero h1{font-size:clamp(2.1rem,10vw,2.9rem)}
  .S .hero .sub{font-size:16px}
  .S .hero .cred{font-size:11.5px;line-height:1.9}
  .S .hero .k{font-size:12px;letter-spacing:.2em}

  .S .facts .in{display:grid;gap:9px;font-size:13px}

  .S .dark h2,.S .warm h2{font-size:clamp(1.55rem,7vw,2rem)}
  .S .dark p,.S .warm p,.S .narrow > p{font-size:15.5px}
  .S .dark .ask p{font-size:1.2rem}
  .S .dark .close p,.S .light .punch{font-size:1.15rem}
  .S .steps .step{grid-template-columns:1fr;gap:6px;padding:24px 0}

  .S .about .hi{font-size:1.9rem}
  .S .about .born{font-size:1.15rem}
  .S .about .beat,.S .about-weiter .end p{font-size:1.15rem}

  .S .pack{padding:30px 24px 26px}
  .S .pack h3{font-size:1.3rem}
  .S .light img{width:80px;height:80px}
  .S .faq summary{padding:20px 44px 20px 20px;font-size:1.05rem}
  .S .faq details .body{padding:0 20px 22px}
  .S .kontakt{padding:38px 20px}
  .S .book .slot{padding:20px 18px}
  .S .foot{font-size:13px}
  .S .k,.S .dark .k,.S .warm .k,.S .eli .k{font-size:12px;letter-spacing:.16em}
  .S .book .slot .go{font-size:12px}
  .S .rechtstext{padding-left:20px;padding-right:20px}
  .S .rechtskopf .in{padding-left:20px;padding-right:20px}
}

@media(max-width:400px){
  .S .wrap,.S .nav,.S .hero,.S .facts .in{padding-left:16px;padding-right:16px}
  .S .brand .n{font-size:15.5px}
  .S .brand img{width:38px;height:38px}
  .S .hero h1{font-size:2.05rem}
  /* 11,5 px statt 10,5 px (Mindestschrift 7b); ab 600 px dürfen Knöpfe ohnehin umbrechen */
  .S .btn{font-size:11.5px;padding:13px 16px}
}

/* Kleinste Schriftgrade anheben – unter 10 px liest das niemand mehr gern. */
.S .warm .k,.S .about .k,.S .light .k{font-size:11.5px}
.S .brand .n small{font-size:10px;letter-spacing:.2em}
@media(max-width:600px){
  .S .brand .n small{font-size:9.5px;letter-spacing:.14em}
  .S .warm .k,.S .about .k,.S .light .k{font-size:12px}
}
@media(max-width:400px){
  .S .brand .n small{font-size:9px}
}
.S .hero .k{font-size:11.5px}

/* Sicherheitsnetz: Abschnitte, die zugleich .wrap sind, dürfen den seitlichen
   Innenabstand nicht verlieren. Sonst klebt der Text am Bildschirmrand. */
.S .wrap.sec,.S .wrap.foot{padding-left:44px;padding-right:44px}
@media(max-width:1180px){.S .wrap.sec,.S .wrap.foot{padding-left:32px;padding-right:32px}}
@media(max-width:600px){.S .wrap.sec,.S .wrap.foot{padding-left:20px;padding-right:20px}}
@media(max-width:400px){.S .wrap.sec,.S .wrap.foot{padding-left:16px;padding-right:16px}}

/* ==========================================================================
   KOPFZEILE MIT DEM LÄNGEREN CLAIM
   «COACHING FOR CLARITY, CHANGE & SELF-CONNECTION» ist deutlich länger als
   die frühere Zeile. Der Markenblock darf deshalb schrumpfen und der Claim
   darf umbrechen – sonst schiebt er das Menü aus der Zeile.
   ========================================================================== */
.S .brand{min-width:0}
.S .brand .n{min-width:0}
.S .brand .n small{white-space:normal;overflow-wrap:break-word;line-height:1.55;max-width:270px}

@media(max-width:1200px){
  .S .nav .links{gap:20px;font-size:9.5px}
}
@media(max-width:1080px){
  .S .brand img{width:48px;height:48px}
  .S .brand .n{font-size:20px}
  .S .brand .n small{max-width:250px}
  .S .nav{gap:20px}
}
@media(max-width:960px){
  .S .brand .n small{max-width:250px}
}
@media(max-width:600px){
  .S .brand .n small{max-width:225px;letter-spacing:.1em}
}
@media(max-width:400px){
  .S .brand .n small{max-width:190px;letter-spacing:.08em}
}

/* Auf der PIN-Seite und über den Rechtstexten steht der Claim mittig –
   dort soll er sauber unter dem Namen sitzen. */
.S .gate .n small,.S .rechtskopf .marke .n small{max-width:280px;margin-inline:auto;white-space:normal}
.S .rechtskopf .marke{align-items:flex-start}

/* Sehr schmale Geräte (iPhone SE und ähnlich): Marke so weit verkleinern,
   dass der Menüknopf in derselben Zeile bleibt. */
@media(max-width:380px){
  .S .brand img{width:34px;height:34px}
  .S .brand{gap:11px}
  .S .brand .n{font-size:13.5px;letter-spacing:.05em}
  .S .brand .n small{font-size:8px;letter-spacing:.06em;max-width:150px;margin-top:4px}
  .S .nav{gap:10px}
  .S .menue > summary{width:40px;height:40px}
}

/* ==========================================================================
   GO-LIVE-REGELN AUS CLAUDE.md 7b / 8
   ========================================================================== */
/* [hidden] verliert sonst gegen display:grid/flex */
[hidden]{display:none!important}

/* Formularfelder mindestens 16 px – darunter zoomt iOS beim Antippen hinein */
.S .kontakt input[type=text],.S .kontakt input[type=email],.S .kontakt input[type=tel],.S .kontakt textarea{font-size:16px}
.S .kontakt input::placeholder,.S .kontakt textarea::placeholder{color:#8a93a0;opacity:1}
.S .kontakt [aria-invalid="true"]{border-color:#c0584a;background:#fffafa}

/* Tippziele mindestens 44 px auf Touch-Geräten */
@media (hover:none){
  .S .lang a,.S .foot .sp a,.S .foot .lang a,.S .rechtskopf .zurueck,
  .S .book .hint a,.S .kontakt .zustimmung a,.S .gate .sprachen a{
    display:inline-flex;align-items:center;min-height:44px;padding-inline:6px}
  .S .kontakt .zustimmung input{width:22px;height:22px}
  .S .kontakt .zustimmung{min-height:44px;align-items:center}
  .cookie-consent .btn{min-height:44px}
  .cookie-consent a{display:inline-flex;align-items:center;min-height:44px}
  .S .btn{min-height:44px}
  .S .menue > summary{width:44px;height:44px}
  .S .menue .panel > a{min-height:44px;display:flex;align-items:center}
}

/* Einstiegsbild steckt jetzt in <picture> (fünf Breiten, WebP + JPEG) */
.S .stage > picture{position:absolute;inset:0;z-index:0;display:block}
.S .stage > picture > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:56% 22%;opacity:.66}
.S .about figure picture{display:block}
.S .about figure img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:18px}

/* ==========================================================================
   EINSTIEG UNTER 900 PX GESTAPELT  (CLAUDE.md 7b)
   Gemessen bei 375 px: Der Text belegte 100 % der Bühne, das Foto war hinter
   dem Verlauf kaum zu erkennen. Jetzt: Foto oben in voller Helligkeit mit
   gedeckelter Höhe, Kopfzeile darüber, Text darunter auf ruhigem Dunkelblau.
   ========================================================================== */
@media (max-width:900px){
  .S .stage{display:block;min-height:0;background:var(--deep)}
  .S .stage > picture{position:relative;display:block;height:max(260px,min(46vh,440px));z-index:0}
  .S .stage > picture > img{opacity:1;object-position:62% 26%}
  /* Verlauf nur noch oben (Kopfzeile lesbar) und unten (weicher Übergang ins Blau) */
  .S .stage::after{inset:0 0 auto 0;height:max(260px,min(46vh,440px));
    background:linear-gradient(180deg,rgba(18,37,64,.86) 0%,rgba(18,37,64,.35) 26%,rgba(18,37,64,0) 46%,
                                      rgba(18,37,64,0) 70%,rgba(18,37,64,.7) 90%,var(--deep) 100%)}
  .S .stage > .nav{position:absolute;top:0;left:0;right:0;z-index:30}
  .S .hero{padding-top:26px;padding-bottom:56px;margin:0}
}
@supports (height:1dvh){
  @media (max-width:900px){
    .S .stage > picture,.S .stage::after{height:max(260px,min(46dvh,440px))}
  }
}

/* Mindestschriftgrad 11,5 px (CLAUDE.md 7b) auch für Menü, Menüknopf und Claim */
.S .nav .links{font-size:11.5px;letter-spacing:.12em}
.S .nav .btn.buchen,.S .lang{font-size:11.5px}
.S .brand .n small{font-size:11.5px;letter-spacing:.12em;max-width:300px}
@media(max-width:1200px){ .S .nav .links{font-size:11.5px;letter-spacing:.08em;gap:18px} .S .nav{gap:20px} }
@media(max-width:1080px){ .S .brand .n small{max-width:260px} .S .nav .links{gap:14px;letter-spacing:.06em} }
@media(max-width:600px){ .S .brand .n small{font-size:11.5px;letter-spacing:.06em;max-width:230px} }
@media(max-width:380px){ .S .brand .n small{font-size:11.5px;letter-spacing:.03em;max-width:170px} }
/* Menüpunkte nie umbrechen (etwa «Über mich»).
   Schrumpfen darf stattdessen der Markenblock, dessen Claim ohnehin umbricht. */
.S .nav .links{flex-shrink:0}
.S .nav .links a{white-space:nowrap}
.S .menue .panel .btn{font-size:12px}
/* Handy-Menü schon ab 1000 px. Eingeführt, als ein vierter Menüpunkt die Kopfzeile
   zwischen 961 und 1000 px auf 144 px Höhe trieb; der Punkt ist seit 15.09.2026 weg
   (nur noch der Knopf im Einstieg), die geprüfte Grenze bleibt. */
@media(max-width:1000px){
  .S .menue{display:block}
  .S .nav .links,.S .nav > .lang,.S .nav .btn.buchen{display:none}
  .S .nav{gap:14px;justify-content:space-between}
  .S .brand{margin-right:auto}
}

/* Schichtung wie in der abgenommenen Fassung: Bild ÜBER dem Verlauf (z-index 2,
   in der Reihenfolge vor Kopfzeile und Text), der Verlauf schimmert nur durch
   die 66 % Deckkraft. Mit z-index 0 lag der Verlauf darüber – das Foto war zu dunkel. */
.S .stage > picture{z-index:2}
.S .stage::after{z-index:0}
@media (max-width:900px){
  /* Gestapelt: Hier soll der Verlauf ÜBER dem Bild liegen (Kopfzeile lesbar, weicher Übergang) */
  .S .stage > picture{z-index:0}
  .S .stage::after{z-index:1}
}
/* Claim auf dem Handy in zwei statt drei Zeilen */
@media(max-width:600px){ .S .brand .n small{letter-spacing:.02em;max-width:228px} }
@media(max-width:380px){ .S .brand .n small{letter-spacing:0;max-width:180px} }

/* ==========================================================================
   NACHBESSERUNGEN 15.09.2026 (Prüfung mit mehreren Agenten, alles vorbestehend)
   ========================================================================== */
/* Buchungsknopf im Handy-Menü: «.menue .panel > a» (hellblau) schlug «.btn» (Tinte) –
   hellblau auf Gold hatte 2,1:1. Hover machte das Gold fast durchsichtig. */
.S .menue .panel > a.btn,.S .menue .panel > a.btn:hover{color:#152a46}
.S .menue .panel > a.btn:hover{background:#d3ac6e}
/* Claim im Kopf von Impressum/Datenschutz und auf der PIN-Seite: 8,5 px → 11,5 px (7b) */
.S .rechtskopf .marke .n small,.S .gate .n small{font-size:11.5px;letter-spacing:.12em}
/* Rechtstexte: 72ch ergab 90–96 Zeichen pro Zeile (ch misst die Ziffer 0, 2f). 64ch gab
   im Italienischen noch 92 (schmale Buchstaben) – 60ch bleibt in allen Sprachen unter 88 */
.S .rechtstext p,.S .rechtstext li{max-width:60ch}
/* Qualifikationszeile im Einstieg liegt ab 901 px auf hellen Stellen des Fotos
   (Jeans, Fuss; gemessen bis 1,9:1) – dezenter Schatten statt anderer Farbe */
@media(min-width:901px){
  .S .hero .cred{text-shadow:0 1px 3px rgba(18,37,64,.9),0 0 12px rgba(18,37,64,.7)}
}
/* Touch-Tablets ab 1001 px (iPad quer): Menülinks waren nur 14 px hoch */
@media (hover:none){
  .S .nav .links a{display:inline-flex;align-items:center;min-height:44px}
}