/* Kunstbriefkasten — Stilbogen. Farben und Schriften wie im gedruckten CD. */
:root{
  --gruen:#35592D; --rot:#8B332E; --weiss:#E9E7DF; --putz:#A7A898;
  --messing:#7A6733; --tinte:#1F1A16; --rose:#E2938A;
  /* Lesbare Varianten für kleine Schrift — auf WCAG AA geprüft */
  --messing-text:#6C5C2D;   /* 4,6:1 auf der Putzfläche, 5,3:1 auf Altweiß */
  --rose-hell:#ECB8B2;      /* 4,6:1 auf Türgrün */
  --rand:clamp(20px,5vw,64px); --spalte:1240px;
}
@font-face{font-family:'Termes';src:url('schrift/termes-regular.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Termes';src:url('schrift/termes-italic.woff2')format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Termes';src:url('schrift/termes-bold.woff2')format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Grotesk';src:url('schrift/liberationsans.woff2')format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Grotesk';src:url('schrift/liberationsans-bold.woff2')format('woff2');
  font-weight:700;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--weiss);color:var(--tinte);
  font-family:'Termes',Times,'Times New Roman',serif;
  font-size:clamp(17px,1.05vw + 12px,20px);line-height:1.62;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:var(--spalte);margin:0 auto;padding:0 var(--rand)}
.eng{max-width:64ch}

/* Auszeichnungen */
.label{font-family:'Grotesk',Arial,sans-serif;font-size:.70rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rot)}
h1,h2,h3{font-weight:400;line-height:1.14;letter-spacing:-.005em}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem);font-style:italic;color:var(--gruen)}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem);font-style:italic;color:var(--gruen)}
h3{font-size:clamp(1.2rem,1.7vw,1.5rem);font-style:italic;color:var(--gruen)}
p+p{margin-top:1.05em}
.gross{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.55}
.klein{font-size:.86rem;line-height:1.55;color:var(--messing-text)}

/* Kopfzeile */
header{position:sticky;top:0;z-index:50;background:rgba(233,231,223,.94);
  backdrop-filter:saturate(1.4)blur(8px);border-bottom:1px solid rgba(122,103,51,.32);
  transition:box-shadow .35s ease,background .35s ease}
header.gescrollt{background:rgba(233,231,223,.98);box-shadow:0 2px 22px rgba(31,26,22,.09)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:14px;padding-bottom:14px}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.marke img{height:44px;width:auto}
nav ul{display:flex;gap:30px;list-style:none;align-items:center}
nav a{position:relative;font-family:'Grotesk',Arial,sans-serif;font-size:.80rem;
  letter-spacing:.10em;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .25s ease}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--rot);transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.22,.61,.36,1)}
nav a:hover,nav a[aria-current]{color:var(--gruen)}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1)}
.burger{display:none;background:none;border:1px solid rgba(122,103,51,.45);
  border-radius:2px;padding:9px 12px;font-family:'Grotesk',Arial,sans-serif;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);
  cursor:pointer}

/* Knöpfe */
.btn{display:inline-block;font-family:'Grotesk',Arial,sans-serif;font-size:.78rem;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;background:var(--gruen);color:var(--weiss);border:1px solid var(--gruen);
  transition:background .15s ease,color .15s ease}
.btn:hover{background:transparent;color:var(--gruen)}
.btn.hell{background:transparent;color:var(--gruen)}
.btn.hell:hover{background:var(--gruen);color:var(--weiss)}
.btn.aufdunkel{background:var(--weiss);color:var(--gruen);border-color:var(--weiss)}
.btn.aufdunkel:hover{background:transparent;color:var(--weiss)}

/* Bänder */
section{padding:clamp(56px,7vw,110px) 0}
.gruen{background:var(--gruen);color:var(--weiss)}
.gruen h2,.gruen h3{color:var(--weiss)}
.gruen .label{color:var(--rose-hell)}
.putz{background:rgba(167,168,152,.22)}
.linie{border-top:1px solid rgba(122,103,51,.3)}

/* Raster */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.r6040{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.r4060{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(28px,4vw,64px);align-items:center}

/* Bilder */
figure{margin:0}
figure img{width:100%;object-fit:cover}
figcaption{font-family:'Grotesk',Arial,sans-serif;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--messing-text);margin-top:10px}
.gruen figcaption{color:rgba(233,231,223,.82)}

/* Hero */
.hero{padding:0;background:var(--weiss)}
.hero .raster{display:grid;grid-template-columns:1fr 1.06fr;min-height:min(84vh,760px)}
.hero .bild{position:relative;overflow:hidden;background:var(--putz)}
.hero .bild img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero .text{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,6vw,96px) clamp(24px,5vw,80px)}
.hero h1{margin:18px 0 22px}
.hero .knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* Schritte */
.schritt{position:relative;border-top:2px solid var(--rot);padding-top:20px}
.schritt .nr{font-style:italic;font-size:2.5rem;color:var(--rose);line-height:1}
.schritt h3{margin:10px 0 8px}

/* Maßkasten */
.mass{border:1px solid rgba(122,103,51,.45);padding:clamp(22px,3vw,34px);
  display:flex;gap:28px;align-items:baseline;flex-wrap:wrap;margin-top:clamp(34px,4vw,54px)}
.mass .zahl{font-size:clamp(2rem,4vw,3rem);font-style:italic;color:var(--gruen);line-height:1}

