/* ============================================================
   gregordietz.at — Neubau nach dem Trichter-Modell
   Aufbau: Claim → Beweis → Was ich baue → Freebie-Regal →
           benanntes Angebot → Referenzen → Person → Termin
   Ton: Du-Form, trocken, warm. Keine Superlative.
   ============================================================ */

/* ---- Schriften ----
   Archivo (OFL) als Stimme, auf 118 % Breite gezogen: Präsenz ohne Lautstärke.
   Instrument Serif Italic (OFL) trägt nur das eine goldene Wort — der Bruch
   zwischen technischer Grotesk und kontrastreicher Kursiver ist die Signatur. */
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:300 800;font-stretch:100% 125%;font-style:normal;font-display:swap;
  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:"Archivo";src:url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight:300 800;font-stretch:100% 125%;font-style:normal;font-display:swap;
  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}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrumentserif-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrumentserif-400-italic-latin.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrumentserif-400-italic-latin-ext.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF}

:root{
  --ink:#0a1220; --navy:#0f1d33; --navy-2:#16294a;
  --gold:#c6a15b; --gold-2:#e0c48d;
  --paper:#f7f5f0; --paper-2:#efebe3; --white:#fff;
  --text:#182132; --muted:#5b6577; --line:#e2ddd3;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --breit:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
body{font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.65;
     color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.container{max-width:var(--breit);margin:0 auto;padding:0 28px}

/* ---- Typografie ---- */
.h1,.h2,.h3{font-family:var(--sans);font-weight:700;font-stretch:118%;
            letter-spacing:-.022em;line-height:1.04;text-wrap:balance}
.h1{font-size:clamp(44px,7.4vw,86px)}
.h2{font-size:clamp(32px,4.6vw,54px);line-height:1.06}
.h3{font-size:clamp(21px,2.2vw,26px);line-height:1.18}
em{font-family:var(--serif);font-weight:400;font-stretch:normal;font-style:italic;
   font-size:1.10em;letter-spacing:-.005em;color:var(--gold)}

.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
         color:var(--gold);margin-bottom:20px}
.lead{font-weight:300;font-size:clamp(18px,2vw,21px);line-height:1.6;
      color:var(--muted);max-width:60ch}
.lead a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);
        text-underline-offset:4px;font-weight:400}
.band--dunkel .lead a,.held .lead a{color:var(--gold-2)}

/* ---- Flächen ---- */
.band{padding:clamp(72px,9vw,124px) 0}
.band--dunkel{background:radial-gradient(120% 90% at 78% 4%,var(--navy-2) 0%,var(--navy) 55%),
              var(--navy);color:var(--paper)}
.band--dunkel .lead{color:rgba(247,245,240,.72)}
.band--dunkel em{color:var(--gold-2)}
.band--sand{background:var(--paper-2)}

/* ---- Kopfzeile ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,245,240,.92);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:28px;height:70px}
.nav__logo{font-family:var(--serif);font-size:25px;text-decoration:none;
           color:var(--navy);white-space:nowrap}
.nav__links{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav__links a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--text)}
.nav__links a:hover{color:var(--gold)}
@media(max-width:880px){.nav__links a:not(.btn){display:none}}

/* ---- Knöpfe ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;
     letter-spacing:.01em;text-decoration:none;padding:15px 26px;border-radius:2px;
     border:1px solid transparent;transition:transform .15s,background .15s}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-2);transform:translateY(-1px)}
.btn--linie{border-color:currentColor;background:none}
.btn--linie:hover{background:rgba(198,161,91,.12)}
.btn__preis{font-weight:400;opacity:.7}

/* ---- Held ---- */
.held{background:radial-gradient(120% 90% at 82% 0%,var(--navy-2) 0%,var(--navy) 58%),
      var(--navy);color:var(--paper);overflow:hidden}
.held__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;
            padding:clamp(64px,8vw,110px) 0 clamp(56px,7vw,96px)}
@media(max-width:940px){.held__grid{grid-template-columns:1fr;gap:40px}}
.held .h1{color:var(--white)}
.held .lead{color:rgba(247,245,240,.76);margin-top:26px}
.held__aktionen{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.held__foto{position:relative}
.held__foto img{width:100%;height:clamp(400px,46vw,600px);object-fit:cover;
  object-position:center 16%;border:1px solid rgba(224,196,141,.28);border-radius:2px}
.held__marke{position:absolute;left:-1px;bottom:26px;background:var(--gold);color:var(--ink);
             font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
             padding:9px 16px}

/* ---- Beweisleiste ---- */
.beweis{border-top:1px solid rgba(224,196,141,.24);
        border-bottom:1px solid rgba(224,196,141,.24)}
.beweis__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
              background:rgba(224,196,141,.18)}
