/* Zeitvorteil · Wartungsseite · Farben, Schriften und Buttons aus stil.css der neuen Website */
@font-face{font-family:"Cormorant Garamond";src:url(cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url(dm-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(dm-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(dm-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --gruen:#163c32; --gruen-2:#1a4539; --tief:#0b211b;
  --creme:#f5f0e6; --flaeche:#e8ddc6;
  --messing:#b69a60; --messing-hell:#cdb47f; --messing-dunkel:#8a7140;
  --text:#f5f0e6; --text-gedaempft:rgba(245,240,230,.66);
  --linie:rgba(182,154,96,.22);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-pille:999px;
  --rand:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:hidden}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--gruen);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
::selection{background:var(--messing);color:var(--gruen)}
:focus-visible{outline:1px solid var(--messing-hell);outline-offset:4px;border-radius:999px}

/* ---------- Startseite ---------- */
.startseite{position:relative;isolation:isolate;background:var(--tief)}

/* Licht: langsam wandernde, weiche Lichtfelder in Grün und Messing */
.licht{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%,#1b4639 0%,var(--gruen) 45%,var(--tief) 100%)}
.licht span{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.licht .a{width:62vmax;height:62vmax;left:50%;top:38%;margin:-31vmax 0 0 -31vmax;
  background:radial-gradient(circle,rgba(182,154,96,.30) 0%,rgba(182,154,96,0) 62%);animation:schweben-a 28s ease-in-out infinite alternate}
.licht .b{width:70vmax;height:70vmax;left:-22vmax;top:-30vmax;
  background:radial-gradient(circle,rgba(47,110,92,.55) 0%,rgba(47,110,92,0) 65%);animation:schweben-b 34s ease-in-out infinite alternate}
.licht .c{width:60vmax;height:60vmax;right:-24vmax;bottom:-30vmax;
  background:radial-gradient(circle,rgba(205,180,127,.16) 0%,rgba(205,180,127,0) 62%);animation:schweben-c 40s ease-in-out infinite alternate}
@keyframes schweben-a{0%{transform:translate(-6%,-4%) scale(1)}100%{transform:translate(6%,5%) scale(1.12)}}
@keyframes schweben-b{0%{transform:translate(0,0)}100%{transform:translate(18%,14%)}}
@keyframes schweben-c{0%{transform:translate(0,0)}100%{transform:translate(-16%,-12%)}}
/* Vignette + feines Korn */
.licht::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(11,33,27,0) 55%,rgba(11,33,27,.75) 100%)}
.licht::after{content:"";position:absolute;inset:-50%;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.kopf{position:relative;z-index:2;display:flex;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + clamp(32px,5vh,56px)) var(--rand) 0}
.marke{font:600 36px/1 var(--serif);color:var(--messing);text-decoration:none;letter-spacing:.005em}

.buehne{position:relative;z-index:1;flex:1;display:grid;align-content:center;justify-items:center;text-align:center;padding:clamp(28px,5vh,80px) calc(var(--rand) + 8px)}
.kicker{display:inline-flex;align-items:center;gap:16px;font-size:12.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--messing-hell)}
.kicker::before,.kicker::after{content:"";width:clamp(28px,5vw,56px);height:1px;background:linear-gradient(90deg,rgba(182,154,96,0),var(--messing))}
.kicker::after{transform:scaleX(-1)}
h1{margin:30px 0 0;font:700 clamp(40px,min(7vw,10.5vh),108px)/1.02 var(--sans);letter-spacing:-.03em;text-wrap:balance}
h1 .zeile{display:block}
.gold{color:var(--messing)}
.zusatz{margin:22px 0 0;font:italic 500 clamp(22px,2.4vw,32px)/1.3 var(--serif);color:var(--messing-hell);letter-spacing:.005em}
.einleitung{margin:24px 0 0;max-width:46ch;font-size:clamp(17px,1.35vw,19px);line-height:1.7;color:var(--text-gedaempft);text-wrap:pretty}

.kontakt{margin-top:clamp(28px,5vh,52px);display:grid;justify-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:14px 32px;border-radius:var(--r-pille);font:600 16px/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;border:1px solid var(--messing);cursor:pointer;transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primaer{background:var(--messing);color:var(--gruen);box-shadow:0 10px 40px -12px rgba(182,154,96,.55)}
.btn-primaer:hover{background:var(--messing-hell);border-color:var(--messing-hell);transform:translateY(-2px);box-shadow:0 16px 48px -12px rgba(205,180,127,.6)}
.btn-primaer .pfeil{transition:transform .4s var(--ease)}
.btn-primaer:hover .pfeil{transform:translateX(4px)}

.social{margin-top:clamp(24px,4vh,44px);display:flex;align-items:center;gap:18px}
.social span{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--text-gedaempft)}
.social a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(182,154,96,.35);color:var(--creme);transition:border-color .4s var(--ease),color .4s var(--ease),background-color .4s var(--ease)}
.social a:hover{border-color:var(--messing);color:var(--gruen);background:var(--messing)}
.social svg{width:17px;height:17px}

.unten{position:relative;z-index:2;display:flex;justify-content:center;gap:22px;padding:0 var(--rand) calc(env(safe-area-inset-bottom,0px) + clamp(28px,4vh,44px));font-size:12px;letter-spacing:.06em;color:rgba(245,240,230,.42)}
.unten a{text-decoration:none;transition:color .3s}
.unten a:hover{color:var(--messing-hell)}

/* gestaffeltes Einblenden */
.auf{opacity:0;transform:translateY(14px);animation:auf 1.2s var(--ease) forwards}
.auf.v1{animation-delay:.15s}.auf.v2{animation-delay:.3s}.auf.v3{animation-delay:.45s}.auf.v4{animation-delay:.6s}.auf.v5{animation-delay:.75s}.auf.v6{animation-delay:.9s}
@keyframes auf{to{opacity:1;transform:none}}

@media (max-width:640px){
  .marke{font-size:32px}
  .kicker{font-size:11px;letter-spacing:.24em;gap:12px}
  .kicker::before,.kicker::after{width:22px}
  .btn{width:100%}
  .kontakt{width:100%}
  .licht span{filter:blur(60px)}
}
@media (min-width:641px) and (max-height:820px){
  h1{margin-top:20px}
  .zusatz{margin-top:14px}
  .einleitung{margin-top:16px}
}

/* ---------- Rechtstexte ---------- */
.kopf-recht{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 28px) var(--rand) 20px}
.kopf-recht .zurueck{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--messing-hell)}
.seitenkopf{position:relative;isolation:isolate;overflow:hidden;padding:clamp(140px,18vh,190px) var(--rand) clamp(56px,8vh,88px);text-align:center;border-bottom:1px solid var(--linie);background:radial-gradient(120% 90% at 50% 0%,#1d4a3e 0%,var(--gruen) 60%)}
.seitenkopf .kicker{margin-bottom:22px}
.seitenkopf h1{margin:0;font-size:clamp(42px,5.6vw,84px)}
.rechtstext-flaeche{background:var(--flaeche);color:var(--gruen)}
.rechtstext{max-width:760px;margin:0 auto;padding:clamp(56px,9vh,96px) var(--rand)}
.rechtstext h2{margin:0 0 12px;font:700 clamp(24px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-.01em}
.rechtstext h3{margin:34px 0 8px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--messing-dunkel)}
.rechtstext p{margin:0 0 12px;color:rgba(22,60,50,.86)}
.rechtstext a{color:var(--gruen);text-decoration-color:var(--messing);text-underline-offset:3px}
.fuss{background:var(--gruen);border-top:4px solid var(--messing)}
.fuss .leiste{max-width:1400px;margin:0 auto;padding:22px var(--rand) calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:14px;color:var(--text-gedaempft)}
.fuss .leiste nav{display:flex;gap:20px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--messing-hell)}

@media (prefers-reduced-motion:reduce){
  .auf{animation:none;opacity:1;transform:none}
  .licht span{animation:none}
  .btn,.social a{transition:none}
}