/* =========================================================
   Werner Gartengestaltung, Startseite (Pitch-Teaser)
   Tokens 1:1 aus dem Figma-Layout „Werner Tokens“
   ========================================================= */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/archivo-var.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/bricolage-grotesque-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400.woff2") format("woff2")}

:root{
  /* Farben */
  --ink:#3b3a3a;
  --ink-muted:#6b6a64;
  --canvas:#fafaf7;
  --surface:#ffffff;
  --hairline:#e6e5e0;
  --paper-warm:#f4f6f0;
  --green:#00a500;          /* Logo-Grün, pur */
  --green-dark:#157f15;     /* Flächen, Buttons, Links */
  --green-deep:#154a15;     /* dunkle Sektion */
  --green-light:#a9e8a9;    /* Text und Linien auf Dunkel */
  --green-tint:#e7f6e7;     /* getönte Karte */
  --green-cta-hover:#0f6a0f;
  --amber:#fbbc04;

  /* Schrift */
  --font-display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Type-Scale, Min mobil bis Max Figma */
  /* Die variable Bricolage-Instanz läuft breiter als der statische Figma-Schnitt.
     68 px halten den zweizeiligen Umbruch der Hero-Headline in der 500-px-Spalte. */
  --fs-display:clamp(2.5rem,5.2vw,4.25rem);   /* 40 … 68 */
  --fs-h2:clamp(1.875rem,4.2vw,2.875rem);     /* 30 … 46 */
  --fs-h3:clamp(1.3125rem,2vw,1.5625rem);     /* 21 … 25 */
  --fs-h3-pitch:clamp(1.375rem,2.6vw,1.875rem);/* 22 … 30 */
  --fs-lead:clamp(1.0625rem,1.35vw,1.1875rem);/* 17 … 19 */
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-mono:0.75rem;
  --fs-ui:0.9375rem;

  /* Raster und Abstände */
  --shell:1280px;
  --gutter:clamp(1.25rem,5vw,5rem);
  --gap-card:1.5rem;
  --r-card:16px;
  --r-media:20px;
  --r-pill:999px;

  --sp-section:clamp(4rem,8vw,8.5rem);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.56;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--green-dark);
  outline-offset:3px;
  border-radius:4px;
}
.refs :where(a,button,[tabindex]):focus-visible{outline-color:var(--green-light)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:1rem;top:-3.5rem;z-index:60;
  background:var(--green-dark);color:#fff;
  padding:.7rem 1.1rem;border-radius:var(--r-pill);
  font-size:var(--fs-small);font-weight:500;text-decoration:none;
  transition:top .18s ease;
}
.skip-link:focus{top:1rem}

.shell{
  width:100%;max-width:calc(var(--shell) + 2 * var(--gutter));
  margin-inline:auto;padding-inline:var(--gutter);
}

/* ---------- Typo-Bausteine ---------- */
.display{
  font-size:var(--fs-display);line-height:1.04;letter-spacing:-.02em;
}
.section-title{
  font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.01em;
  text-wrap:balance;
}
.section-title--light{color:var(--paper-warm)}
.lead{font-size:var(--fs-lead);color:var(--ink-muted);max-width:34em}
/* Aufgehellte Variante ohne opacity, damit sie den opacity-Reveal nicht überschreibt */
.lead--light{color:rgba(244,246,240,.92);max-width:30em}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green-light);
}

/* ---------- Buttons und Links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:44px;padding:.75rem 1.6rem;
  border-radius:var(--r-pill);
  font-size:var(--fs-ui);font-weight:500;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.btn--solid{background:var(--green-dark);color:var(--surface);border:1px solid var(--green-dark)}
.btn--solid:hover{background:var(--green-cta-hover);border-color:var(--green-cta-hover)}
.btn--outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--canvas)}
.btn__icon{flex:none}
.btn:active{transform:translateY(1px)}

.link-underline{
  font-size:var(--fs-ui);font-weight:500;letter-spacing:.01em;
  color:var(--green-dark);text-decoration:underline;text-underline-offset:.24em;
  text-decoration-thickness:1px;
}
.link-underline:hover{text-decoration-thickness:2px}

/* Vertiefungs-Label: die Unterseiten sind im Teaser nicht gebaut, deshalb
   kein Link und kein Interaktionsversprechen. */
