/* ============================================================
   Gleixner Web — Fineline Noir (lokale Entwicklung)
   Theme: Tiefschwarz · Signalrot · Eisblau. Haarlinien, High-Contrast-
   Serif, viele feine Effekte (Linien zeichnen sich, Scanline, Grain,
   Glow, Cursor-Ring, Magnetic-Buttons, Tilt, Marquee, Scroll-Progress).
   ============================================================ */

:root{
  /* Schwarz */
  --bg:#0b0b0e; --bg-2:#101015; --panel:#141419; --panel-2:#191920;

  /* Bone / Text */
  --bone:#ece8e1; --muted:#9d9a93; --faint:#6e6b65;

  /* Haarlinien (auf Schwarz = helle Linien) */
  --line:rgba(236,232,225,.12);
  --line-2:rgba(236,232,225,.20);
  --line-strong:rgba(236,232,225,.42);

  /* Akzente */
  --red:#e5392f; --red-deep:#b3271f; --red-soft:rgba(229,57,47,.14);
  --ice:#5cc6ff; --ice-deep:#2b9fe0; --ice-soft:rgba(92,198,255,.12);

  --radius:4px; --radius-lg:10px; --maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Inter",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans); color:var(--bone); background:var(--bg);
  line-height:1.7; min-height:100vh; overflow-x:clip; position:relative;
  font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased;
}

/* Atmosphäre: zwei sehr dezente Glows (rot oben rechts, eis unten links) */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(680px 460px at 88% -6%, rgba(229,57,47,.16), transparent 60%),
    radial-gradient(620px 520px at -8% 108%, rgba(92,198,255,.10), transparent 60%);
}
/* Hairline-Blueprint-Raster */
body::before{
  content:""; position:fixed; inset:-2px; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1200px 760px at 72% -4%, #000 0%, transparent 74%);
          mask-image:radial-gradient(1200px 760px at 72% -4%, #000 0%, transparent 74%);
  opacity:.6; animation:gridDrift 36s linear infinite;
}
@keyframes gridDrift{ to{ background-position:64px 64px, 64px 64px; } }

/* Filmkorn (sehr fein, premium) */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dezente grüne Code-Aktivität im Hintergrund (klassischer Terminal-Look) */
.codestream{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.code-col{
  position:absolute; top:0; margin:0; white-space:pre;
  font-family:var(--mono); font-size:12px; line-height:1.55; letter-spacing:.02em;
  color:#3df08a; opacity:.22; text-shadow:0 0 7px rgba(61,240,138,.35);
  animation:codeDrift var(--dur,52s) linear infinite;
}
@keyframes codeDrift{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@media (max-width:760px){ .code-col{ font-size:10.5px; opacity:.10; } }

a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }

.wrap{ width:min(100% - 44px, var(--maxw)); margin-inline:auto; position:relative; z-index:2; }
main{ position:relative; z-index:2; }
section{ padding:88px 0; position:relative; }

/* Typo */
h1,h2,h3{ font-family:var(--serif); font-weight:380; line-height:1.07; letter-spacing:-.01em; }
h1{ font-size:clamp(2.4rem,6.2vw,4.6rem); font-weight:330; }
h2{ font-size:clamp(1.8rem,4vw,2.9rem); margin-bottom:18px; }
h3{ font-size:1.32rem; }
.grad{
  background:linear-gradient(100deg,var(--red),var(--ice));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic;
}
p{ color:var(--muted); }
p.lead{ font-size:1.12rem; max-width:62ch; color:var(--muted); }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--red); margin-bottom:22px;
}
.eyebrow::before{ content:""; width:42px; height:1px; background:var(--red); }
.eyebrow.grow::before{ width:0; transition:width 1s var(--ease) .15s; }
.in .eyebrow.grow::before, .eyebrow.grow.lit::before{ width:42px; }

/* Scroll-Fortschritt */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:80;
  background:linear-gradient(90deg,var(--red),var(--ice));
  box-shadow:0 0 12px rgba(229,57,47,.6); transition:width .1s linear;
}

