/*
Theme Name: Unique Harbour
Theme URI: https://unique-harbour.de/
Author: Unique Harbour GmbH
Description: Übergangsseite der Unique Harbour GmbH. Einseitiges Theme mit
  Projektanfrage-Formular. Keine externen Requests, keine Abhängigkeiten.
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
License: proprietär
Text Domain: unique-harbour
*/

/* Familjen Grotesk, lokal gehostet – keine externen Requests.
     Variable Schrift, deckt 400 bis 700 ab. */
  @font-face{
    font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(assets/fonts/familjen-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
    src:url(assets/fonts/familjen-latin-ext.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face{
    font-family:'Familjen Grotesk';font-style:italic;font-weight:400 700;font-display:swap;
    src:url(assets/fonts/familjen-italic-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  :root{
    --navy:#262945;
    --navy-soft:#4a4f6e;
    --gold:#c5b38d;
    --gold-deep:#a8926a;
    --paper:#ffffff;
    --paper-2:#ffffff;
    --line:rgba(38,41,69,.14);
    --maxw:1120px;
    --ease:cubic-bezier(.16,1,.3,1);
    --fehler:#a3423c;
    /* Eine Größe für allen Fließtext. Kleiner nur dort, wo es eine eigene
       Textsorte ist: Beschriftungen, Hinweise, Fehlermeldungen. */
    --fliesstext:17px;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{
    -webkit-text-size-adjust:100%;
    /* Versatz für Ankersprünge, damit sie nicht unter dem mitlaufenden
       Kopf landen. Mobil ist der Kopf niedriger als am Desktop. */
    scroll-padding-top:74px;
  }
  @media(min-width:900px){ html{scroll-padding-top:104px} }
  body{
    margin:0;
    background:var(--paper);
    color:var(--navy);
    font-family:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:var(--fliesstext);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  a{color:inherit}
  /* Kein blauer Kasten beim Antippen, sondern der eigene Fokusrahmen */
  a,button,summary,label,input,textarea{-webkit-tap-highlight-color:transparent}

  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
  @media(min-width:900px){ .wrap{padding:0 48px} }

  /* ---------- Fortschritt am oberen Rand ---------- */
  .fortschritt{
    position:fixed;top:0;left:0;right:0;height:2px;z-index:40;
    pointer-events:none;
  }
  .fortschritt span{
    display:block;height:100%;width:100%;
    background:var(--gold-deep);
    transform:scaleX(0);transform-origin:left center;
  }

  /* ---------- Header ---------- */
  .site-header{
    position:sticky;top:0;z-index:30;
    background:var(--paper);
    padding:32px 0 14px;
    border-bottom:1px solid transparent;
    transition:padding .4s var(--ease),border-color .4s ease,box-shadow .4s ease;
  }
  .logo{width:150px;height:auto;transition:width .4s var(--ease)}
  @media(min-width:900px){ .site-header{padding:44px 0 18px} .logo{width:186px} }

  .site-header.komprimiert{
    padding-top:13px;padding-bottom:11px;
    border-bottom-color:var(--line);
    box-shadow:0 8px 26px rgba(38,41,69,.055);
  }
  .site-header.komprimiert .logo{width:112px}
  @media(max-height:520px) and (orientation:landscape){
    .site-header{padding:14px 0 10px}
    .site-header.komprimiert{padding-top:9px;padding-bottom:8px}
    .logo{width:112px}
  }
  @media(min-width:900px){ .site-header.komprimiert .logo{width:132px} }

  /* ---------- Hero ---------- */
  .hero{padding:56px 0 64px}
  @media(min-width:900px){ .hero{padding:96px 0 104px} }
  /* Abstand mindestens das 2,5-fache der Linienstaerke, sonst wirkt es gedraengt */
  .hero-inner{padding-left:28px}
  @media(min-width:900px){ .hero-inner{padding-left:40px} }

  .eyebrow{
    font-size:11px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--navy-soft);opacity:.75;margin:0 0 20px;font-weight:500;
  }
  @media(min-width:900px){ .eyebrow{font-size:13px;margin-bottom:26px} }

  h1{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-weight:700;
    font-size:clamp(2rem,7.2vw,4.4rem);
    line-height:1.03;
    letter-spacing:-.022em;
    margin:0 0 28px;
  }
  h1 .accent{color:var(--gold-deep);display:block}
  h1 .line{display:block}

  .lede{
    font-size:clamp(1rem,2.6vw,1.22rem);
    color:var(--navy-soft);
    max-width:36ch;
    margin:0 0 36px;
  }

  /* ---------- Section basics ---------- */
  /* Keine Trennlinien zwischen den Abschnitten – der Abstand trennt genug */
  section{border-top:0}
  .sec{padding-top:56px;padding-bottom:56px}
  @media(min-width:900px){ .sec{padding-top:88px;padding-bottom:88px} }
  .kicker{
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--gold-deep);font-weight:600;margin:0 0 18px;
    display:flex;align-items:center;gap:16px;
  }
  .kicker::after{
    content:"";height:1px;flex:1 1 auto;max-width:120px;
    background:var(--gold);
    transform:scaleX(0);transform-origin:left center;
    transition:transform 1s var(--ease) .2s;
  }
  .kicker.in::after{transform:scaleX(1)}
  h2{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-weight:600;
    font-size:clamp(1.5rem,4.4vw,2.3rem);
    line-height:1.15;letter-spacing:-.015em;
    margin:0 0 20px;
  }
  .body-text{color:var(--navy-soft);max-width:62ch;margin:0 0 18px}


  /* ---------- Geschäftsführung ---------- */
  /* Auf dem Handy untereinander, ab Tablet-Breite nebeneinander */
  .people{display:grid;gap:40px;margin-top:36px}
  @media(min-width:560px){
    .people{grid-template-columns:1fr 1fr;gap:32px}
    .photo-frame{max-width:300px}
  }
  @media(min-width:900px){ .people{gap:48px} }

  .photo-frame{
    position:relative;overflow:hidden;
    width:100%;max-width:340px;aspect-ratio:4/5;
    background:#eceded;
    border-bottom:3px solid var(--gold);
  }
  /* height:auto ist entscheidend – ohne das wirkt das height-Attribut aus dem
     HTML als Vorgabe und verzerrt das Bild (Holger 6 % zu breit, Philipp 11 % zu hoch). */
  .photo-frame img{position:absolute;max-width:none;height:auto}
  /* Bildausschnitt pro Person, damit beide als Kopf-/Schulterportrait wirken */
  /* 125 % ergaben bei einem quadratischen Bild nur 400 px Höhe im 425er
     Rahmen – unten blitzte die Rahmenfläche durch. 133 % füllen ihn. */
  .photo-frame--hk img{width:135%;left:-17.5%;top:-3%}
  .photo-frame--pn img{width:180%;left:-39.5%;top:-8.5%}

  .photo-frame .full{filter:saturate(.9) contrast(1.02)}
  /* Philipps Aufnahme ist kühler und dunkler als Holgers. Gemessen an den
     Hintergrundflächen: Wärme (Rot minus Blau) −19 bis −25 gegenüber +21 bis +32.
     Der Filter zieht den Hintergrund ins Beige, ohne das Gesicht auszubrennen. */
  .photo-frame--pn .full{
    filter:sepia(.7) saturate(1.25) hue-rotate(0deg) brightness(1.05) contrast(.93);
  }
  /* Bild fährt beim Aufziehen aus der Übergröße in die Endgröße */
  .photo-frame.reveal-wipe .full{
    transform:scale(1.16);transition:transform 1.4s var(--ease);
    /* Ursprung = Bildmitte des jeweiligen Ausschnitts, damit der Kopf mittig bleibt */
    transform-origin:50% 50%;
  }
  .photo-frame--pn.reveal-wipe .full{transform-origin:50% 28%}
  .photo-frame.reveal-wipe.in .full{transform:scale(1)}

  .person h3{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-size:clamp(1.12rem,2.6vw,1.3rem);font-weight:600;letter-spacing:-.015em;
    line-height:1.22;
    margin:22px 0 5px;
  }
  .role{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-deep);font-weight:600;margin:0 0 14px;
  }
  /* Ressort und Schwerpunkte der Geschäftsführung */
  .ressort{
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--navy-soft);font-weight:600;margin:0 0 14px;opacity:.8;
  }
  .rolle-text{
    font-size:var(--fliesstext);line-height:1.6;color:var(--navy-soft);
    margin:0 0 20px;max-width:42ch;
  }

  /* Dreiklang als ruhiger Abschluss */
  .listen-label{
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--navy-soft);font-weight:600;opacity:.75;
    margin:34px 0 0;
  }
  .oder{
    margin:44px 0 0;padding-top:26px;
    border-top:1px solid var(--line);
    font-size:var(--fliesstext);color:var(--navy-soft);max-width:820px;
  }

  /* Umbruch in der Überschrift nur ab Tablet-Breite – darunter bricht
     die Zeile ohnehin um. Das Leerzeichen steht vor dem br, damit der
     Text auch für Vorleseprogramme sauber getrennt bleibt. */
  .umbruch{display:none}
  @media(min-width:760px){ .umbruch{display:inline} }

  .dreiklang{
    margin:34px 0 0;
    font-size:clamp(1.15rem,3vw,1.5rem);font-weight:600;
    letter-spacing:-.01em;color:var(--gold-deep);
  }

  /* So arbeiten wir – Label links, Text rechts (25 zu 75) */
  .tandem{margin-top:48px;max-width:980px}
  @media(min-width:760px){
    .tandem{
      display:grid;grid-template-columns:1fr 3fr;
      column-gap:40px;align-items:start;
    }
    .tandem-titel{margin:0}
    .tandem .tandem-text{grid-column:2}
  }
  .tandem-titel{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-deep);font-weight:600;margin:0 0 16px;
    padding-top:3px;
  }
  .tandem p{color:var(--navy-soft);font-size:var(--fliesstext);line-height:1.65;margin:0 0 16px}
  .tandem p:last-child{margin-bottom:0}

  .contact-line{margin:0 0 6px;font-size:var(--fliesstext)}
  .contact-line:last-child{margin-bottom:0}
  .contact-line a{
    color:var(--navy);text-decoration:none;
    border-bottom:1px solid var(--gold);
    padding-bottom:2px;
  }
  .contact-line a:hover{color:var(--gold-deep)}

  /* ---------- Kontakt ---------- */
  .contact-grid{display:grid;gap:28px;margin-top:28px}
  @media(min-width:760px){ .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} }
  .contact-block h3{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--navy-soft);font-weight:600;margin:0 0 10px;
  }
  .contact-block p{margin:0;color:var(--navy)}
  .mail-big{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-size:clamp(1.05rem,3vw,1.35rem);font-weight:600;overflow-wrap:anywhere;
    text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px;
    display:inline-block;
  }

  /* ---------- Projektanfrage: abgehobene Karte ---------- */
  .karte{
    position:relative;
    margin-top:36px;max-width:820px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:0;
    padding:26px 22px;
    box-shadow:0 30px 80px rgba(38,41,69,.16),
               0 4px 14px rgba(38,41,69,.06);
  }
  @media(min-width:760px){ .karte{padding:44px 48px} }

  /* Die Karte hebt sich beim Erscheinen an */
  .reveal-karte{
    opacity:0;transform:translateY(46px) scale(.982);
    box-shadow:0 6px 18px rgba(38,41,69,.06);
    transition:opacity .8s var(--ease),
               transform 1.15s var(--ease),
               box-shadow 1.4s var(--ease);
  }
  .reveal-karte.in{
    opacity:1;transform:none;
    box-shadow:0 30px 80px rgba(38,41,69,.16),
               0 4px 14px rgba(38,41,69,.06);
  }

  .form{max-width:none}

  /* Schrittanzeige: nummerierte Punkte mit Verbindungslinie */
  .steps{
    list-style:none;display:flex;align-items:center;
    padding:0;margin:0 0 34px;
  }
  .steps li{
    display:flex;align-items:center;gap:11px;min-width:0;
    font-size:12px;font-weight:600;letter-spacing:.02em;
    color:var(--navy-soft);
  }
  .steps li:not(:last-child){flex:1}
  .steps li:not(:last-child)::after{
    content:"";flex:1 1 0;height:1px;background:var(--line);
    margin:0 14px;min-width:10px;
  }
  .ziffer{
    flex:none;width:30px;height:30px;border-radius:0;
    border:1px solid var(--line);background:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:600;color:var(--navy-soft);
    transition:background-color .45s var(--ease),color .45s var(--ease),
               border-color .45s var(--ease),transform .45s var(--ease);
  }
  /* Beschriftung schrumpft nie – die Verbindungslinie gibt nach */
  .bez{flex:none;white-space:nowrap}

  .steps li[aria-current="step"]{color:var(--navy)}
  .steps li[aria-current="step"] .ziffer{
    background:var(--navy);border-color:var(--navy);color:#fff;
    transform:scale(1.06);
  }
  .steps li.done .ziffer{
    background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;
  }
  .steps li.done:not(:last-child)::after{background:var(--gold)}

  /* Schmale Geräte: nur der aktuelle Schritt bekommt eine Beschriftung */
  @media(max-width:600px){
    .steps li:not([aria-current="step"]) .bez{display:none}
    .steps li{gap:0}
    .steps li[aria-current="step"]{gap:11px}
    .steps li:not(:last-child)::after{margin:0 10px}
  }

  .step{border:0;padding:0;margin:0;min-width:0}
  .step[hidden]{display:none}
  .step legend{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-size:clamp(1.15rem,3vw,1.4rem);font-weight:600;letter-spacing:-.01em;
    padding:0;margin:0 0 6px;
  }
  .step-hint{color:var(--navy-soft);font-size:var(--fliesstext);margin:0 0 26px}

  .fields{display:grid;gap:26px}
  @media(min-width:600px){ .fields{gap:22px} }
  @media(min-width:600px){
    .fields{grid-template-columns:1fr 1fr}
    .fields .span-2{grid-column:1 / -1}
  }

  .field{display:flex;flex-direction:column;min-width:0}
  .field label{
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    font-weight:600;color:var(--navy-soft);margin-bottom:8px;
  }
  .field .opt{letter-spacing:.04em;text-transform:none;font-weight:400;opacity:.7}
  .field input,.field textarea,.field select{
    font-family:inherit;font-size:var(--fliesstext);color:var(--navy);
    background:transparent;border:0;border-bottom:1px solid var(--line);
    padding:8px 0;border-radius:0;
    transition:border-color .3s ease;
  }
  .field textarea{resize:vertical;min-height:118px;line-height:1.6}
  .field input:focus,.field textarea:focus{
    outline:0;border-bottom-color:var(--gold-deep);
  }
  .field input::placeholder,.field textarea::placeholder{color:var(--navy-soft);opacity:.4}
  .field .msg{
    font-size:13px;color:var(--fehler);margin-top:7px;min-height:0;
  }
  .field[data-invalid] input,.field[data-invalid] textarea{border-bottom-color:var(--fehler)}

  /* Auswahl der Vorhabenart */
  .choices{display:flex;flex-wrap:wrap;gap:9px}
  .choices label{
    margin:0;font-size:var(--fliesstext);letter-spacing:.02em;text-transform:none;font-weight:400;
    color:var(--navy);border:1px solid var(--line);border-radius:0;
    padding:11px 18px;cursor:pointer;
    min-height:44px;display:flex;align-items:center;
    transition:border-color .25s ease,background .25s ease;
  }
  .choices input{position:absolute;opacity:0;width:0;height:0}
  @media(hover:hover){ .choices label:hover{border-color:var(--gold)} }
  .choices label:has(input:checked){
    border-color:var(--gold-deep);background:rgba(197,179,141,.16);font-weight:500;
  }
  .choices label:has(input:focus-visible){outline:2px solid var(--gold-deep);outline-offset:3px}

  /* Zusammenfassung */
  .summary{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:20px 0;margin:0 0 26px;
    display:grid;gap:12px;
  }
  @media(min-width:600px){ .summary{grid-template-columns:1fr 1fr;gap:14px 32px} }
  .summary div{min-width:0}
  .summary dt{
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--navy-soft);font-weight:600;margin-bottom:3px;
  }
  .summary dd{margin:0;font-size:var(--fliesstext);overflow-wrap:anywhere}
  .summary .span-2{grid-column:1 / -1}
  .summary dd.text{white-space:pre-line;color:var(--navy-soft)}

  /* Captcha und Einwilligung */
  .captcha{
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;
    padding:18px 20px;margin-bottom:24px;
    background:#fafaf8;border-left:3px solid var(--gold);
  }
  .captcha .field{flex:0 0 130px}
  .captcha .frage{
    flex:1 1 220px;font-size:var(--fliesstext);color:var(--navy);align-self:center;
  }
  .captcha .hinweis{
    flex:1 1 100%;font-size:13px;color:var(--navy-soft);opacity:.8;margin:0;
  }

  .check{display:flex;gap:13px;align-items:flex-start;margin-bottom:8px}
  .check input{
    appearance:none;-webkit-appearance:none;
    flex:none;width:26px;height:26px;margin:0;
    border:1px solid var(--navy-soft);background:transparent;
    cursor:pointer;position:relative;
    transition:border-color .25s ease,background .25s ease;
  }
  .check input:checked{background:var(--navy);border-color:var(--navy)}
  .check input:checked::after{
    content:"";position:absolute;left:8px;top:4px;
    width:8px;height:13px;border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(42deg);
  }
  .check label{font-size:var(--fliesstext);line-height:1.55;color:var(--navy-soft);cursor:pointer}
  .check label a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold)}
  .check[data-invalid] input{border-color:var(--fehler)}

  /* Honeypot – für Menschen unsichtbar, für Bots ein Köder */
  .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* Navigation */
  .form-nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
  .btn{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-size:15px;font-weight:600;letter-spacing:.01em;
    padding:15px 30px;border:1px solid var(--navy);border-radius:0;
    color:#fff;cursor:pointer;
    background-color:var(--navy);
    background-image:linear-gradient(var(--gold-deep),var(--gold-deep));
    background-repeat:no-repeat;
    background-position:left center;
    background-size:0% 100%;
    transition:background-size .45s var(--ease),border-color .35s ease,
               color .3s ease,transform .25s var(--ease),box-shadow .35s ease;
  }
  @media(hover:hover){
    .btn:hover{
      background-size:100% 100%;border-color:var(--gold-deep);
      transform:translateY(-2px);box-shadow:0 10px 22px rgba(38,41,69,.14);
    }
    .btn--ghost:hover{
      background-size:0% 100%;color:var(--gold-deep);border-color:var(--gold);
      box-shadow:none;
    }
  }
  /* Auf Touch zählt das Gedrückthalten */
  .btn:active{background-size:100% 100%;border-color:var(--gold-deep)}
  .btn:active{transform:translateY(1px)}
  .btn[disabled]{opacity:.55;cursor:default;transform:none}
  a.btn{display:inline-block;text-decoration:none;color:#fff}
  a.btn:hover{color:#fff}
  .btn--ghost{background-color:transparent;color:var(--navy);border-color:var(--line)}
  .form-status{font-size:13px;color:var(--fehler);flex:1 1 100%;margin:0}
  @media(max-width:400px){
    .btn{padding:14px 20px;font-size:14px}
    .form-nav{gap:10px}
  }

  /* Erfolgsmeldung – sitzt in der Karte */
  .danke{text-align:left}
  .haken{
    display:flex;align-items:center;justify-content:center;
    width:52px;height:52px;border-radius:0;
    background:rgba(197,179,141,.18);color:var(--gold-deep);
    margin:0 0 20px;
  }
  .haken svg{width:24px;height:24px}
  .danke h3{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-size:clamp(1.2rem,3vw,1.5rem);font-weight:600;margin:0 0 12px;
  }
  .danke p{margin:0 0 10px;color:var(--navy-soft)}
  .danke p:last-child{margin-bottom:0}

  /* Hinweis ohne JavaScript */
  .done-box{
    border-left:3px solid var(--gold);padding:24px 26px;
    background:#fafaf8;max-width:820px;margin-top:34px;
  }
  .done-box h3{
    font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-size:1.2rem;font-weight:600;margin:0 0 10px;
  }
  .done-box p{margin:0;color:var(--navy-soft)}

  /* ---------- Legal ---------- */
  .legal{background:var(--paper-2)}
  .legal .sec{padding-top:48px;padding-bottom:48px}
  .legal h2{font-size:clamp(1.2rem,3.2vw,1.5rem)}
  .legal-grid{display:grid;gap:32px;max-width:860px}
  .legal p, .legal li{font-size:var(--fliesstext);color:var(--navy-soft);line-height:1.6}
  .legal p{margin:0 0 12px}
  .legal strong{color:var(--navy);font-weight:600}

  /* Aufklappbarer Block */
  .disclosure{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    max-width:860px;
  }
  .disclosure summary{
    display:flex;align-items:center;gap:18px;
    padding:22px 0;cursor:pointer;list-style:none;
    font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:600;
    font-size:clamp(1.2rem,3.2vw,1.5rem);letter-spacing:-.01em;color:var(--navy);
  }
  .disclosure summary::-webkit-details-marker{display:none}
  .disclosure summary::marker{content:""}
  @media(hover:hover){
    .disclosure summary:hover .zeichen{border-color:var(--gold-deep);background:rgba(197,179,141,.16)}
  }
  .disclosure summary:active .zeichen{border-color:var(--gold-deep)}
  .disclosure summary .label{flex:1;min-width:0}
  .disclosure summary .aktion{
    font-family:inherit;font-size:11px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--navy-soft);
    opacity:.7;flex:none;
  }
  @media(max-width:559px){ .disclosure summary .aktion{display:none} }
  .disclosure summary .zu{display:none}
  .disclosure[open] summary .auf{display:none}
  .disclosure[open] summary .zu{display:inline}
  .zeichen{
    flex:none;width:38px;height:38px;
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .3s ease,background .3s ease;
  }
  .zeichen svg{width:15px;height:15px;color:var(--gold-deep)}
  .zeichen .strich{transition:transform .35s var(--ease),opacity .25s ease}
  .disclosure[open] .zeichen .senkrecht{transform:scaleY(0);opacity:0}
  .disclosure-inhalt{padding:4px 0 30px}
  .disclosure[open] .disclosure-inhalt{animation:aufklappen .5s var(--ease)}
  @keyframes aufklappen{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
  @media (prefers-reduced-motion:reduce){
    .disclosure[open] .disclosure-inhalt{animation:none}
    .zeichen .strich{transition:none}
  }

  /* ---------- Ikonografie ---------- */
  /* Leistungen bewusst ohne Rahmen, Flächen und Hover – mit Kacheloptik
     wirken die Einträge anklickbar, was sie nicht sind. */
  .leistungen{
    list-style:none;padding:0;margin:18px 0 0;
    display:grid;gap:24px 40px;
  }
  @media(min-width:560px){ .leistungen{grid-template-columns:1fr 1fr} }
  @media(min-width:900px){ .leistungen{grid-template-columns:repeat(3,1fr);gap:28px 48px} }
  .leistungen li{
    display:flex;align-items:center;gap:14px;
    opacity:0;transform:translateY(14px);
    transition:opacity .55s var(--ease),transform .65s var(--ease);
  }
  .leistungen.in li{opacity:1;transform:none}
  .leistungen.in li:nth-child(1){transition-delay:.02s}
  .leistungen.in li:nth-child(2){transition-delay:.08s}
  .leistungen.in li:nth-child(3){transition-delay:.14s}
  .leistungen.in li:nth-child(4){transition-delay:.20s}
  .leistungen.in li:nth-child(5){transition-delay:.26s}
  .leistungen.in li:nth-child(6){transition-delay:.32s}

  /* Icon ohne Kasten: kein Rahmen, keine Fläche, keine Reaktion auf den Zeiger */
  .ikon{flex:none;width:30px;height:30px;color:var(--navy)}
  .ikon svg{width:100%;height:100%;display:block}

  .leistungen .titel{
    font-size:var(--fliesstext);font-weight:500;letter-spacing:-.005em;
    color:var(--navy);line-height:1.4;
  }

  /* Schlusssatz des Abschnitts */
  .merksatz{
    margin:40px 0 0;padding-left:22px;
    border-left:6px solid var(--gold);
    font-size:clamp(1.05rem,2.4vw,1.28rem);
    font-weight:500;color:var(--navy);max-width:44ch;line-height:1.4;
  }

  /* Kontaktblöcke mit Symbol */
  .contact-block h3{display:flex;align-items:center;gap:9px}
  .contact-block h3 svg{
    width:15px;height:15px;flex:none;color:var(--gold-deep);
  }

  /* ---------- Footer ---------- */
  .site-footer{
    border-top:1px solid var(--line);
    padding-top:26px;padding-bottom:40px;
    display:flex;flex-direction:column;gap:10px;
    font-size:13px;color:var(--navy-soft);
  }
  @media(min-width:760px){
    .site-footer{flex-direction:row;justify-content:space-between;align-items:center}
  }
  .site-footer a{text-decoration:none;border-bottom:1px solid var(--gold)}
  .aufbau{
    display:block;margin-top:5px;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--navy-soft);opacity:.5;
  }

  .skip{position:absolute;left:-9999px}
  .skip:focus{left:16px;top:16px;background:var(--navy);color:var(--paper);padding:10px 16px;z-index:10}

  /* ---------- Scroll-Reveals ---------- */

  /* .reveal ist nur der Haken für das Script – die Optik kommt aus den Varianten */

  /* 1. Aufsteigen: für Textblöcke und Karten */
  .reveal-up{
    opacity:0;transform:translateY(38px);
    transition:opacity .75s var(--ease),transform 1.05s var(--ease);
  }
  .reveal-up.in{opacity:1;transform:none}

  /* 2. Wipe: Inhalt wird von oben nach unten aufgezogen */
  .reveal-wipe{
    clip-path:inset(0 0 100% 0);
    transition:clip-path 1.15s var(--ease);
  }
  .reveal-wipe.in{clip-path:inset(0 0 0 0)}

  /* 3. Zeilenmaske: Text steigt hinter einer Kante hervor */
  .reveal-line{
    display:block;overflow:hidden;
    padding-bottom:.14em;margin-bottom:-.14em;
  }
  .reveal-line > span{
    display:block;transform:translateY(108%);
    transition:transform 1.1s var(--ease);
  }
  .reveal-line.in > span{transform:none}

  /* 4. Linie zeichnet sich ein */
  .reveal-draw{position:relative}
  .reveal-draw::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:8px;
    background:var(--gold);
    transform:scaleY(0);transform-origin:top;
    transition:transform 1.2s var(--ease);
  }
  .reveal-draw.in::before{transform:scaleY(1)}

  /* Versatz, damit Elemente nacheinander aufbauen */
  .reveal[data-delay="1"]{transition-delay:.1s}
  .reveal[data-delay="2"]{transition-delay:.2s}
  .reveal[data-delay="3"]{transition-delay:.3s}
  .reveal[data-delay="4"]{transition-delay:.4s}
  .reveal-line[data-delay="1"] > span{transition-delay:.12s}
  .reveal-line[data-delay="2"] > span{transition-delay:.24s}


  /* Goldene Linie wächst beim Hover über den ruhenden Unterstrich */
  .contact-line a,.mail-big,.site-footer a,.legal a{
    border-bottom-color:rgba(197,179,141,.5);
    background-image:linear-gradient(var(--gold-deep),var(--gold-deep));
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 2px;
    transition:background-size .45s var(--ease),color .3s ease;
  }
  @media(hover:hover){
    .contact-line a:hover,.mail-big:hover,.site-footer a:hover,.legal a:hover{
      background-size:100% 2px;color:var(--gold-deep);
    }
  }

  :focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

  @media (prefers-reduced-motion:reduce){
    .reveal-up,.reveal-karte,.reveal-wipe,.reveal-line > span,.leistungen li,
    .photo-frame.reveal-wipe .full{
      opacity:1 !important;transform:none !important;clip-path:none !important;
      transition:none !important;
    }
    .reveal-draw::before{transform:scaleY(1);transition:none}
    .kicker::after{transform:scaleX(1);transition:none}
    .site-header{position:static;transition:none}
    .fortschritt{display:none}
    .btn:hover{transform:none;box-shadow:none}
  }