/* dreis.dev — gebaut nach Richtungsvertrag V1 "product.inc-getreu (hell)"
   Farben/Schriften: gemessen (WEBSITE-STATUS.md) · Schriften selbst gehostet */

@font-face { font-family:"Space Grotesk"; src:url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight:300 700; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"JetBrains Mono"; src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight:100 800; font-display:swap; }

* { box-sizing:border-box; margin:0; padding:0; }

/* --- Variablen (Regler-Panel Phase 6 greift auf tweaks.css darüberliegend) --- */
:root {
  /* Markenfarben (gemessen) */
  --purple:#7A11B4; --purple-deep:#5A03AC; --petrol:#116466; --lilac:#E3C5FF;
  --lilac-text:#B47CE8; /* Akzent auf dunkler Fläche, AA-safe */
  --bg:#FAF9FC; --surface:#FFFFFF; --ink:#1E1E1E; --soft:#4E4E4E; --line:#E3DEEC;
  /* Schriften */
  --display:"Space Grotesk",sans-serif; --body:"Inter",sans-serif; --mono:"JetBrains Mono",monospace;
  /* Regler-Variable für Phase 6 */
  --hero-pad-top:130px; --hero-pad-bottom:80px;
  --hero-city-opacity:.45; --hero-city-fade-top:.55;
  --h1-min:48px; --h1-max:104px;
  --section-pad:104px;
  --radius:14px; --wrap:1120px; --gutter:44px; --gutter-mob:22px;
  --marquee-speed:42s;
  /* Konstante dunkle Flächen (Kontakt-Sektion, Scoping-Box) — in beiden Themes dunkel */
  --panel:#1E1E1E; --panel-fg:#FAF9FC;
  /* Hero-Fade-Farbe als RGB-Tripel, wird im Dark Mode überschrieben */
  --fade-rgb:250,249,252;
}