/* ---- Marken-Rail (vertikale Sidebar statt Demo-Topbar) ---- */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:230px; z-index:60;
  display:flex; flex-direction:column; padding:32px 26px;
  border-right:1px solid var(--line);
  background:rgba(11,11,14,.55); backdrop-filter:blur(12px) saturate(1.15);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .rail{ background:var(--bg); } }
.rail-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:2px; min-width:0; font-family:var(--serif); font-size:1.12rem; font-weight:430; letter-spacing:-.01em; color:var(--bone); }
.brand .brand-name{ line-height:1.05; margin-left:-6px; white-space:nowrap; }
.logo-mark{ width:72px; height:72px; flex:0 0 72px; overflow:visible; }
.logo-mark .g{ fill:none; stroke:var(--bone); stroke-width:3.2; stroke-linecap:round; transition:stroke .4s var(--ease); }
.logo-mark .node{ fill:var(--ice); stroke:none; }
.logo-mark .link{ fill:none; stroke:var(--ice); stroke-width:1.4; opacity:.7; }
.logo-mark .cursor{ fill:var(--red); stroke:none; filter:drop-shadow(0 0 4px rgba(229,57,47,.45)); }
.brand:hover .logo-mark .g{ stroke:var(--ice); }

.rail-nav{ margin-top:50px; display:flex; flex-direction:column; gap:2px; }
.rail-nav a{ position:relative; color:var(--muted); font-size:1.02rem; font-weight:500; padding:10px 0; display:flex; align-items:baseline; gap:13px; transition:color .25s, padding-left .3s var(--ease); }
.rail-nav a .onum{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--faint); transition:color .25s; }
.rail-nav a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:6px; height:1px; width:0; background:var(--red); transition:width .35s var(--ease); }
.rail-nav a:not(.btn):hover{ color:var(--bone); padding-left:7px; }
.rail-nav a:not(.btn):hover::after, .rail-nav a.active:not(.btn)::after{ width:22px; }
.rail-nav a.active{ color:var(--bone); }
.rail-nav a.active .onum{ color:var(--red); }
.rail-nav .btn{ margin-top:24px; justify-content:center; }

.rail-foot{ margin-top:auto; display:flex; flex-direction:column; gap:9px; font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--faint); padding-top:24px; border-top:1px solid var(--line); }
.rail-foot a{ color:var(--muted); transition:color .25s; }
.rail-foot a:hover{ color:var(--red); }

.menu-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:var(--radius); background:transparent; cursor:pointer; }
.menu-toggle span{ display:block; width:20px; height:1.5px; margin:5px auto; background:var(--bone); }

/* Inhalt rückt neben die Rail */
main, .site-footer{ margin-left:230px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600;
  font-size:.92rem; padding:13px 24px; border-radius:var(--radius); cursor:pointer; position:relative;
  overflow:hidden; isolation:isolate; border:1px solid var(--line-2); background:transparent; color:var(--bone);
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--bone); transform:translateY(101%); transition:transform .4s var(--ease); }
.btn:hover{ color:var(--bg); }
.btn:hover::before{ transform:translateY(0); }
.btn-primary{ border-color:var(--red); color:var(--red); box-shadow:0 0 0 0 rgba(229,57,47,.4); }
.btn-primary::before{ background:var(--red); }
.btn-primary:hover{ color:#fff; box-shadow:0 8px 30px rgba(229,57,47,.32); }
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-ice{ border-color:var(--ice); color:var(--ice); }
.btn-ice::before{ background:var(--ice); }
.btn-ice:hover{ color:var(--bg); box-shadow:0 8px 30px rgba(92,198,255,.28); }

/* Einsteiger-Hinweis (führt zum Lexikon) */
.help-band{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:space-between;
  border:1px solid var(--line); border-left:2px solid var(--ice); border-radius:var(--radius-lg);
  padding:26px 30px; background:linear-gradient(100deg, var(--ice-soft), transparent 58%), var(--panel);
}
.help-ico{ flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:50%; color:var(--ice); }
.help-ico svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.help-text{ flex:1 1 300px; }
.help-text strong{ display:block; font-family:var(--serif); font-weight:430; font-size:1.24rem; color:var(--bone); line-height:1.2; }
.help-text > span{ color:var(--muted); font-size:.98rem; }
.help-band .btn{ flex:0 0 auto; }
@media (max-width:600px){ .help-band{ padding:22px 20px; } .help-band .btn{ width:100%; justify-content:center; } }

.menu-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:var(--radius); background:transparent; cursor:pointer; }
.menu-toggle span{ display:block; width:20px; height:1.5px; margin:5px auto; background:var(--bone); }

