/* GrimmR.de — Version 5 · Das Finale: Wald-Bühne, echtes Glas, vier Lichter
   V1-Tiefe + DNA der vier Unterseiten + moderne Dunkel-Inszenierung */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/caveat-var.woff2') format('woff2');}

:root{
  --wald:#0c1d14;
  --wald-2:#122921;
  --wald-3:#1a3628;
  --hell:#f3eedd;
  --hell-2:#b7c4b4;
  --hell-3:#8fa090;
  --kupfer:#c97248;
  --kupfer-hell:#e0a273;
  --kupfer-glanz:#f0c9a1;
  --linie:rgba(224,162,115,.18);
  --linie-2:rgba(243,238,221,.12);
  /* Die vier Lichter */
  --tr:#a6f000;
  --gb:#9BD64A;   --gb-tief:#6DAE2A;
  --sf:#B19A79;
  --og:#9d86ff;   --og-cyan:#22D3EE;

  --maxw:1180px;
  --radius:22px; --radius-sm:14px; --radius-lg:34px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --hand:'Caveat',cursive;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);background:var(--wald);color:var(--hell);
  font-size:17px;line-height:1.65;letter-spacing:-.01em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
.wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.03em;color:var(--hell);}
h1 em,h2 em{font-style:normal;}
a{color:var(--kupfer-hell);}
img{max-width:100%;display:block;}
::selection{background:var(--kupfer);color:#fff;}
.skip{position:absolute;left:-9999px;top:0;background:var(--kupfer);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:99;font-weight:600;}
.skip:focus{left:0;}
:focus-visible{outline:3px solid var(--kupfer-hell);outline-offset:3px;border-radius:6px;}

/* ---------- Die Bühne: atmende Lichter, Korn, feines Raster ---------- */
.buehne{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--wald);}
.buehne::before,.buehne::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);}
.buehne::before{
  width:64vw;height:64vw;left:-18vw;top:-22vw;
  background:radial-gradient(circle,rgba(38,84,60,.55),transparent 68%);
  animation:atmen 19s ease-in-out infinite alternate;
}
.buehne::after{
  width:52vw;height:52vw;right:-16vw;bottom:-18vw;
  background:radial-gradient(circle,rgba(201,114,72,.2),transparent 68%);
  animation:atmen 24s 3s ease-in-out infinite alternate-reverse;
}
/* Der Fluss: organische Strömungslinien + treibendes Grün, ganz langsam abwärts */
.fluss{position:absolute;inset:0;overflow:hidden;}
.fluss svg{position:absolute;inset:-4% 0;width:100%;height:108%;}
.fluss path{
  fill:none;stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:var(--muster,60 140 30 180);
  animation:
    fliessen var(--fd,48s) linear infinite,
    aufblenden var(--ad,16s) ease-in-out var(--av,0s) infinite alternate;
}
@keyframes fliessen{to{stroke-dashoffset:var(--weg,-410px);}}
@keyframes aufblenden{from{opacity:.18;}to{opacity:1;}}
.fluss .lg1{animation:schlaengeln 30s ease-in-out infinite alternate;}
.fluss .lg2{animation:schlaengeln 38s 4s ease-in-out infinite alternate-reverse;}
.fluss .lg3{animation:schlaengeln 26s 2s ease-in-out infinite alternate;}
@keyframes schlaengeln{from{transform:translateX(-14px);}to{transform:translateX(14px);}}
.treib{
  position:absolute;left:var(--x);top:0;
  width:var(--g);height:calc(var(--g)*1.3);
  border-radius:48% 52% 44% 56% / 58% 46% 54% 42%;
  background:radial-gradient(62% 62% at 42% 36%,var(--f),transparent 76%);
  filter:blur(var(--b));
  animation:treiben var(--d) linear infinite;
  animation-delay:var(--v);
  will-change:transform;
}
@keyframes treiben{
  0%{transform:translate3d(0,-24vh,0) rotate(0deg);}
  50%{transform:translate3d(var(--sway,26px),44vh,0) rotate(11deg);}
  100%{transform:translate3d(0,116vh,0) rotate(22deg);}
}
.buehne .korn{
  position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.6'/%3E%3C/svg%3E");
}
@keyframes atmen{
  from{transform:translate(0,0) scale(1);opacity:.8;}
  to{transform:translate(3%,4%) scale(1.07);opacity:1;}
}
.spot{
  position:fixed;left:0;top:0;width:640px;height:640px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(224,162,115,.08),transparent 62%);
  pointer-events:none;opacity:0;transition:opacity 600ms var(--ease);
  will-change:transform;
}