/* Daten */
.zeile{display:grid;grid-template-columns:minmax(140px,.8fr) 1.4fr;gap:18px;
  padding:13px 0;border-top:1px solid rgba(122,103,51,.28)}
.gruen .zeile{border-top-color:rgba(233,231,223,.3)}
.zeile .k{font-family:'Grotesk',Arial,sans-serif;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--messing-text)}
.gruen .zeile .k{color:var(--rose-hell)}

/* Brief */
.brief p{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.68}
.sig{font-style:italic;font-size:clamp(1.5rem,2.4vw,2rem);margin-top:30px}

/* Fuß */
footer{background:var(--tinte);color:var(--weiss);padding:clamp(52px,6vw,84px) 0 34px}
footer a{text-decoration:none;border-bottom:1px solid rgba(233,231,223,.35)}
footer a:hover{border-bottom-color:var(--rose)}
.fussraster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.fusstitel{font-family:'Grotesk',Arial,sans-serif;font-size:.70rem;letter-spacing:.20em;
  text-transform:uppercase;color:var(--rose);margin-bottom:16px}
.fussende{margin-top:clamp(38px,5vw,60px);padding-top:20px;
  border-top:1px solid rgba(233,231,223,.22);display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:.8rem;color:rgba(233,231,223,.68)}

/* Rechtstexte */
.recht h2{margin-bottom:8px}
.recht h3{margin:34px 0 10px;font-style:normal;font-family:'Grotesk',Arial,sans-serif;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen)}
.recht p,.recht li{font-size:.98rem;line-height:1.6}
.recht ul{margin:10px 0 0 20px}
.recht li{margin-bottom:6px}

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

@media (max-width:640px){ .marke img{height:36px} }
@media (max-width:900px){
  .hero .raster{grid-template-columns:1fr}
  .hero .bild{min-height:52vh;order:-1}
  .zwei,.drei,.r6040,.r4060,.fussraster{grid-template-columns:1fr}
  nav ul{display:none}
  nav ul.offen{display:flex;flex-direction:column;gap:16px;position:absolute;
    left:0;right:0;top:100%;background:var(--weiss);padding:22px var(--rand) 28px;
    border-bottom:1px solid rgba(122,103,51,.32)}
  .burger{display:block}
  .kopf{position:relative}
  .zeile{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==================================================================
   Bewegung
   Alles hier hängt an der Klasse .bewegt, die ein winziges Skript im
   Kopf nur dann setzt, wenn JavaScript läuft und niemand im System
   „weniger Bewegung" eingestellt hat. Ohne sie steht die Seite
   vollständig sichtbar da — nichts bleibt unsichtbar liegen.
   ================================================================== */

/* Der ruhige Grundvorgang: 16 px von unten, eine gute halbe Sekunde. */
.bewegt .auf{opacity:0;transform:translateY(16px)}
.bewegt .auf.da{opacity:1;transform:none;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--verzug,0s),
             transform .72s cubic-bezier(.22,.61,.36,1) var(--verzug,0s)}

/* Bilder werden scharf wie ein Abzug in der Schale. */
.bewegt figure.zeigt{overflow:hidden}
.bewegt figure.zeigt img{transform:scale(1.055);
  transition:transform 1.25s cubic-bezier(.22,.61,.36,1) var(--verzug,0s)}
.bewegt figure.zeigt.da img{transform:none}

/* Bei Zeigergeräten hebt sich das Bild unter dem Mauszeiger leicht an. */
@media (hover:hover){
  .bewegt figure.zeigt.da:hover img{transform:scale(1.028);transition-duration:.9s}
}

/* Die drei Schritte: die rote Linie wird gezogen, Schritt für Schritt. */
.bewegt .schritt{border-top-color:transparent}
.bewegt .schritt::before{content:"";position:absolute;left:0;top:-2px;height:2px;
  width:100%;background:var(--rot);transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.22,.61,.36,1) var(--verzug,0s)}
.bewegt .schritt.da::before{transform:scaleX(1)}

/* Der Maßkasten zeichnet sich beim Erscheinen nach. */
.bewegt .mass{border-color:transparent;
  transition:border-color .9s ease .25s}
.bewegt .mass.da{border-color:rgba(122,103,51,.45)}

/* Der Auftakt: einmalig beim Laden der Startseite. */
.bewegt .hero .text > *{opacity:0;transform:translateY(20px)}
.bewegt.geladen .hero .text > *{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1)}
.bewegt.geladen .hero .text > *:nth-child(1){transition-delay:.10s}
.bewegt.geladen .hero .text > *:nth-child(2){transition-delay:.20s}
.bewegt.geladen .hero .text > *:nth-child(3){transition-delay:.30s}
.bewegt.geladen .hero .text > *:nth-child(4){transition-delay:.40s}
.bewegt .hero .bild img{transform:scale(1.07)}
.bewegt.geladen .hero .bild img{transform:none;
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}

/* Wer weniger Bewegung eingestellt hat, sieht gar keine. */
@media (prefers-reduced-motion:reduce){
  .bewegt .auf,.bewegt .hero .text > *{opacity:1;transform:none}
  .bewegt figure.zeigt img,.bewegt .hero .bild img{transform:none}
  .bewegt .schritt{border-top-color:var(--rot)}
  .bewegt .schritt::before{display:none}
  .bewegt .mass{border-color:rgba(122,103,51,.45)}
  *{animation:none!important;transition:none!important}
}