.link-more{
  display:inline-block;cursor:default;
  font-size:var(--fs-small);font-weight:500;color:var(--green-dark);
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;
}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:relative;z-index:40;
  background:var(--canvas);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.75rem 1.5rem;
  min-height:80px;padding-block:1rem;
}
.site-header__logo{display:inline-flex;flex:0 1 auto;min-width:0}
.site-header__logo img{width:clamp(148px,22vw,248px);height:auto}

.nav-toggle{
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:44px;padding:.5rem .9rem;
  background:transparent;border:1px solid var(--hairline);border-radius:var(--r-pill);
  color:var(--ink);font-family:inherit;font-size:var(--fs-ui);font-weight:500;
  cursor:pointer;
}
.nav-toggle__icon{display:grid;gap:4px;width:16px}
.nav-toggle__icon span{display:block;height:1.5px;background:currentColor;border-radius:2px}

/* Ohne JS gibt es keinen Toggle, dafür steht die Navigation offen da. */
.site-nav{display:none}
.no-js .nav-toggle{display:none}
.no-js .site-nav{display:block;flex-basis:100%}
.no-js .site-nav__list{flex-direction:row;flex-wrap:wrap;gap:.25rem 1.5rem}
.no-js .site-nav .btn{margin-top:.5rem}
.site-nav__list{display:flex;flex-direction:column;gap:.25rem}
.site-nav__list a,.site-nav__soon{
  display:block;padding:.7rem 0;
  font-size:var(--fs-ui);font-weight:500;color:var(--ink);text-decoration:none;
}
.site-nav__list a:hover{color:var(--green-dark)}
.site-nav__soon{color:var(--ink-muted);cursor:default}

/* Mobiles Menü offen */
.site-nav.is-open{
  display:block;
  position:absolute;left:0;right:0;top:100%;
  background:var(--canvas);
  border-block:1px solid var(--hairline);
  padding:1rem var(--gutter) 1.5rem;
}
.site-nav.is-open .btn{margin-top:.75rem;width:100%}

/* =========================================================
   Hero
   ========================================================= */
.hero{padding-top:.5rem;padding-bottom:clamp(3rem,7vw,6.5rem)}
.hero__inner{
  display:grid;gap:clamp(2rem,4vw,4.5rem);
}
/* Unter 64rem behält die Textspalte ihren Rand, nur das Bild bricht nach rechts aus. */
.hero__media{margin-right:calc(-1 * var(--gutter))}
.hero__copy{display:grid;gap:clamp(1.25rem,2vw,1.75rem);align-content:start}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2vw,1.75rem)}

.hero__media{
  position:relative;margin:0;
  border-radius:20px 0 0 96px;
  overflow:hidden;
  aspect-ratio:788/620;
  background:var(--green-tint);
}
.hero__media img{width:100%;height:100%;object-fit:cover}

.rating{
  position:absolute;left:clamp(1rem,3vw,4.5rem);bottom:clamp(1rem,3vw,3.75rem);
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1.375rem .75rem 1.25rem;
  background:var(--surface);border-radius:var(--r-pill);
  box-shadow:0 6px 20px rgba(15,33,13,.18);
}
.rating__score{
  font-family:var(--font-display);font-weight:600;font-size:1.625rem;
  line-height:1;letter-spacing:-.02em;
}
.rating__meta{display:grid;gap:.3rem}
.rating__stars{display:flex;gap:3px}
.rating__stars svg{fill:var(--amber)}
.rating__label{font-size:var(--fs-mono);color:var(--ink-muted);line-height:1}

/* =========================================================
   Leistungen
   ========================================================= */
.services{padding-bottom:var(--sp-section)}
.services .section-title{max-width:22em}
.bento{
  display:grid;gap:var(--gap-card);
  margin-top:clamp(2rem,4vw,3.5rem);
}
.bento__col{display:flex;flex-direction:column;gap:var(--gap-card)}

.card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-card);overflow:hidden;
}
.card--tint{background:var(--green-tint);border-color:transparent}
.card__media{margin:0;overflow:hidden;background:var(--green-tint)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:1.75rem clamp(1.25rem,2.4vw,2rem) 2rem}
.card__body h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.005em}
.card__body p{margin-top:.65rem;color:var(--ink-muted)}
.card__body .link-more{margin-top:1.15rem}