/* Fortschrittslinie: die Familienfarben */
.fortschritt{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:80;
  background:linear-gradient(90deg,var(--kupfer),var(--tr),var(--gb-tief),var(--sf),var(--og-cyan),var(--og));
  transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none;
}

/* ---------- Echtes Glas: Lichtkante, Streulicht, Glasdicke, Spiegelglanz ---------- */
.glas{
  position:relative;border-radius:var(--radius);
  background:
    radial-gradient(130% 70% at 16% -14%,rgba(255,255,255,.13),transparent 55%),
    linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 30%),
    linear-gradient(150deg,rgba(243,238,221,.10),rgba(243,238,221,.02) 48%,rgba(243,238,221,.06));
  -webkit-backdrop-filter:blur(18px) saturate(1.6) brightness(1.07);
  backdrop-filter:blur(18px) saturate(1.6) brightness(1.07);
  border:1px solid rgba(240,201,161,.22);
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 1px 0 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(255,255,255,.07),
    inset 0 24px 44px -26px rgba(255,255,255,.16),
    inset 0 -34px 54px -30px rgba(10,20,14,.45);
}
.glas>*{position:relative;z-index:1;}

/* Eyebrow-Grammatik der Familie */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kupfer-hell);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none;}

/* ---------- Kopfleiste ---------- */
.top{position:sticky;top:0;z-index:50;padding:12px 0;}
.top-leiste{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 18px;border-radius:16px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 32%),
    rgba(12,29,20,.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.5) brightness(1.05);
  backdrop-filter:blur(18px) saturate(1.5) brightness(1.05);
  border:1px solid rgba(240,201,161,.22);
  box-shadow:
    0 14px 40px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset 0 -14px 24px -16px rgba(10,20,14,.5);
}
.wm{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;color:var(--hell);text-decoration:none;line-height:1;}
.wm .r{color:var(--kupfer-hell);font-size:1.18em;}
.wm .de{color:var(--hell-3);font-size:.62em;font-weight:600;}
.top-acts{display:flex;gap:10px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:12px 22px;border-radius:100px;cursor:pointer;
  touch-action:manipulation;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;text-decoration:none;
  border:1px solid transparent;
  transition:transform 180ms var(--ease),box-shadow 180ms var(--ease),background 180ms var(--ease),border-color 180ms var(--ease);
}
.btn:active{transform:scale(.97);}
.btn .pfeil{transition:transform 180ms var(--ease);}
.btn-kupfer{background:var(--kupfer);color:#fff;}
.btn-glas{background:rgba(243,238,221,.07);color:var(--hell);border-color:var(--linie-2);}
@media(hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-3px);}
  .btn:hover .pfeil{transform:translateX(4px);}
  .btn-kupfer:hover{background:#b3603a;box-shadow:0 14px 34px rgba(201,114,72,.35);}
  .btn-glas:hover{border-color:var(--kupfer-hell);background:rgba(243,238,221,.11);}
}
.btn-klein{min-height:44px;padding:10px 16px;font-size:.9rem;}
.btn-klein .lbl{display:none;}
@media(min-width:640px){.btn-klein .lbl{display:inline;}}

/* ---------- Hero ---------- */
.hero{padding:clamp(44px,7vw,92px) 0 clamp(48px,7vw,84px);}
.hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:start;}
.hero h1{font-size:clamp(2.8rem,6.6vw,5.3rem);font-weight:700;margin-bottom:22px;}
.hero h1 .zeile{display:block;overflow:hidden;}
.hero h1 .wort{display:inline-block;transform:translateY(110%);animation:aufstieg .72s var(--ease) forwards;}
.hero h1 .zeile:nth-child(2) .wort{animation-delay:.08s;}
.hero h1 em{
  background:linear-gradient(104deg,var(--kupfer-hell) 8%,var(--kupfer-glanz) 38%,#cd7a4b 66%,var(--kupfer-hell) 94%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:schimmer 9s ease-in-out infinite alternate;
}
@keyframes aufstieg{to{transform:translateY(0);}}
@keyframes schimmer{from{background-position:0% 0;}to{background-position:100% 0;}}
.hero .lead{color:var(--hell-2);max-width:52ch;font-size:1.08rem;margin-bottom:14px;}
.hero .ruf-hand{
  font-family:var(--hand);font-weight:600;font-size:1.7rem;color:var(--kupfer-hell);
  transform:rotate(-.8deg);display:inline-block;line-height:1.3;margin-bottom:24px;
}
.cta-zeile{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px;}
.haken{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:22px;border-top:1px solid var(--linie-2);}
.haken li{list-style:none;display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--hell-2);font-weight:500;}
.haken svg{color:var(--gb);flex:none;}