/* Hero */
.hero{ padding:92px 0 64px; }
.hero-grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:center; }
.hero .lead{ margin:22px 0 34px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

/* Sanfter Hero-Auftritt beim Laden (gestaffelt) */
@keyframes heroRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  .hero-copy > *,
  .hero > .eyebrow, .hero > h1, .hero > .lead{ animation:heroRise .75s var(--ease) both; }
  .hero-copy > *:nth-child(2),
  .hero > h1{ animation-delay:.10s; }
  .hero-copy > *:nth-child(3),
  .hero > .lead{ animation-delay:.18s; }
  .hero-copy > *:nth-child(4){ animation-delay:.26s; }
  .hero-copy > *:nth-child(5){ animation-delay:.34s; }
  .hero-art{ animation:heroRise .9s var(--ease) both; animation-delay:.2s; }
}

/* Line-Art (Hero-Monitor + Icons) */
.line-art path,.line-art circle,.line-art line,.line-art rect,.line-art polyline{
  fill:none; stroke:var(--bone); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round;
}
.line-art .accent-stroke{ stroke:var(--red); }
.line-art .ice-stroke{ stroke:var(--ice); }
.draw [data-draw]{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); }
.draw.drawn [data-draw]{ animation:drawLine 1.5s var(--ease) forwards; animation-delay:calc(var(--i,0) * .1s); }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

/* Monitor-Sonderanimationen (laufen nach dem Zeichnen weiter) */
.hero-art{ position:relative; }
.scan{ stroke:var(--red); stroke-width:1; opacity:0; }
.drawn .scan{ animation:scanMove 3.4s var(--ease) 1.4s infinite; }
@keyframes scanMove{
  0%{ transform:translateY(0); opacity:0; }
  8%{ opacity:.9; } 92%{ opacity:.9; }
  100%{ transform:translateY(150px); opacity:0; }
}
.caret{ fill:var(--ice); }
.drawn .caret{ animation:blink 1.05s steps(1) 1.6s infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.pulse-node{ transform-box:fill-box; transform-origin:center; }
.drawn .pulse-node{ animation:pulse 2.4s var(--ease) 1.8s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.55); opacity:.55; } }

/* Trust */
.trust-strip{ display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:42px; padding-top:26px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.trust-strip span{ display:inline-flex; align-items:center; gap:9px; }
.trust-strip .tick{ width:16px; height:16px; flex:0 0 16px; }
.trust-strip .tick path{ fill:none; stroke:var(--red); stroke-width:1.6; }

/* Marquee-Ticker (feine Schlagworte) */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:16px 0; margin-top:8px; }
.marquee-track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:marquee 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--faint); padding:0 26px; display:inline-flex; align-items:center; gap:26px; }
.marquee-track span::after{ content:"·"; color:var(--red); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* Section-Head */
.sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:8px; }
.sec-num{ font-family:var(--mono); font-size:.78rem; letter-spacing:.2em; color:var(--faint); }

/* Grids / Cards */
.grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); gap:24px; background:transparent; border:0; }
.card{ background:var(--panel); padding:34px 30px; position:relative; transition:background .4s var(--ease); transform-style:preserve-3d; }
.grid .card{ border-radius:0; }
.grid-2 .card{ border:1px solid var(--line); border-radius:var(--radius-lg); }
.card:hover{ background:var(--panel-2); }
.card .corner{ position:absolute; width:14px; height:14px; opacity:0; transition:opacity .35s var(--ease); }
.card .corner.tl{ top:12px; left:12px; border-top:1px solid var(--red); border-left:1px solid var(--red); }
.card .corner.br{ bottom:12px; right:12px; border-bottom:1px solid var(--ice); border-right:1px solid var(--ice); }
.card:hover .corner{ opacity:1; }
.card h3{ margin-bottom:12px; }
.card p{ font-size:.98rem; }
.ico{ width:56px; height:56px; margin-bottom:22px; }
.ico path,.ico circle,.ico line,.ico rect,.ico polyline{ fill:none; stroke:var(--bone); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:stroke .35s var(--ease); }
.card:hover .ico path,.card:hover .ico circle,.card:hover .ico line,.card:hover .ico rect,.card:hover .ico polyline{ stroke:var(--red); }