.card--planung .card__media{aspect-ratio:736/493}
.card--ausfuehrung .card__media{aspect-ratio:520/240}
.card--pflege .card__media{aspect-ratio:520/203}

/* =========================================================
   Referenzen (dunkle Sektion mit geschwungener Oberkante)
   ========================================================= */
.refs{
  position:relative;
  background:var(--green-deep);
  padding-top:clamp(4.5rem,11vw,10.5rem);
  padding-bottom:clamp(3.5rem,7vw,7rem);
  overflow:hidden;
}
.refs__curve{
  position:absolute;top:-1px;left:0;
  width:100%;height:clamp(2.5rem,6.7vw,6rem);
  display:block;
}
.refs__curve path{fill:var(--canvas)}

.refs__header{
  display:grid;gap:2rem;
  align-items:end;
}
.refs__copy{display:grid;gap:1.25rem;max-width:700px}
.refs__copy .eyebrow{margin-bottom:-.35rem}

.slider__nav{display:flex;gap:.75rem}
.slider__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:none;
  background:transparent;color:var(--green-light);
  border:1px solid var(--green-light);border-radius:var(--r-pill);
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,opacity .2s ease;
}
.slider__btn:hover:not([aria-disabled="true"]){background:var(--green-light);color:var(--green-deep)}
.slider__btn[aria-disabled="true"]{opacity:.4;cursor:default}