@media(max-width:760px){.beweis__grid{grid-template-columns:repeat(2,1fr)}}
.beweis__zelle{background:var(--navy);padding:30px 24px}
.beweis__zahl{font-family:var(--serif);font-size:clamp(34px,4vw,44px);color:var(--gold-2);
              line-height:1;font-variant-numeric:tabular-nums}
.beweis__text{font-size:13.5px;font-weight:400;color:rgba(247,245,240,.62);margin-top:9px;
              line-height:1.45}

/* ---- Was ich baue: drei Stufen ---- */
.stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
        margin-top:52px;border:1px solid var(--line)}
@media(max-width:860px){.stufen{grid-template-columns:1fr}}
.stufe{background:var(--paper);padding:38px 32px 42px;display:flex;flex-direction:column}
.stufe__nr{font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:.1em;
           margin-bottom:16px}
.stufe p{font-weight:300;color:var(--muted);margin-top:14px;font-size:16px}
.stufe__preis{margin-top:auto;padding-top:22px;font-size:13px;font-weight:600;
              letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}

/* ---- Freebie-Regal ---- */
.regal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
@media(max-width:980px){.regal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.regal{grid-template-columns:1fr}}
.kachel{background:var(--navy);border:1px solid rgba(224,196,141,.26);border-radius:2px;
        padding:26px 24px 24px;display:flex;flex-direction:column;text-decoration:none;
        color:var(--paper);min-height:230px;transition:border-color .15s,transform .15s}
.kachel:hover{border-color:var(--gold);transform:translateY(-2px)}
.kachel--bald{background:none;border-style:dashed;border-color:rgba(24,33,50,.3);
  color:var(--text);pointer-events:none}
.kachel--bald .kachel__preis,.kachel--bald p,.kachel--bald .kachel__fuss{color:var(--muted)}
.kachel__preis{font-family:var(--serif);font-size:26px;color:var(--gold-2);line-height:1}
.kachel h3{font-size:19px;font-weight:600;margin:16px 0 8px;line-height:1.25}
.kachel p{font-size:14px;font-weight:300;color:rgba(247,245,240,.68);line-height:1.5}
.kachel__fuss{margin-top:auto;padding-top:20px;font-size:12px;font-weight:600;
              letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* ---- Der Werkstatt-Monat ---- */
.wochen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
        background:rgba(224,196,141,.22);margin-top:48px}
@media(max-width:860px){.wochen{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.wochen{grid-template-columns:1fr}}
.woche{background:var(--navy);padding:30px 26px 34px}
.woche__nr{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
           color:var(--gold);margin-bottom:14px}
.woche h3{font-size:20px;font-weight:600;margin-bottom:10px}
.woche p{font-size:14.5px;font-weight:300;color:rgba(247,245,240,.68);line-height:1.55}

/* ---- Referenzen ---- */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:980px){.refs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.refs{grid-template-columns:1fr}}
.ref{background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden;
     text-decoration:none;color:var(--text);display:flex;flex-direction:column;
     transition:border-color .15s,transform .15s}
.ref:hover{border-color:var(--gold);transform:translateY(-2px)}
.ref img{aspect-ratio:4/3;object-fit:cover;object-position:top center;width:100%}
.ref__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.ref__feld{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
           color:var(--gold);margin-bottom:8px}
.ref h3{font-size:20px;font-weight:600;margin-bottom:8px}
.ref p{font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.55}
.ref__mehr{margin-top:auto;padding-top:18px;font-size:13px;font-weight:600;color:var(--navy)}

/* ---- Person ---- */
.person{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
@media(max-width:880px){.person{grid-template-columns:1fr;gap:34px}}
.person img{width:100%;height:clamp(360px,38vw,520px);object-fit:cover;
  object-position:center 40%;border:1px solid var(--line);border-radius:2px}
.person__text p{margin-top:18px;font-weight:300;color:var(--muted);font-size:17px}
.person__text p:first-of-type{color:var(--text)}

/* ---- FAQ ---- */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font-size:19px;font-weight:600;
             display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:26px;color:var(--gold);
                    line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 24px;font-weight:300;color:var(--muted);max-width:70ch}

/* ---- Termin ---- */
.termin__box{margin-top:40px;background:var(--white);border:1px solid rgba(224,196,141,.3);
             border-radius:2px;overflow:hidden}
.termin__box iframe{width:100%;height:760px;border:0;display:block}
.termin__zeilen{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;font-size:14.5px;
                color:rgba(247,245,240,.66)}
.termin__zeilen b{color:var(--gold-2);font-weight:600}

/* ---- Fuß ---- */
.fuss{background:var(--ink);color:rgba(247,245,240,.55);padding:44px 0;font-size:14px}
.fuss__inner{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}
.fuss a{color:rgba(247,245,240,.75);text-decoration:none}
.fuss a:hover{color:var(--gold-2)}