/* Steps */
.steps{ counter-reset:step; display:grid; gap:1px; grid-template-columns:repeat(4,1fr); background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.step{ background:var(--panel); padding:30px 24px; position:relative; }
.step::before{ counter-increment:step; content:"0" counter(step); font-family:var(--mono); font-size:.82rem; letter-spacing:.1em; color:var(--red); display:block; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.step h3{ font-size:1.12rem; margin-bottom:8px; }
.step p{ font-size:.92rem; }

/* Pricing */
.price-grid{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); align-items:start; }
.price{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 30px; position:relative; transition:border-color .4s var(--ease), transform .4s var(--ease); }
.price:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.price.featured{ border-color:var(--red); }
.price.featured::before{ content:"Beliebt"; position:absolute; top:-1px; right:24px; transform:translateY(-50%); background:var(--red); color:#fff; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.price .tag{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.18em; color:var(--faint); }
.price .amount{ font-family:var(--serif); font-size:2.7rem; font-weight:360; margin:10px 0 4px; }
.price .amount small{ font-family:var(--sans); font-size:.85rem; color:var(--faint); font-weight:500; }
.price ul{ list-style:none; margin:22px 0 26px; display:grid; gap:13px; border-top:1px solid var(--line); padding-top:22px; }
.price li{ color:var(--muted); font-size:.95rem; padding-left:26px; position:relative; }
.price li::before{ content:""; position:absolute; left:0; top:.62em; width:12px; height:1px; background:var(--red); }

/* CTA */
.cta-band{ border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:56px 40px; text-align:center; position:relative; overflow:hidden; background:var(--panel); }
.cta-band::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right, var(--line) 1px, transparent 1px); background-size:40px 100%; -webkit-mask-image:linear-gradient(to bottom,transparent,#000,transparent); mask-image:linear-gradient(to bottom,transparent,#000,transparent); opacity:.6; }
.cta-band > *{ position:relative; }
.cta-band .lead{ margin:14px auto 28px; }

/* Portfolio */
.port-grid{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
.port-item{ aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--radius-lg); display:grid; place-items:center; color:var(--faint); background:var(--panel); text-align:center; padding:18px; font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; position:relative; overflow:hidden; transition:border-color .4s, color .4s; }
.port-item::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(135deg,var(--line) 1px,transparent 1px); background-size:14px 14px; opacity:.5; }
.port-item:hover{ border-color:var(--red); color:var(--red); }

/* Referenzen (neutrale Muster-Vorschauen) */
.ref-grid{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
.ref-card{ margin:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--panel); transition:border-color .4s var(--ease), transform .4s var(--ease); }
.ref-card:hover{ border-color:var(--red); transform:translateY(-5px); }
.ref-thumb{ aspect-ratio:16/10; border-bottom:1px solid var(--line); display:grid; place-items:center; padding:20px; background:var(--bg-2); position:relative; overflow:hidden; }
.ref-thumb::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(135deg,var(--line) 1px,transparent 1px); background-size:16px 16px; opacity:.35; }
.ref-thumb svg{ position:relative; width:100%; height:auto; }
.ref-card figcaption{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; color:var(--muted); }
.ref-card figcaption .ref-tag{ color:var(--faint); border:1px solid var(--line); border-radius:999px; padding:3px 10px; white-space:nowrap; transition:color .35s, border-color .35s; }
.ref-card:hover figcaption .ref-tag{ color:var(--red); border-color:var(--red); }

/* Neutrale Website-Vorschauen (Browser-Mockups, ohne Namen/Branche) */
.browser{ width:100%; border-radius:9px; overflow:hidden; background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.32); border:1px solid rgba(0,0,0,.12);
  transition:transform .45s var(--ease); }