/* Portrait im Glas (mittlere Größe) */
.portraitfeld{position:relative;justify-self:end;width:min(280px,100%);padding:16px 16px 48px;margin-top:45px;}
.portraitfeld img{
  border-radius:var(--radius-sm);width:100%;height:auto;object-fit:cover;
  border:1px solid rgba(240,201,161,.35);
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.p-badge{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--kupfer);color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.04em;
  padding:8px 16px;border-radius:100px;white-space:nowrap;box-shadow:0 14px 30px rgba(0,0,0,.4);
}
/* ---------- Marquee ---------- */
.band{border-top:1px solid var(--linie-2);border-bottom:1px solid var(--linie-2);overflow:hidden;padding:14px 0;background:rgba(12,29,20,.4);}
.band-spur{display:flex;white-space:nowrap;width:max-content;animation:laufband 38s linear infinite;}
.band:hover .band-spur{animation-play-state:paused;}
.band span{font-family:var(--font-display);font-weight:500;font-size:.95rem;letter-spacing:.04em;padding:0 18px;color:var(--hell-2);}
.band .p1{color:var(--tr);}.band .p2{color:var(--gb);}.band .p3{color:var(--sf);}.band .p4{color:var(--og);}.band .p5{color:var(--kupfer-hell);}
@keyframes laufband{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Sektionen ---------- */
.sektion{padding:clamp(64px,9vw,112px) 0;}
.sektion-kopf{max-width:760px;margin-bottom:clamp(32px,5vw,52px);}
h2{font-size:clamp(2rem,4.4vw,3.3rem);margin-bottom:14px;}
h2 em{color:var(--kupfer-hell);}
.sektion-kopf p{color:var(--hell-2);font-size:1.05rem;max-width:56ch;}

/* Zahlenzeile */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:-10px;}
.zahl{padding:20px 22px;text-align:center;}
.zahl b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.02em;color:var(--kupfer-glanz);}
.zahl span{font-size:.85rem;color:var(--hell-2);}

/* ---------- Die vier Lichter (Marken-Karten) ---------- */
.marken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.marke{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:32px 30px 26px;text-decoration:none;overflow:hidden;
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease),border-color 220ms var(--ease);
}
.marke::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;z-index:1;}
.marke::after{
  content:"";position:absolute;width:70%;height:70%;left:15%;top:20%;z-index:-1;
  border-radius:50%;filter:blur(60px);opacity:.55;transition:opacity 300ms var(--ease);
}
.marke:active{transform:scale(.985);}
@media(hover:hover) and (pointer:fine){
  .marke:hover{transform:translateY(-6px);border-color:rgba(240,201,161,.4);}
  .marke:hover::after{opacity:.9;}
  .marke:hover .m-domain .pfeil{transform:translateX(4px);}
}
.m-label{display:flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.m-label::before{content:"";width:26px;height:2px;background:currentColor;flex:none;}
.m-name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.02em;color:var(--hell);line-height:1.1;}
.m-was{color:var(--hell-2);font-size:.97rem;}
.m-claim{font-family:var(--font-display);font-weight:600;font-size:1.12rem;margin-top:6px;}
.m-witz{font-family:var(--hand);font-weight:600;font-size:1.22rem;color:var(--kupfer-hell);transform:rotate(-.5deg);line-height:1.3;}
.m-domain{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-weight:600;font-size:.93rem;color:var(--hell);}
.m-domain .pfeil{transition:transform 180ms var(--ease);}