/* --- Dark Mode --- */
html[data-theme="dark"] {
  --bg:#131118; --surface:#1B1723; --ink:#F4F2F8; --soft:#B7B1C4; --line:#37313F;
  --fade-rgb:19,17,24;
}
/* Lila als Text ist auf Dunkel zu schwach (AA): Akzente auf hellen Lila-Ton umleiten.
   Regeln aus PRODUCT.md: #7A11B4 auf Dark nur als Fläche, Text-Akzent #B47CE8. */
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .links a.pri,
html[data-theme="dark"] .svc .no,
html[data-theme="dark"] .card .client,
html[data-theme="dark"] .case-back,
html[data-theme="dark"] details summary::after { color:var(--lilac-text); }
html[data-theme="dark"] .links a.pri { border-color:var(--lilac-text); }
html[data-theme="dark"] .links a.pri:hover { color:#E3C5FF; border-color:#E3C5FF; }
html[data-theme="dark"] .stat b i { color:var(--lilac-text); }
html[data-theme="dark"] .case-meta b { color:var(--lilac-text); }
html[data-theme="dark"] .case-nav a b { color:var(--lilac-text); }
/* Scoping-Box: im Dark Mode als dunkle Lila-Flaeche (Marke als Flaeche, nie als Text) */
html[data-theme="dark"] .box.pri { background:linear-gradient(160deg, #2A1236 0%, #1F0C29 100%); border-color:#3D2066; }
html[data-theme="dark"] .box.pri .kicker { color:var(--lilac); }
html[data-theme="dark"] .box.pri .btn { background:var(--purple); color:#fff; }
html[data-theme="dark"] .box.pri .btn:hover { background:var(--purple-deep); }
/* Kontakt-Sektion im Dark leicht anheben, damit sie nicht im Seiten-BG versinkt */
html[data-theme="dark"] .work { background:#1B1722; }

::selection { background:var(--purple); color:#fff; }
html { scroll-behavior:smooth; }
body { font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.62; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--purple); outline-offset:3px; border-radius:2px; }
.dark :focus-visible { outline-color:var(--lilac-text); }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.kicker { font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--purple); display:block; }
.dark .kicker { color:var(--lilac-text); }

/* --- Header / Hero --- */
header { padding:var(--hero-pad-top) 0 var(--hero-pad-bottom); position:relative; overflow:hidden; }
header .city { position:absolute; inset:0; background:url("../img/counters-bg.jpg") center 35%/cover no-repeat; opacity:var(--hero-city-opacity); pointer-events:none; }
header .city-fade { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--fade-rgb),var(--hero-city-fade-top)) 0%, rgba(var(--fade-rgb),0) 30%, rgba(var(--fade-rgb),0) 65%, rgba(var(--fade-rgb),.85) 100%); }
header .inner { position:relative; }
h1 { font-family:var(--display); font-weight:700; font-size:clamp(var(--h1-min),7.5vw,var(--h1-max)); line-height:1; letter-spacing:-0.03em; }
h1 em { font-style:normal; color:var(--purple); }
.lead { color:var(--soft); max-width:640px; font-size:16.5px; margin-top:28px; }
.links { display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
.links a { font-family:var(--mono); font-size:13.5px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:3px; }
.links a:hover { border-color:var(--ink); }
.links a.pri { color:var(--purple); border-color:var(--purple); font-weight:500; }
.links a.pri:hover { color:var(--purple-deep); border-color:var(--purple-deep); }

/* --- Zahlenleiste --- */
.stats { border-top:1px solid var(--panel); border-bottom:1px solid var(--line); }
.stats-in { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { padding:32px 26px; border-right:1px solid var(--line); } .stat:last-child { border-right:0; }
.stat b { font-family:var(--display); font-weight:700; font-size:clamp(32px,4vw,52px); display:block; letter-spacing:-0.02em; }
.stat b i { font-style:normal; color:var(--purple); }
.stat span { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); display:block; margin-top:10px; }

/* --- Sektionen --- */
section.sec { padding:var(--section-pad) var(--gutter) 30px; }
section.sec .wrap { padding-left:0; padding-right:0; }
@media (max-width:880px){ section.sec { padding-left:var(--gutter-mob); padding-right:var(--gutter-mob); } }
h2 { font-family:var(--display); font-weight:700; font-size:clamp(32px,4.4vw,54px); letter-spacing:-0.02em; margin-top:14px; }
p.t { color:var(--soft); max-width:680px; margin-top:18px; font-size:16px; }

/* --- Leistungen --- */
.svcs .svc { display:grid; grid-template-columns:90px 320px 1fr; gap:30px; padding:38px 0; border-top:1px solid var(--line); }
.svcs .svc:last-of-type { border-bottom:1px solid var(--line); }
.svc .no { font-family:var(--mono); font-size:13px; color:var(--purple); padding-top:8px; }
.svc .no small { display:block; color:var(--soft); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-top:4px; }
.svc h3 { font-family:var(--display); font-weight:500; font-size:26px; } .svc p { color:var(--soft); font-size:15px; max-width:560px; }

/* --- Einstieg: Scoping Day / Sanierung --- */
.entry { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.box { border:1px solid var(--line); border-radius:var(--radius); padding:40px; background:var(--surface); display:flex; flex-direction:column; }
.box.pri { background:var(--panel); color:var(--panel-fg); border-color:var(--panel); } .box.pri .kicker { color:var(--lilac-text); }
.box h3 { font-family:var(--display); font-weight:700; font-size:clamp(24px,2.6vw,32px); margin-top:12px; }
.box .claim { font-size:15px; margin-top:10px; color:var(--soft); } .box.pri .claim { color:rgba(250,249,252,.82); }
.box p { font-size:14.5px; margin-top:14px; color:var(--soft); } .box.pri p { color:rgba(250,249,252,.85); }
.box ul { list-style:none; margin-top:16px; }
.box li { font-size:14px; padding:7px 0; border-top:1px solid var(--line); color:var(--soft); }
.box.pri li { border-color:rgba(250,249,252,.22); color:rgba(250,249,252,.9); }
.box .price { font-family:var(--display); font-weight:700; font-size:clamp(36px,4vw,56px); margin-top:auto; padding-top:26px; }
.box .price small { display:block; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-top:8px; }
.box.pri .price small { color:var(--lilac-text); }
.btn { display:inline-block; margin-top:24px; background:var(--purple); color:#fff; font-family:var(--display); font-weight:700; font-size:15.5px; padding:14px 28px; border-radius:8px; text-decoration:none; align-self:flex-start; }
.btn:hover { background:var(--purple-deep); }
.box.pri .btn { background:var(--bg); color:var(--ink); } .box.pri .btn:hover { background:var(--lilac); }

/* --- Cases --- */
.cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
.card { display:block; text-decoration:none; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--surface); transition:border-color .18s, transform .18s; }
.card:hover { border-color:var(--purple); transform:translateY(-3px); }
.card .thumb { height:220px; background-size:cover; background-position:center; }
.card .body { padding:22px 26px 26px; }
.card .client { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--purple); }
.card h3 { font-family:var(--display); font-weight:500; font-size:18.5px; margin-top:8px; line-height:1.3; }
.card p { color:var(--soft); font-size:13.5px; margin-top:8px; }

/* --- Testimonials --- */
.quotes { margin-top:44px; border-top:1px solid var(--line); }
.quote { display:grid; grid-template-columns:180px 1fr; gap:30px; padding:34px 0; border-bottom:1px solid var(--line); }
.quote .who { font-family:var(--mono); font-size:11.5px; color:var(--soft); line-height:1.9; }
.quote .who b { color:var(--ink); font-size:13px; display:block; }
.quote p { font-size:16.5px; max-width:720px; }

/* --- Über mich --- */
.about { display:grid; grid-template-columns:340px 1fr; gap:60px; margin-top:44px; }
.about .port { height:400px; border-radius:13px; background:url("../img/me.jpg") center 22%/cover no-repeat; }
.about .nums { font-family:var(--mono); font-size:12px; color:var(--soft); letter-spacing:.1em; margin-top:16px; line-height:2.1; }
.about .txt p { max-width:620px; margin-top:16px; }
.about .txt p:first-child { margin-top:0; }

/* --- Logo-Marquee --- */
.logo-band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0; margin-top:40px; }
.logo-label { text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin-bottom:22px; }
.marquee { overflow:hidden; width:100%; }
.marquee .logo-track { display:flex; align-items:center; width:max-content; animation:logo-marquee var(--marquee-speed) linear infinite; transform:translateZ(0); backface-visibility:hidden; will-change:transform; }
.marquee:hover .logo-track { animation-play-state:paused; }
@keyframes logo-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.logo-item { padding:0 2.2rem; flex-shrink:0; opacity:.55; transition:opacity .3s ease; display:flex; justify-content:center; }
.logo-item:hover { opacity:1; }
.logo-item img { max-height:48px; max-width:150px; width:auto; height:auto; object-fit:contain; filter:grayscale(100%); transition:filter .3s ease; }
.logo-item:hover img { filter:grayscale(0%); }
/* Dark Mode: dunkle Logos invertieren, helle nur abdunkeln; Hover zeigt das Original */
html[data-theme="dark"] .logo-item img { filter:grayscale(100%); opacity:.6; }
html[data-theme="dark"] .logo-item img.logo-dark { filter:grayscale(100%) invert(100%); }
html[data-theme="dark"] .logo-item:hover img { filter:none; opacity:1; }

/* --- Kontakt (dunkle Sektion) --- */
.work { position:relative; margin-top:100px; padding:120px 0 100px; overflow:hidden; background:var(--panel); color:var(--panel-fg); }
.work .bg { position:absolute; inset:0; background:url("../img/overlay-bg.jpg") center 40%/cover no-repeat; opacity:.14; filter:saturate(.5); }
.work .inner { position:relative; }
.work h2 { color:var(--panel-fg); }
.work p { color:rgba(250,249,252,.75); max-width:520px; margin-top:16px; font-size:16px; }
.work .mail { display:inline-block; margin-top:30px; font-family:var(--mono); font-size:clamp(17px,2.2vw,24px); color:var(--panel-fg); text-decoration:none; border-bottom:2px solid var(--lilac-text); padding-bottom:4px; }
.work .mail:hover { color:var(--lilac-text); }

/* --- Formular --- */
.field { margin-top:18px; }
.field label { display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-bottom:8px; }
.work .field label { color:rgba(250,249,252,.85); }
.field input, .field textarea, .field select { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:13px 15px; font-family:var(--body); font-size:15px; color:var(--ink); }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--purple); outline-offset:1px; border-color:var(--purple); }
.field .check { display:flex; align-items:flex-start; gap:10px; font-family:var(--body); font-size:13.5px; text-transform:none; letter-spacing:0; color:var(--soft); }
.work .field .check { color:rgba(250,249,252,.85); }
.field .check input { width:auto; margin-top:3px; }
.field .check a { color:var(--purple); } .work .field .check a { color:var(--lilac-text); }
.field-error { display:none; font-size:13px; color:#B3261E; margin-top:6px; }
.work .field-error { color:#F2B8B5; }
.field.has-error .field-error { display:block; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color:#B3261E; }
.work .field.has-error input, .work .field.has-error textarea { border-color:#F2B8B5; }
.hp { position:absolute; left:-9999px; }
.form-status { margin-top:14px; font-size:14px; color:var(--soft); }
.form-status.is-error { color:#B3261E; }
.work .form-status { color:rgba(250,249,252,.85); } .work .form-status.is-error { color:#F2B8B5; }
.work .form-status a { color:var(--lilac-text); }
.work form .btn { background:var(--purple); color:#fff; } .work form .btn:hover { background:var(--purple-deep); }
#form-wrap.is-sent form { display:none; }
#form-success h3 { font-family:var(--display); font-size:24px; color:var(--panel-fg); }
#form-success p { max-width:none; }

/* --- Footer --- */
footer { border-top:1px solid var(--line); padding:30px var(--gutter); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); }
footer a { color:var(--soft); text-decoration:none; }
footer a:hover { color:var(--ink); }
.lang-nav { position:fixed; top:18px; right:var(--gutter); font-family:var(--mono); font-size:12px; letter-spacing:.14em; z-index:50; display:flex; gap:8px; align-items:center;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:10px; padding:6px 8px; box-shadow:0 1px 8px rgba(0,0,0,.08); }
.lang-nav a { text-decoration:none; color:var(--soft); padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.lang-nav a:hover { color:var(--purple); border-color:var(--purple); }
html[data-theme="dark"] .lang-nav a:hover { color:var(--lilac-text); border-color:var(--lilac-text); }

/* --- Rechtseiten --- */
.legal { max-width:760px; }
.legal { padding-bottom:100px; }
.legal h1 { font-size:clamp(36px,5vw,56px); margin:60px 0 24px; overflow-wrap:anywhere; }
@media (max-width:880px){ .legal h1 { font-size:clamp(28px,8vw,42px); } }
.legal p:last-child { margin-bottom:40px; }
.legal h2 { font-size:22px; margin-top:40px; }
.legal p, .legal li { color:var(--soft); margin-top:14px; max-width:68ch; }
.legal ul { padding-left:22px; }

/* --- FAQ --- */
details { border-bottom:1px solid var(--line); }
details summary { cursor:pointer; list-style:none; padding:26px 44px 26px 0; position:relative; font-family:var(--display); font-weight:500; font-size:20px; }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:22px; color:var(--purple); transition:transform .2s; }
details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
details .a { padding:0 40px 30px 0; color:var(--soft); max-width:720px; }

@media (prefers-reduced-motion: reduce) {
  .marquee .logo-track { animation:none; flex-wrap:wrap; justify-content:center; width:100%; }
  html { scroll-behavior:auto; }
  .card, .card:hover { transition:none; }
}

@media (max-width:880px){
  :root { --section-pad:72px; }
  .wrap { padding:0 var(--gutter-mob); }
  header { padding-top:88px; }
  .stats-in { grid-template-columns:repeat(2,1fr); }
  .stat { border-right:0; border-bottom:1px solid var(--line); }
  .stat:nth-child(odd) { border-right:1px solid var(--line); }
  .svcs .svc { grid-template-columns:56px 1fr; } .svcs .svc p { grid-column:2; }
  .entry { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr; }
  .about { grid-template-columns:1fr; gap:30px; } .about .port { height:300px; }
  .quote { grid-template-columns:1fr; gap:8px; }
  footer { padding:30px var(--gutter-mob); }
}

/* --- Theme-Toggle --- */
.lang-nav { display:flex; gap:8px; align-items:center; }
.lang-nav .spacer { flex:1; }
.theme-toggle { display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft);
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 12px; cursor:pointer; }
.theme-toggle:hover { color:var(--ink); border-color:var(--ink); }
.theme-toggle svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }
.theme-toggle .icon-sun { display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
/* Ohne JS: Button verstecken */
html.no-js .theme-toggle { display:none; }
@media (max-width:880px){ .theme-toggle { padding:6px 10px; } }

/* --- Case-Detailseite --- */
.case-hero { padding:80px 0 40px; border-bottom:1px solid var(--line); }
.case-hero h1 { font-size:clamp(34px,5vw,64px); }
.case-meta { font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-top:22px; }
.case-meta b { color:var(--purple); font-weight:500; }
.case-body { display:grid; grid-template-columns:1fr 300px; gap:60px; padding:56px 0 30px; }
.case-txt h2 { font-size:24px; margin-top:44px; }
.case-txt h2:first-child { margin-top:0; }
.case-txt p { color:var(--soft); max-width:640px; margin-top:16px; font-size:16px; }
.case-txt ol { margin:16px 0 0 22px; color:var(--soft); max-width:640px; }
.case-txt ol li { margin-top:10px; padding-left:6px; }
.case-side { position:sticky; top:24px; align-self:start; }
.case-side .thumb { height:200px; border-radius:13px; background-size:cover; background-position:center; }
.case-side h3 { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); font-weight:400; margin-top:26px; }
.case-side ul { list-style:none; }
.case-side li { font-size:13.5px; color:var(--soft); padding:9px 0; border-bottom:1px solid var(--line); }
.bp-back { margin:16px 0 0; }
.case-back { display:inline-block; margin:26px 0 0; font-family:var(--mono); font-size:12.5px; color:var(--purple); text-decoration:none; border-bottom:1px solid var(--purple); padding-bottom:2px; }
.case-nav { border-top:1px solid var(--line); margin-top:70px; padding:30px 0 90px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.case-nav a { font-family:var(--display); font-weight:500; font-size:15px; text-decoration:none; color:var(--soft); max-width:44%; }
.case-nav a b { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--purple); margin-bottom:6px; font-weight:400; }
.case-nav a:hover { color:var(--ink); }
@media (max-width:880px){ .case-body { grid-template-columns:1fr; gap:30px; } .case-side { position:static; } .case-nav a { max-width:100%; } }

/* --- Scroll-to-Top-Button --- */
.to-top { position:fixed; right:var(--gutter); bottom:26px; z-index:50; width:46px; height:46px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background .15s, color .15s; }
.to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { background:var(--purple); border-color:var(--purple); color:#fff; }
.to-top svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:880px){ .to-top { right:var(--gutter-mob); } .lang-nav { right:var(--gutter-mob); } }
@media (max-width:880px){ .work { padding:80px var(--gutter-mob); } }