.ref-card:hover .browser{ transform:translateY(-3px) scale(1.012); }
.browser .bar{ display:flex; align-items:center; gap:5px; padding:7px 10px; background:#efece5; border-bottom:1px solid #e1dccf; }
.browser .bar i{ width:8px; height:8px; border-radius:50%; background:#cdc6b8; flex:0 0 8px; }
.browser .bar i:first-child{ background:#e5897f; }
.browser .bar .url{ flex:1; height:11px; margin-left:7px; border-radius:6px; background:#e1dccf; }
.bview{ padding:13px; background:#fbfaf7; }
.bview .nav{ display:flex; align-items:center; gap:7px; margin-bottom:11px; }
.bview .lg{ width:20px; height:9px; border-radius:2px; background:#16161a; flex:0 0 auto; }
.bview .nav .sp{ flex:1; }
.bview .nav b{ width:16px; height:5px; border-radius:3px; background:#cdc6b8; display:inline-block; }
.bview .h1{ height:11px; border-radius:3px; background:#1a1a1e; }
.bview .h2{ height:7px; border-radius:3px; background:#5c5c64; }
.bview .t{ height:5px; border-radius:3px; background:#d6d0c2; margin-top:6px; }
.bview .btn{ height:13px; width:58px; border-radius:7px; background:var(--red); margin-top:10px; }
.bview .img{ border-radius:5px; background:linear-gradient(135deg,#cfe6ee,#ece6da); }
.bview .card{ border:1px solid #e4dfd2; border-radius:5px; background:#fff; min-height:34px; }
.bview .card.ice{ background:linear-gradient(135deg,#dff0f5,#fff); }
.bview .row{ display:flex; gap:8px; }
.bview .col{ flex:1; }
.bview .mt{ margin-top:11px; }
.bview .w70{ width:70%; } .bview .w55{ width:55%; } .bview .w40{ width:40%; }
.bview .side{ display:flex; gap:10px; }
.bview .side .bar-v{ flex:0 0 30px; align-self:stretch; border-radius:4px; background:#16161a; min-height:74px; }
@media (max-width:900px){ .ref-grid{ grid-template-columns:1fr !important; } }

/* Web-Lexikon */
.gloss-bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:34px; }
.gloss-search{ flex:1 1 260px; position:relative; }
.gloss-search input{ width:100%; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); color:var(--bone); padding:13px 16px 13px 40px; font-family:var(--sans); font-size:16px; transition:border-color .3s var(--ease); }
.gloss-search input::placeholder{ color:var(--faint); }
.gloss-search input:focus{ outline:none; border-color:var(--red); }
.gloss-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--faint); fill:none; stroke-width:1.6; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 15px; cursor:pointer; background:transparent; transition:color .25s, background .25s, border-color .25s; }
.chip:hover{ color:var(--bone); border-color:var(--line-2); }
.chip.active{ color:var(--bg); background:var(--bone); border-color:var(--bone); }
.glossar{ display:grid; grid-template-columns:repeat(auto-fill,minmax(282px,1fr)); gap:20px; }
.term{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 24px 26px; background:var(--panel); position:relative; overflow:hidden; transition:border-color .35s var(--ease), transform .35s var(--ease); }
.term::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(var(--red),var(--ice)); transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.term:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.term:hover::before{ transform:scaleY(1); }
.term .cat{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.term h3{ margin:10px 0 8px; font-size:1.18rem; }
.term p{ font-size:.96rem; line-height:1.6; }
.term[hidden]{ display:none; }
.gloss-empty{ display:none; color:var(--faint); font-family:var(--mono); font-size:.92rem; margin-top:22px; }

/* Ratings / Stimmen */
.rating-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:28px; }
.rating-avg{ font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:440; color:var(--bone); line-height:1; }
.rating-avg-label{ width:100%; margin:0; font-size:.82rem; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; }
.rating-stars{ color:#f5c518; font-size:1.35rem; letter-spacing:.08em; text-shadow:0 0 12px rgba(245,197,24,.25); }
.rating-quotes{ min-height:0; }
.rating-quotes:empty{ display:none; }
.rating-quote h3{ margin:10px 0 8px; font-size:1.05rem; }
.rating-quote .quote-stars{ color:#f5c518; font-size:.95rem; letter-spacing:.06em; }
.rating-quote p{ margin-top:10px; color:var(--muted); font-size:.96rem; line-height:1.55; }
.rating-empty{ color:var(--faint); font-size:.95rem; margin-top:22px; }
.rating-form-wrap h3{ font-size:1.35rem; }
.star-pick{ border:0; margin:0; padding:0; }
.star-pick legend{ font-size:.85rem; color:var(--faint); font-weight:500; letter-spacing:.02em; margin-bottom:8px; }
.star-pick-row{ display:flex; gap:6px; }
.star-btn{
  appearance:none; border:0; background:transparent; color:var(--line-2); font-size:1.7rem; line-height:1;
  cursor:pointer; padding:2px 4px; transition:color .2s, transform .2s;
}
.star-btn:hover,.star-btn.is-on{ color:#f5c518; }
.star-btn:focus-visible{ outline:2px solid var(--ice); outline-offset:2px; border-radius:4px; }
.star-btn.is-on{ transform:scale(1.06); }

/* Form */
.form{ display:grid; gap:18px; max-width:560px; }
.form label{ font-size:.85rem; color:var(--faint); display:grid; gap:8px; font-weight:500; letter-spacing:.02em; }
.form input,.form textarea{ width:100%; padding:13px 0; border:0; border-bottom:1px solid var(--line-2); background:transparent; color:var(--bone); font-family:inherit; font-size:16px; transition:border-color .3s var(--ease); }
.form input::placeholder,.form textarea::placeholder{ color:var(--faint); }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--red); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ color:var(--faint); font-size:.86rem; min-height:1.2em; }
.form button[disabled]{ opacity:.65; cursor:wait; }
.contact-info{ display:grid; gap:24px; align-content:start; }
.contact-info a{ color:var(--ice); }
.contact-info a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Legal */
.prose{ max-width:72ch; }
.prose h2{ font-size:1.5rem; margin:36px 0 12px; }
.prose p,.prose li{ color:var(--muted); font-size:.98rem; }
.prose ul{ margin:8px 0 8px 20px; }
.prose a{ color:var(--ice); }
.prose .todo{ color:var(--red); font-family:var(--mono); font-size:.86rem; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding:40px 0; color:var(--faint); font-size:.88rem; margin-top:40px; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; }
.footer-inner strong{ color:var(--bone); font-family:var(--serif); font-weight:440; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ transition:color .25s; }
.footer-links a:hover{ color:var(--red); }

.rule{ height:1px; background:var(--line); border:0; width:100%; }

/* Reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }

/* Responsive */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr !important; gap:36px; }
  .hero-art{ order:-1; max-width:420px; }
  .grid-3,.price-grid,.port-grid,.steps{ grid-template-columns:1fr !important; }
  .grid-2{ grid-template-columns:1fr !important; }
  .grid,.steps{ background:var(--line); }
  /* Rail -> schlanke Topbar mit Klapp-Menü */
  .rail{ position:sticky; top:0; left:0; right:0; bottom:auto; width:auto; height:auto; flex-direction:column; padding:0; border-right:0; border-bottom:1px solid var(--line); }
  .rail-top{ padding:14px 22px; }
  .rail-nav{ margin-top:0; display:none; padding:6px 22px 18px; border-top:1px solid var(--line); }
  .rail-nav.open{ display:flex; }
  .rail-nav a{ width:100%; }
  .rail-nav .btn{ width:100%; margin-top:12px; }
  .rail-foot{ display:none; }
  .menu-toggle{ display:block; }
  main, .site-footer{ margin-left:0; }
  section{ padding:64px 0; }
  /* Kontaktformular bündig zum Seitenrand (Mobile-Alignment-Fix) */
  .form.card{ border:0; background:transparent; padding:0; }
  .form.card .corner{ display:none; }
  .contact-info .card{ padding:26px 22px; }
}
@media (max-width:520px){ .hero{ padding:56px 0 44px; } }

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  body::before{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  .draw [data-draw]{ stroke-dashoffset:0; }
  .scan{ display:none; }
  .marquee-track{ animation:none; }
}