.refs__viewport{
  margin-top:clamp(2rem,4vw,3.5rem);
  padding-inline:var(--gutter);
  /* Snap-Rand an das Layout-Padding koppeln, sonst liegt die Ruheposition
     der ersten Kachel um einen Gutter neben dem Raster. */
  scroll-padding-inline-start:var(--gutter);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.refs__viewport::-webkit-scrollbar{display:none}
/* Fokusring liegt innen, damit ihn der Scroll-Container nicht abschneidet */
.refs__viewport:focus-visible{outline-offset:-3px}

.slider{
  display:flex;gap:var(--gap-card);
  width:max-content;
  padding-right:var(--gutter);
}
.ref-card{
  flex:none;width:min(78vw,400px);
  scroll-snap-align:start;
  display:grid;gap:1.125rem;
  align-content:start;
}
.ref-card__media{
  margin:0;border-radius:var(--r-card);overflow:hidden;
  aspect-ratio:4/3;background:var(--green-tint);
}
.ref-card__media img{width:100%;height:100%;object-fit:cover}
.ref-card__title{
  font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.005em;
  color:var(--paper-warm);
}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{
  padding:.4rem .8125rem;
  border:1px solid rgba(169,232,169,.38);border-radius:var(--r-pill);
  font-size:var(--fs-mono);font-weight:500;color:var(--green-light);
  line-height:1.35;
}

/* =========================================================
   Vorschau-Fade
   ========================================================= */
.handoff{position:relative;padding-top:clamp(3rem,6vw,4.5rem);isolation:isolate}
.handoff__preview{display:grid;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.handoff__copy{display:grid;gap:1.25rem;max-width:520px}
.handoff__copy p{color:var(--ink-muted)}
.handoff__media{margin:0;border-radius:var(--r-media);overflow:hidden;aspect-ratio:688/300}
.handoff__media img{width:100%;height:100%;object-fit:cover}
/* Der Schleier setzt erst unter dem Textblock an: Überschrift und Absatz
   bleiben lesbar (Kontrast), das Bild und der Rest der Sektion fallen weg. */
.handoff__veil{
  position:absolute;left:0;right:0;bottom:0;top:56%;
  background:linear-gradient(to bottom,
    rgba(250,250,247,0) 0%,
    rgba(250,250,247,.68) 38%,
    rgba(250,250,247,.95) 70%,
    var(--canvas) 100%);
  pointer-events:none;
}

/* =========================================================
   Abschluss: Silberschmidt Media
   ========================================================= */
.pitch{padding-block:clamp(3rem,6vw,5rem) clamp(3rem,6vw,4.5rem);background:var(--canvas)}
.pitch__inner{
  display:grid;gap:clamp(1.75rem,4vw,4rem);
  justify-content:center;
}
.pitch__photo{margin:0;display:grid;gap:.75rem;justify-items:center;width:min(240px,60vw)}
.pitch__photo img{width:100%;height:auto;border-radius:24px}
.pitch__photo figcaption{font-size:var(--fs-small);color:var(--ink)}
.pitch__body{display:grid;gap:1rem;max-width:640px}
.pitch__eyebrow{font-size:var(--fs-small);color:var(--ink-muted)}
.pitch__eyebrow-link{color:var(--ink-muted);text-decoration:underline;text-underline-offset:.2em}
.pitch__eyebrow-link:hover{color:var(--green-dark)}
.pitch__title{font-size:var(--fs-h3-pitch);line-height:1.2;letter-spacing:-.01em}
.pitch__lead{color:var(--ink-muted)}
.pitch__body .btn{justify-self:start;margin-top:.5rem}
.pitch__fine{font-size:var(--fs-small);color:var(--ink-muted);margin-top:.5rem}

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width:48rem){
  /* In der Zwischenzone ist das Hero-Bild noch einspaltig und volle Breite,
     das Hochformat des Layouts würde dort zu hoch werden. */
  .hero__media{aspect-ratio:16/9}

  .refs__header{grid-template-columns:1fr auto;align-items:end}
  .handoff__preview{grid-template-columns:minmax(0,520px) minmax(0,688px);gap:clamp(2rem,5vw,5.75rem)}
  .pitch__inner{grid-template-columns:auto minmax(0,736px);align-items:start;justify-content:center}
  .pitch__photo{width:240px}
}

@media (min-width:64rem){
  .site-header__inner{min-height:104px}
  .nav-toggle{display:none}
  .site-nav{
    display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.25rem);
    position:static;padding:0;border:0;background:transparent;
  }
  /* Sicherheitsnetz: bleibt das mobile Menü beim Wechsel auf Desktop offen,
     gilt trotzdem das einzeilige Layout. */
  .site-nav.is-open{
    display:flex;position:static;padding:0;border:0;background:transparent;
  }
  .site-nav__list{flex-direction:row;align-items:center;gap:clamp(1.5rem,3vw,2.25rem)}
  .site-nav__list a,.site-nav__soon{padding:0}
  .site-nav .btn{margin:0;width:auto}

  .hero{padding-top:2.5rem}
  .hero__inner{
    grid-template-columns:minmax(0,500px) 1fr;
    align-items:start;
    gap:4.5rem;
    max-width:none;
    padding-right:0;
    padding-left:max(var(--gutter),calc((100% - var(--shell)) / 2));
  }
  .hero__copy{padding-top:1.5rem}
  .hero__media{
    aspect-ratio:788/620;
    margin-right:0;
    border-radius:24px 0 0 160px;
  }

  .bento{grid-template-columns:736fr 520fr;align-items:stretch}
  .card--planung{flex:1 1 auto}
  .card--planung .card__media{aspect-ratio:auto;flex:1 1 auto;min-height:clamp(300px,32vw,493px)}
  .card--beratung{flex:none}
  .card--ausfuehrung{flex:none}
  .card--pflege{flex:1 1 auto}
  .card--pflege .card__media{aspect-ratio:auto;flex:1 1 auto;min-height:150px}

  .refs__viewport{
    padding-inline:max(var(--gutter),calc((100% - var(--shell)) / 2));
    scroll-padding-inline-start:max(var(--gutter),calc((100% - var(--shell)) / 2));
  }
  .ref-card{width:400px}
}

@media (min-width:90rem){
  /* Auf sehr breiten Schirmen wächst die Bildspalte weiter, die Höhe wird
     begrenzt, damit der Hero in den ersten Bildschirm passt. */
  .hero__media{max-height:76vh}
}

/* =========================================================
   Motion: Startzustände kommen aus JS, nicht aus dem CSS.
   Die Wortmasken der Hero-Headline werden ebenfalls erst per JS
   erzeugt, ohne JS bleibt die Überschrift ein reiner Textknoten.
   ========================================================= */
.word{
  display:inline-block;overflow:hidden;
  padding-bottom:.09em;margin-bottom:-.09em;
  vertical-align:bottom;
}
.word__i{display:inline-block}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .refs__viewport{scroll-snap-type:none}
}

/* Gedruckt oder als PDF exportiert muss alles im Endzustand stehen. */
@media print{
  *,*::before,*::after{
    opacity:1 !important;
    transform:none !important;
    box-shadow:none !important;
  }
  .handoff__veil{display:none}
  .refs__viewport{overflow:visible}
  .slider{flex-wrap:wrap;width:auto}
}