.marke.tr::before{background:var(--tr);}
.marke.tr::after{background:radial-gradient(circle,rgba(166,240,0,.16),transparent 70%);}
.marke.tr .m-label{color:var(--tr);}
.marke.tr .m-claim{color:var(--tr);}
.marke.gb::before{background:linear-gradient(90deg,var(--gb-tief),var(--gb));}
.marke.gb::after{background:radial-gradient(circle,rgba(155,214,74,.16),transparent 70%);}
.marke.gb .m-label{color:var(--gb);}
.marke.gb .m-name{font-family:'Plus Jakarta Sans',var(--font-display);font-weight:800;}
.marke.gb .m-claim{color:var(--gb);}
.marke.sf{--akzent:var(--sf);--akzent-rgb:177,154,121;}
.marke.sf::before{background:var(--akzent);}
.marke.sf::after{background:radial-gradient(circle,rgba(var(--akzent-rgb),.24),transparent 70%);}
.marke.sf .m-label{color:var(--akzent);}
.marke.sf .m-claim{color:var(--akzent);}
.marke.sf .m-foerder{border-top-color:rgba(var(--akzent-rgb),.28);}
.marke.sf .m-foerder svg{color:var(--akzent);}
/* dezente Themenfarben je Karte */
.marke.sf.a-zeit  {--akzent:#DCB77A;--akzent-rgb:220,183,122;}
.marke.sf.a-heim  {--akzent:#E0A273;--akzent-rgb:224,162,115;}
.marke.sf.a-garten{--akzent:#A8C98B;--akzent-rgb:168,201,139;}
.marke.sf.a-kochen{--akzent:#D2907F;--akzent-rgb:210,144,127;}
.marke.og::before{background:linear-gradient(110deg,var(--og),var(--og-cyan));}
.marke.og::after{background:radial-gradient(circle,rgba(124,92,255,.2),transparent 70%);}
.marke.og .m-label{color:var(--og-cyan);}
.marke.og .m-name{
  background:linear-gradient(110deg,var(--og) 0%,var(--og-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.marke.og .m-claim{color:var(--og);}
/* Objektservice-Balken: liegt als breiter Riegel mitten im Marken-Raster */
.marken .hv-panel{grid-column:1/-1;}

/* ---------- Hausverwaltungen ---------- */
.hv-panel{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);padding:clamp(26px,3.4vw,40px) clamp(28px,4vw,48px);
  display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,4vw,44px);align-items:center;
}
/* Farbriegel wie bei den Marken-Karten — hier aber mit allen Familienfarben:
   der Objektservice gehoert zu jedem Standbein gleichzeitig. */
.hv-panel::before{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;z-index:1;
  background:linear-gradient(90deg,var(--kupfer),var(--tr),var(--gb-tief),var(--sf),var(--og-cyan),var(--og));
}
.hv-panel h2 em,.hv-panel h3 em{color:var(--kupfer-glanz);}
.hv-panel h3{font-size:clamp(1.5rem,3vw,2rem);line-height:1.12;letter-spacing:-.03em;margin-bottom:10px;}
.hv-panel p{color:var(--hell-2);max-width:56ch;}
.hv-liste{margin:14px 0 0;display:grid;gap:8px;}
.hv-liste li{list-style:none;display:flex;gap:10px;align-items:flex-start;color:var(--hell-2);font-size:.95rem;}
.hv-liste svg{color:var(--gb);flex:none;margin-top:3px;}
/* Rechte Spalte: Symbol oben, Knopf darunter */
.hv-seite{display:flex;flex-direction:column;align-items:center;gap:20px;justify-self:center;}
.hv-bild{display:block;color:rgba(224,162,115,.5);margin-top:-8px;}

/* ---------- Geschichte (kurz) ---------- */
.geschichte .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start;}
.geschichte p{color:var(--hell-2);max-width:56ch;margin-bottom:14px;}
.zitat{
  border-left:3px solid var(--sf);padding:8px 0 8px 24px;margin-top:8px;
  font-family:var(--font-display);font-weight:600;line-height:1.3;
  font-size:clamp(1.25rem,2.6vw,1.7rem);color:var(--hell);max-width:24ch;
}
/* Weiterlesen-Aufklapper */
/* Hoehe wird in seite.js exakt in Pixeln gesetzt (fr-Einheiten rechnen je nach
   Fensterhoehe anders und hinterlassen dann eine tote Leerflaeche unter dem Text). */
.mehr{overflow:hidden;transition:height 560ms var(--ease);}
/* Der Knopf steht ueber dem Aufklapper — beim Oeffnen etwas Luft darunter. */
.mehr-inner{padding-top:8px;}
/* Der Text selbst laeuft weich aus — funktioniert ueber der lebenden Buehne,
   ein farbiger Verlaufs-Kasten wuerde dort immer als Fleck auffallen. */
.mehr:not(.offen) .mehr-inner{
  -webkit-mask-image:linear-gradient(to bottom,#000 64%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 64%,transparent 100%);
}

.mehr-knopf{
  display:inline-flex;align-items:center;gap:12px;margin-top:18px;
  background:none;border:none;cursor:pointer;touch-action:manipulation;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  color:var(--kupfer-hell);padding:6px 2px;border-radius:10px;
  transition:color 200ms var(--ease);
}
/* [hidden] muss das inline-flex von oben ueberstimmen, sonst bleibt der Knopf stehen. */
.mehr-knopf[hidden]{display:none;}
.mehr-kreis{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--linie);color:var(--kupfer-hell);
  background:rgba(243,238,221,.06);
  transition:transform 320ms var(--ease),border-color 200ms var(--ease),background 200ms var(--ease);
}
.mehr-knopf[aria-expanded="true"] .mehr-kreis{transform:rotate(180deg);}
.mehr-knopf:active .mehr-kreis{transform:scale(.94);}
.mehr-knopf[aria-expanded="true"]:active .mehr-kreis{transform:rotate(180deg) scale(.94);}
@media(hover:hover) and (pointer:fine){
  .mehr-knopf:hover{color:var(--kupfer-glanz);}
  .mehr-knopf:hover .mehr-kreis{border-color:var(--kupfer-hell);background:rgba(243,238,221,.11);}
}

.story-foto{position:sticky;top:110px;justify-self:end;width:min(340px,100%);}
.story-foto::before{
  content:"";position:absolute;inset:0;border:2.5px solid var(--kupfer);
  border-radius:var(--radius);transform:translate(16px,16px);
}
.story-foto img{position:relative;border-radius:var(--radius);width:100%;height:auto;object-fit:cover;box-shadow:0 40px 90px rgba(0,0,0,.5);}

/* ---------- Kontakt ---------- */
.kontakt .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:start;}
.k-wege{display:grid;gap:12px;margin-top:26px;}
.k-weg{
  display:flex;align-items:center;gap:12px;min-height:52px;
  border-radius:var(--radius-sm);padding:12px 18px;text-decoration:none;touch-action:manipulation;
  color:var(--hell);font-weight:600;font-size:.97rem;
  background:rgba(243,238,221,.06);border:1px solid var(--linie-2);
  transition:transform 180ms var(--ease),border-color 180ms var(--ease),background 180ms var(--ease);
}
.k-weg svg{color:var(--kupfer-hell);flex:none;}
.k-weg:active{transform:scale(.98);}
@media(hover:hover) and (pointer:fine){
  .k-weg:hover{transform:translateY(-3px);border-color:var(--kupfer-hell);background:rgba(243,238,221,.1);}
}
.k-zeiten{margin-top:16px;font-size:.9rem;color:var(--hell-2);}

.formkarte{
  background:#f6f1e4;border-radius:var(--radius);color:#23291f;
  border:1px solid rgba(240,201,161,.3);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5);
  padding:clamp(26px,4vw,40px);
}
.formkarte h3{color:#23291f;font-size:1.4rem;margin-bottom:6px;}
.formkarte .einleitung{color:#5c6551;font-size:.95rem;margin-bottom:22px;}
.k-form{display:grid;gap:18px;}
.k-feld{display:grid;gap:7px;}
.k-feld label{font-weight:600;font-size:.92rem;color:#23291f;}
.pflicht{color:#b3603a;}
.k-feld input,.k-feld select,.k-feld textarea{
  font:inherit;color:#23291f;background:#fffdf6;
  border:1px solid #ddd2b8;border-radius:var(--radius-sm);padding:12px 15px;width:100%;
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease);
}
.k-feld textarea{min-height:130px;resize:vertical;}
.k-feld input:focus,.k-feld select:focus,.k-feld textarea:focus{
  outline:none;border-color:var(--kupfer);box-shadow:0 0 0 4px rgba(201,114,72,.18);
}
.k-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.k-consent{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:#5c6551;cursor:pointer;}
.k-consent a{color:#b3603a;}
.k-consent input{width:19px;height:19px;margin-top:3px;accent-color:#b3603a;flex:none;cursor:pointer;}
.k-aktionen{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.formkarte .btn-kupfer{border:none;}
.btn-leise{
  display:inline-flex;align-items:center;gap:8px;background:none;border:none;
  color:#5c6551;font:inherit;font-size:.88rem;font-weight:500;cursor:pointer;padding:10px 6px;
  border-radius:8px;text-decoration:underline;text-underline-offset:3px;
  transition:color 160ms var(--ease);
}
@media(hover:hover) and (pointer:fine){.btn-leise:hover{color:#b3603a;}}
.k-status{display:none;border-radius:var(--radius-sm);padding:13px 16px;font-size:.93rem;font-weight:600;}
.k-status.zeigen{display:block;}
.k-status.ok{background:#e9f2dc;color:#3c5a1f;border:1px solid #d2e3b8;}
.k-status.fehler{background:#f9e5dc;color:#8c3a1c;border:1px solid #eccab8;}

/* ---------- Hausverwaltungs-Seite ---------- */
.hv-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.hv-karte{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:28px 26px 24px;overflow:hidden;
}
.hv-karte::before,.ue-karte::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;z-index:1;}
.hv-karte.a-gb::before,.ue-karte.a-gb::before{background:linear-gradient(90deg,var(--gb-tief),var(--gb));}
.hv-karte.a-tr::before,.ue-karte.a-tr::before{background:var(--tr);}
.hv-karte.a-ku::before,.ue-karte.a-ku::before{background:linear-gradient(90deg,var(--kupfer),var(--kupfer-glanz));}
.hv-karte.a-sf::before,.ue-karte.a-sf::before{background:var(--sf);}
.hv-karte h3{font-size:1.3rem;}
.hv-karte p{color:var(--hell-2);font-size:.95rem;}
.hv-karte p a{color:var(--kupfer-hell);font-weight:600;}
.hv-karte .preis{margin-top:auto;padding-top:12px;font-weight:600;font-size:.9rem;color:var(--kupfer-glanz);}
.schritt{
  display:grid;grid-template-columns:84px 1fr;gap:20px;
  padding:26px 4px;border-top:1px solid var(--linie-2);align-items:baseline;
}
.schritt:last-of-type{border-bottom:1px solid var(--linie-2);}
.schritt .nr{font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--kupfer-glanz);}
.schritt h3{font-size:1.25rem;margin-bottom:6px;}
.schritt p{color:var(--hell-2);max-width:62ch;}
.nebensatz{color:var(--hell-2);font-size:.95rem;margin-top:18px;}

/* ---------- Wohnungsübergaben (eigene, ausführliche Sektion) ---------- */
.uebergabe-panel{
  border-radius:var(--radius-lg);padding:clamp(32px,5vw,56px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,52px);align-items:center;
}
.uebergabe-panel .lead{color:var(--hell-2);max-width:56ch;margin-bottom:20px;}
.uebergabe-liste{display:grid;gap:12px;margin-bottom:8px;}
.uebergabe-liste li{list-style:none;display:flex;gap:10px;align-items:flex-start;color:var(--hell-2);font-size:.96rem;}
.uebergabe-liste svg{color:var(--gb);flex:none;margin-top:3px;}
.uebergabe-liste strong{color:var(--hell);font-weight:600;}
.protokoll-karte{padding:26px 26px 22px;}
.protokoll-kopf{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--kupfer-glanz);
}
.protokoll-kopf svg{flex:none;color:var(--kupfer-hell);}
.protokoll-liste{display:grid;gap:11px;}
.protokoll-liste li{list-style:none;display:flex;gap:9px;align-items:flex-start;color:var(--hell-2);font-size:.92rem;}
.protokoll-liste svg{color:var(--gb);flex:none;margin-top:2px;}

.uebergabe-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:36px;}
.ue-karte{position:relative;overflow:hidden;padding:26px 24px 22px;display:flex;flex-direction:column;gap:8px;}
.ue-karte h3{font-size:1.15rem;}
.ue-karte p{color:var(--hell-2);font-size:.93rem;}
.preis-stat{margin-top:auto;padding-top:16px;border-top:1px solid var(--linie-2);}
.preis-stat b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.6rem);letter-spacing:-.01em;line-height:1.15;
  color:var(--kupfer-glanz);
}
.preis-stat span{display:block;font-size:.82rem;color:var(--hell-2);margin-top:2px;}
.ue-karte.a-gb .preis-stat b{color:var(--gb);}
.ue-karte.a-tr .preis-stat b{color:var(--tr);}
.ue-karte.a-ku .preis-stat b{color:var(--kupfer-glanz);}

/* FAQ-Akkordeon */
.faq{display:grid;gap:12px;margin-top:12px;}
.faq details{
  border-radius:var(--radius-sm);padding:4px;overflow:hidden;
  transition:border-color 200ms var(--ease);
}
.faq summary{
  list-style:none;cursor:pointer;padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--hell);
  touch-action:manipulation;
}
.faq summary::-webkit-details-marker{display:none;}
.faq .pl{
  width:24px;height:24px;flex:none;position:relative;border-radius:50%;
  border:1.5px solid var(--linie-2);transition:background 250ms var(--ease),border-color 250ms var(--ease),transform 250ms var(--ease);
}
.faq details[open] .pl{background:var(--kupfer);border-color:var(--kupfer);transform:rotate(180deg);}
.faq .pl::before,.faq .pl::after{content:"";position:absolute;background:var(--hell);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq .pl::before{width:10px;height:1.6px;}
.faq .pl::after{width:1.6px;height:10px;transition:opacity 200ms var(--ease);}
.faq details[open] .pl::after{opacity:0;}
.faq .ans{padding:0 18px 18px 18px;color:var(--hell-2);font-size:.95rem;max-width:70ch;}
.faq .ans a{color:var(--kupfer-hell);}

/* ---------- Textseiten (Impressum/Datenschutz) ---------- */
.textseite{padding:48px 0 88px;}
.textkarte{padding:clamp(28px,4vw,48px);}
.textkarte h1{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:22px;}
.textkarte h2{font-size:1.35rem;margin:30px 0 10px;}
.textkarte p,.textkarte li{color:var(--hell-2);margin-bottom:12px;max-width:70ch;}
.textkarte ul{padding-left:22px;}
.textkarte a{color:var(--kupfer-hell);}
.textkarte strong{color:var(--hell);}

/* PS + Fusszeile */
.ps{padding:0 0 clamp(56px,8vw,88px);}
.ps p{color:var(--hell-3);font-size:.95rem;max-width:64ch;}
.ps strong{color:var(--hell-2);}
footer{border-top:1px solid var(--linie-2);padding:30px 0 40px;font-size:.9rem;color:var(--hell-2);background:rgba(12,29,20,.5);}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:center;text-align:center;}
footer a{color:var(--hell-2);text-underline-offset:3px;}
@media(hover:hover) and (pointer:fine){footer a:hover{color:var(--kupfer-hell);}}

/* ---------- Reveal ---------- */
.zeig{opacity:0;transform:translateY(16px);}
.zeig.da{animation:erscheinen .6s var(--ease) forwards;}
.zeig.d1.da{animation-delay:.07s;}
.zeig.d2.da{animation-delay:.14s;}
.zeig.d3.da{animation-delay:.21s;}
@keyframes erscheinen{to{opacity:1;transform:translateY(0);}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:1ms !important;}
  .hero h1 .wort{transform:none;animation:none;}
  .hero h1 em{animation:none;background-position:40% 0;}
  .band-spur{animation:none;}
  .spot{display:none;}
  .treib{display:none;}
  .fluss .lg1,.fluss .lg2,.fluss .lg3{animation:none;}
  .zeig{opacity:1;transform:none;}
}

@media(max-width:940px){
  .hero .wrap{grid-template-columns:1fr;}
  .portraitfeld{justify-self:center;width:min(250px,70%);margin-top:0;}
  .hv-karten{grid-template-columns:1fr;}
  .uebergabe-panel{grid-template-columns:1fr;}
  .uebergabe-karten{grid-template-columns:1fr;}
  .schritt{grid-template-columns:52px 1fr;gap:14px;}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));}
  .marken{grid-template-columns:1fr;}
  .hv-panel{grid-template-columns:1fr;}
  .geschichte .wrap{grid-template-columns:1fr;}
  .story-foto{position:static;order:-1;justify-self:start;width:min(220px,64%);margin-bottom:24px;}
  .kontakt .wrap{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .hero h1{font-size:clamp(2rem,8.8vw,2.6rem);}
}