/* =========================================================
   DESIGN-TOKENS  —  hier zentral Schrift & Farbe anpassen
   ========================================================= */
:root{
  /* Farben — Schwarz-Weiß mit Orange-Akzent (an Live-Seite orientiert) */
  --bg:#ffffff;        /* Seitenhintergrund (weiß) */
  --surface:#ffffff;   /* helle Flächen / Karten */
  --ink:#141414;       /* Haupttext / nahezu schwarz */
  --muted:#6b6b6b;     /* gedämpfter Text (neutralgrau) */
  --line:#e5e5e5;      /* Trennlinien / Rahmen (hellgrau) */
  --accent:#ff6300;    /* Akzent (Orange, Markenfarbe) */
  --soft:#f2f2f2;      /* zarte Füllfläche (neutralgrau) */

  /* Schrift */
  --font-serif:'Spectral', Georgia, serif;            /* Headlines */
  --font-sans:'Space Grotesk', system-ui, sans-serif; /* Fließtext */
  --font-mono:'Space Mono', monospace;                /* Labels / Kleinschrift */

  /* Layout */
  --maxw:1280px;
  --pad:48px;
  --nav-h:97px; /* Höhe Header: 22 + 52 + 22 + 1 Rand */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.shell{
  max-width:var(--maxw);
  margin:40px auto;
  background:var(--bg);
  border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,0.10), 0 24px 60px -34px rgba(0,0,0,0.35);
  overflow:hidden;
  overflow:clip; /* schneidet ab wie hidden, lässt aber den Sticky Header zu */
}

/* ---------- Navigation ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:22px var(--pad);
  border-bottom:1px solid var(--line);
  /* Sticky Header: bleibt beim Scrollen oben stehen */
  position:sticky; top:0; z-index:50;
  background:var(--bg);
}
/* Anker und Inhaltsverzeichnis rutschen nicht unter den Header */
html{ scroll-padding-top:var(--nav-h); }
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-serif); font-style:italic;
  font-size:22px; font-weight:600; letter-spacing:0.01em;
  flex:none;
}
.brand .dot{ color:var(--accent); }
.brand-logo{ width:52px; height:52px; border-radius:2px; display:block; flex:none; transition:opacity .2s; }
.brand:hover .brand-logo{ opacity:.82; }
.nav-menu{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex:1; }
.nav-links{
  display:flex; align-items:center; gap:22px; font-size:15px; color:var(--muted);
  list-style:none; margin:0; padding:0;
}
.nav-links > li{ position:relative; }
.nav-links a{ transition:color .2s; white-space:nowrap; }
.nav-links a:hover{ color:var(--accent); }
.nav-links a.active{ color:var(--ink); font-weight:600; }
.nav-links .sub a.active{ color:var(--ink); font-weight:600; }
.nav-links .caret{ font-size:10px; }

/* Dropdown */
.nav-links .sub{
  position:absolute; top:100%; left:0; min-width:260px;
  list-style:none; margin:0; padding:8px 0;
  background:var(--bg); border:1px solid var(--line);
  box-shadow:0 14px 34px -14px rgba(0,0,0,0.28);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s, transform .18s, visibility .18s; z-index:40;
}
.nav-links .has-sub:hover .sub,
.nav-links .has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-links .sub li{ display:block; }
.nav-links .sub a{ display:block; padding:10px 20px; font-size:15px; color:var(--muted); }
.nav-links .sub a:hover{ color:var(--accent); background:var(--soft); }

.nav-actions{ display:flex; gap:8px; align-items:center; flex:none; }
.nav-actions .btn{ font-size:13.5px; padding:10px 18px; }
.btn{
  font-family:var(--font-sans); font-size:14px; font-weight:600;
  padding:10px 18px; border-radius:0; cursor:pointer;
  border:1px solid transparent; transition:opacity .2s, background .2s, color .2s;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn-accent{ color:#fff; background:var(--accent); }
.btn-accent:hover{ opacity:.9; }
.btn-ink{ color:#fff; background:var(--ink); }
.btn-ink:hover{ opacity:.9; }
.btn-outline{ color:var(--ink); border-color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:#fff; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; }

/* ---------- Hero ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  border-bottom:1px solid var(--line);
}
.hero-text{ padding:56px var(--pad) 48px; display:flex; flex-direction:column; justify-content:center; }
a.eyebrow{ display:block; width:fit-content; } /* Eyebrow als Rücklink auf die Übersicht */
a.eyebrow:hover{ text-decoration:underline; text-underline-offset:3px; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:22px;
}
.hero h1{
  font-family:var(--font-serif); font-weight:600; font-size:62px;
  line-height:0.98; letter-spacing:-0.02em; margin:0;
}
/* Eyebrow als Teil der H1 (Startseite): sieht aus wie die normale Eyebrow-Zeile */
.hero h1 .eyebrow{ display:block; font-weight:400; line-height:normal; }
.hero h1 em{ font-style:italic; font-weight:400; color:var(--accent); }
.lead{ font-size:17px; line-height:1.65; color:var(--muted); max-width:430px; margin:26px 0 0; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-cta .btn{ padding:15px 26px; font-size:15px; }

.media{
  position:relative; min-height:520px; border-left:1px solid var(--line);
  background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 9px,var(--soft) 9px,var(--soft) 18px);
}
.media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.media-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; border:1px solid var(--muted);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:20px;
}
.media-cap{
  position:absolute; left:20px; bottom:20px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--muted);
  background:var(--surface); padding:6px 10px; border:1px solid var(--line);
}

/* ---------- Ticker ---------- */
.ticker{
  display:flex; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.ticker > div{ flex:1; padding:16px 24px; border-right:1px solid var(--line); }
.ticker > div:last-child{ border-right:0; }

/* ---------- generische Section-Labels ---------- */
.sec{ padding:64px var(--pad); border-bottom:1px solid var(--line); }
.sec-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent);
}
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:34px; gap:16px; }
.sec-head a{ font-size:14.5px; color:var(--muted); }
.sec-head a{ transition:color .2s; }
.sec-head a:hover{ color:var(--accent); }
a.sec-label{ display:inline-block; color:var(--accent); font-size:12px; transition:color .2s; align-self:start; justify-self:start; }
a.sec-label:hover{ color:var(--ink); }

/* ---------- Manifesto ---------- */
.manifesto{ display:grid; grid-template-columns:0.4fr 0.6fr; gap:48px; }
.manifesto .sec-label{ line-height:1.4; }
.manifesto p{
  font-family:var(--font-serif); font-size:30px; font-weight:400;
  line-height:1.32; letter-spacing:-0.01em; margin:0; text-wrap:balance;
}
.manifesto em{ font-style:italic; color:var(--accent); }

/* ---------- Produkte ---------- */
.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; }
.product{ cursor:pointer; }
.product .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.product .thumb{
  position:relative; aspect-ratio:4/5; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 8px,var(--soft) 8px,var(--soft) 16px);
  transition:transform .25s, border-color .2s;
}
.product:hover .thumb{ transform:translateY(-4px); border-color:var(--accent); }
.products:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,1fr); }
.product .cap{
  position:absolute; left:12px; bottom:12px; max-width:calc(100% - 24px);
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.05em; color:var(--muted);
  background:var(--surface); padding:5px 8px; border:1px solid var(--line);
}
.product h3, .product h2{ font-family:var(--font-serif); font-weight:600; font-size:24px; letter-spacing:-0.01em; margin:18px 0 6px; transition:color .2s; }
.product:hover h3, .product:hover h2{ color:var(--accent); }
.product p{ font-size:15px; color:var(--muted); line-height:1.55; margin:0; }

/* ---------- Hinweise (Themen-/Fragenliste) ---------- */
.hinweise-grid{ display:grid; grid-template-columns:0.42fr 0.58fr; gap:48px; align-items:start; }
.hinweise-intro{ font-size:17px; line-height:1.7; color:var(--muted); margin:0; max-width:380px; }
.hinweise-list{ list-style:none; margin:0; padding:0; }
.hinweise-list li{ border-top:1px solid var(--line); }
.hinweise-list li:last-child{ border-bottom:1px solid var(--line); }
.hinweise-list a{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-family:var(--font-serif); font-size:21px; font-weight:500; transition:color .2s; }
.hinweise-list a::after{ content:"→"; font-family:var(--font-sans); font-size:15px; color:var(--muted); transition:color .2s, transform .2s; }
.hinweise-list a:hover{ color:var(--accent); }
.hinweise-list a:hover::after{ color:var(--accent); transform:translateX(3px); }

/* ---------- Galerie (Beispiele-Seite) ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:210px; gap:14px; grid-auto-flow:dense; }
.gallery a{ display:block; overflow:hidden; border:1px solid var(--line); background:var(--soft); cursor:zoom-in; }
.gallery a.port{ grid-row:span 2; }
.gallery a.feat{ grid-column:span 2; grid-row:span 2; }
.gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.gallery a:hover img{ transform:scale(1.04); }
@media (max-width:760px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; } }
.lightbox{ position:fixed; inset:0; background:rgba(18,18,18,0.93); display:none; align-items:center; justify-content:center; z-index:200; padding:32px; cursor:zoom-out; }
.lightbox.open{ display:flex; }
/* Prozent statt vw/vh: bleibt auch mit html-zoom auf großen Bildschirmen im Fenster */
.lightbox img{ max-width:92%; max-height:calc(100% - 110px); object-fit:contain; box-shadow:0 10px 60px rgba(0,0,0,0.5); }
.lightbox .lb-cap{ position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#fff; padding:0 24px; }
.lightbox .lb-title{ font-family:var(--font-serif); font-size:17px; font-weight:500; }
.lightbox .lb-desc{ font-size:14px; opacity:.8; margin-top:3px; }
.lightbox .lb-count{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; opacity:.55; margin-top:9px; }
.lightbox .lb-close{ position:absolute; top:14px; right:26px; color:#fff; font-size:34px; line-height:1; cursor:pointer; z-index:2; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:52px; line-height:1; cursor:pointer; padding:12px 20px; user-select:none; opacity:.75; transition:opacity .2s; z-index:2; }
.lightbox .lb-nav:hover{ opacity:1; }
.lightbox .lb-prev{ left:8px; }
.lightbox .lb-next{ right:8px; }
@media (max-width:460px){ .gallery{ grid-template-columns:1fr; grid-auto-rows:230px; } .gallery a.feat{ grid-column:auto; grid-row:span 1; } .gallery a.port{ grid-row:span 1; } .lightbox{ padding:12px; } .lightbox img{ max-width:100%; } .lightbox .lb-nav{ font-size:38px; padding:8px 12px; } }

/* ---------- Produktionsbeispiele (Bild-Mosaik) ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:190px; gap:16px; grid-auto-flow:dense; }
.mosaic a{ display:block; overflow:hidden; border:1px solid var(--line); }
.mosaic img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.mosaic a:hover img{ transform:scale(1.05); }
.mosaic .m-big{ grid-column:span 2; grid-row:span 2; }

/* ---------- Veredelung ---------- */
.vered{ background:var(--surface); }
.vered-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; }
.vered-row{ display:flex; align-items:baseline; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); }
.vered-row .num{ font-family:var(--font-mono); font-size:13px; color:var(--accent); flex:none; }
.vered-row .name{ font-family:var(--font-serif); font-size:21px; font-weight:500; flex:1; transition:color .2s; }
.vered-row .desc{ font-size:14px; color:var(--muted); }
a.vered-row:hover .name{ color:var(--accent); }

/* ---------- Tiegel feature ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.feature .media{ min-height:440px; border-left:0; border-right:1px solid var(--line); }
.feature-text{ padding:64px var(--pad); display:flex; flex-direction:column; justify-content:center; }
.feature-text h2{ font-family:var(--font-serif); font-weight:600; font-size:38px; line-height:1.05; letter-spacing:-0.015em; margin:14px 0 0; }
.feature-text h2 em{ font-style:italic; color:var(--accent); }
.feature-text p{ font-size:17px; line-height:1.65; color:var(--muted); max-width:420px; margin:20px 0 0; }
.stats{ display:flex; gap:40px; margin-top:34px; }
.stats .num{ font-family:var(--font-serif); font-size:40px; font-weight:600; color:var(--accent); }
.stats .lbl{ font-size:12.5px; color:var(--muted); }

/* ---------- Papiere ---------- */
.papers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.paper{ display:block; }
.paper .swatch{ height:160px; border-radius:3px; overflow:hidden; border:1px solid var(--line); box-shadow:0 2px 4px rgba(0,0,0,0.06); }
.paper .swatch img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
a.paper:hover .swatch img{ transform:scale(1.05); }
.paper .name{ font-family:var(--font-serif); font-size:19px; font-weight:500; margin-top:14px; transition:color .2s; }
a.paper:hover .name{ color:var(--accent); }
.paper .g{ font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:3px; }

/* ---------- Nachhaltigkeit ---------- */
.sustain{
  display:flex; align-items:center; gap:24px; padding:40px var(--pad);
  background:var(--ink); color:var(--bg); border-bottom:1px solid var(--line);
}
.sustain .badge{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--accent); flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-style:italic; font-size:20px; color:var(--accent);
}
.sustain .txt{ flex:1; }
.sustain .txt strong{ font-family:var(--font-serif); font-size:24px; font-weight:500; display:block; }
.sustain .txt span{ font-size:14.5px; opacity:0.7; margin-top:4px; display:block; }
.sustain .btn{ color:var(--ink); background:var(--bg); }
.sustain .btn:hover{ background:var(--accent); color:#fff; }

/* ---------- Statement: Print isn't dead ---------- */
.statement{
  background:var(--ink); color:#fff; text-align:center;
  padding:84px var(--pad); border-bottom:1px solid var(--line);
}
.statement-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:20px;
}
.statement-title{
  font-family:var(--font-serif); font-weight:600; font-size:64px; line-height:1;
  letter-spacing:-0.02em; margin:0;
}
.statement-title em{ font-style:italic; color:var(--accent); }
.statement-sub{
  font-size:17px; line-height:1.65; color:rgba(255,255,255,0.72);
  max-width:540px; margin:24px auto 0;
}
.statement .btn{ margin-top:32px; }

/* ---------- Kontakt CTA ---------- */
.contact{ padding:72px var(--pad); text-align:center; }
.contact h2{ font-family:var(--font-serif); font-weight:600; font-size:46px; line-height:1.05; letter-spacing:-0.02em; margin:0 auto; max-width:620px; text-wrap:balance; }
.contact h2 em{ font-style:italic; color:var(--accent); }
.contact .mail{ margin-top:30px; font-size:16px; padding:16px 30px; }

/* ---------- Inhaltsseiten (an Home angelehnt) ---------- */
.page-hero{ padding:72px var(--pad) 40px; border-bottom:1px solid var(--line); }
.page-hero-inner{ max-width:760px; margin:0 auto; }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero h1{ font-family:var(--font-serif); font-weight:600; font-size:54px; line-height:1.02; letter-spacing:-0.02em; margin:0; }
.page-hero h1 em{ font-style:italic; color:var(--accent); }

/* Split-Kopf: links Thema, rechts Bild (wie Startseite) */
.page-hero.split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); padding:0; border-bottom:1px solid var(--line); }
.page-hero.split .page-hero-text{ padding:56px var(--pad); display:flex; flex-direction:column; justify-content:center; }
.page-hero.split h1{ font-size:46px; }
.page-hero.split .page-hero-text p{ font-size:17px; line-height:1.65; color:var(--muted); max-width:440px; margin:22px 0 0; }
.page-hero.split .page-hero-media{ position:relative; min-height:520px; border-left:1px solid var(--line); overflow:hidden; background:var(--soft); }
.page-hero.split .page-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .page-hero.split{ grid-template-columns:minmax(0,1fr); }
  .page-hero.split .page-hero-media{ min-height:340px; border-left:0; border-top:1px solid var(--line); }
  .page-hero.split h1{ font-size:38px; }
}

.page{ padding:52px var(--pad) 64px; border-bottom:1px solid var(--line); }
.page-inner{ max-width:760px; margin:0 auto; }
.page-inner img{ width:100%; height:auto; display:block; border:1px solid var(--line); margin:26px 0; }
.page-inner h1{ font-family:var(--font-serif); font-weight:600; font-size:44px; line-height:1.06; letter-spacing:-0.02em; margin:0 0 26px; }
.page-inner h2,.page-inner h3,.page-inner h4{ scroll-margin-top:28px; }
.page-inner h2{ font-family:var(--font-serif); font-weight:600; font-size:28px; line-height:1.18; margin:42px 0 14px; }
.page-inner h3{ font-family:var(--font-serif); font-weight:500; font-size:21px; line-height:1.3; margin:30px 0 10px; }
.page-inner h4{ font-family:var(--font-serif); font-weight:600; font-size:19px; line-height:1.35; color:var(--ink); margin:28px 0 8px; }
/* Überschrift eine Ebene höher (saubere Gliederung), sieht aber aus wie vorher */
.page-inner h2.as-h3{ font-weight:500; font-size:21px; line-height:1.3; margin:30px 0 10px; }
.page-inner h2.as-h4, .page-inner h3.as-h4{ font-weight:600; font-size:19px; line-height:1.35; color:var(--ink); margin:28px 0 8px; }
.page-inner p{ font-size:17px; line-height:1.72; margin:0 0 16px; }
.page-inner a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; transition:opacity .2s; overflow-wrap:anywhere; }
.page-inner a:hover{ opacity:.75; }
.page-inner ul, .page-inner ol{ padding-left:20px; margin:0 0 18px; }
.page-inner li{ font-size:17px; line-height:1.72; margin:5px 0; }
.page-inner blockquote{ border-left:3px solid var(--accent); margin:24px 0; padding:6px 0 6px 20px; font-family:var(--font-serif); font-style:italic; font-size:20px; line-height:1.5; color:var(--muted); }
@media (max-width:680px){ .page-hero h1{ font-size:36px; } .page-inner h1{ font-size:34px; } }

/* ---------- Rechtsseiten (AGB / Impressum / Datenschutz) ---------- */
/* Ohne Inhaltsverzeichnis: normale Textspalte. Mit TOC: zweispaltig. */
.page-inner.legal.with-toc{
  max-width:1000px;
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:56px; align-items:start;
}
.page-inner.legal > .legal-body{ min-width:0; }
.page-inner.legal .legal-body > *:first-child{ margin-top:0; }

.legal-toc{ position:sticky; top:calc(var(--nav-h) + 24px); }
.legal-toc-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent);
  padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; margin:0 0 9px; line-height:1.4; }
/* Die Nummern stehen schon im Linktext (I., II. ...), daher kein eigener Zähler */
.legal-toc a{
  display:block; font-size:13.5px; color:var(--muted); text-decoration:none;
}
.legal-toc a:hover{ color:var(--accent); }

.legal-body h2{ padding-top:8px; border-top:1px solid var(--line); }
.legal-body h2:first-child{ border-top:0; padding-top:0; }
ul.legal-list{ list-style:none; padding-left:0; margin:0 0 18px; }
ul.legal-list li{ position:relative; padding-left:20px; }
ul.legal-list li::before{
  content:"—"; position:absolute; left:0; color:var(--accent);
  font-family:var(--font-mono); font-size:13px;
}

@media (max-width:900px){
  .page-inner.legal.with-toc{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .legal-toc{ position:static; border:1px solid var(--line); padding:20px; }
  .legal-toc ol{ columns:2; column-gap:24px; }
}
@media (max-width:600px){ .legal-toc ol{ columns:1; } }

/* ---------- Kontaktseite ---------- */
.contact-grid{
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); gap:0;
  border:1px solid var(--line);
}
.contact-card{ padding:34px 30px; border-right:1px solid var(--line); }
.contact-card:last-child{ border-right:0; }
.contact-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
.contact-card h2{
  font-family:var(--font-serif); font-weight:600; font-size:22px;
  line-height:1.22; letter-spacing:-0.01em; margin:0 0 12px;
}
.contact-addr{ font-size:17px; line-height:1.7; margin:0 0 12px; }
.contact-note{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0; }
.contact-list{ list-style:none; margin:0 0 22px; padding:0; }
.contact-list li{ margin:0 0 14px; }
.contact-key{
  display:block; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.contact-list a{ font-size:16px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
.contact-list a:hover{ color:var(--accent); }
.contact-cta{ margin-top:4px; }
.contact-map{ display:inline-block; margin-top:14px; font-size:14.5px; color:var(--accent); }
.contact-map:hover{ color:var(--ink); }

/* Tablet: zwei Kacheln nebeneinander, Anfahrt darunter über die volle Breite */
@media (max-width:1180px){
  .contact-grid{ grid-template-columns:1fr 1fr; }
  .contact-card:nth-child(2){ border-right:0; }
  .contact-card:last-child{ grid-column:1 / -1; border-top:1px solid var(--line); }
}
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-card{ border-right:0; border-bottom:1px solid var(--line); }
  .contact-card:last-child{ border-bottom:0; border-top:0; }
}

/* ---------- Footer ---------- */
.footer{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  padding:34px var(--pad); border-top:1px solid var(--line);
  background:var(--surface); font-size:14px; color:var(--muted);
}
.footer .brand{ display:flex; align-items:center; gap:10px; font-size:18px; color:var(--ink); }
.footer-id{ display:flex; align-items:center; gap:16px; }
.footer .brand-logo{ width:44px; height:44px; }
.footer .addr{ line-height:1.6; }
.footer .social{ display:flex; gap:18px; }
.footer .social a{ transition:color .2s; }
.footer .social a:hover{ color:var(--accent); }

.footer-legal{
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:center;
  padding:18px var(--pad); border-top:1px solid var(--line); background:var(--surface);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
}
.footer-legal a{ color:var(--muted); transition:color .2s; }
.footer-legal a:hover{ color:var(--accent); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Große Bildschirme: ganze Seite gleichmäßig größer (Schrift, Abstände).
   Damit sie dabei nicht zu breit wird, ist der Kasten hier schmaler. 1180 px ist
   knapp über dem, was die Navigation in einer Zeile braucht (etwa 1160 px). */
@media (min-width:1600px){ :root{ --maxw:1180px; } html{ zoom:1.125; } }
@media (min-width:1900px){ html{ zoom:1.25; } }
@media (min-width:2200px){ html{ zoom:1.4; } }

/* Kasten mit Rand nur, wenn links und rechts mindestens 30 px Platz sind (--maxw + 60) */
@media (max-width:1340px){
  .shell{ margin:0; max-width:none; border-radius:0; box-shadow:none; }
}

/* Kleinere Laptops: Navigation enger, damit alle Punkte in eine Zeile passen */
@media (max-width:1280px){
  .nav{ gap:18px; }
  .nav-menu{ gap:18px; }
  .nav-links{ gap:15px; font-size:14px; }
  .nav-actions .btn{ font-size:13px; padding:9px 14px; }
}

/* Navigation klappt früher zum Burger (viele Menüpunkte).
   Touch-Geräte (iPad quer, große Tablets) bekommen ihn immer, weil die
   Dropdowns nur per Maus-Hover aufgehen. */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  .nav-toggle{ display:block; margin-left:auto; }
  .nav-menu{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:40;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:6px var(--pad) 20px; max-height:calc(100vh - 91px); overflow:auto;
    max-height:calc(100dvh - 91px); overscroll-behavior:contain;
  }
  .nav.open .nav-menu{ display:flex; }
  .nav-links{ flex-direction:column; align-items:stretch; gap:0; width:100%; font-size:15px; }
  .nav-links > li{ border-bottom:1px solid var(--line); }
  .nav-links > li > a{ display:block; padding:14px 2px; }
  .nav-links .caret{ float:right; }
  .nav-links .sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; min-width:0; padding:0 0 10px 14px;
  }
  .nav-links .sub a{ padding:8px 2px; }
  .nav-actions{ margin-top:18px; }
}
@media (max-width:900px){
  :root{ --pad:32px; }
  .hero{ grid-template-columns:minmax(0,1fr); }
  .hero h1{ font-size:48px; }
  .media{ min-height:340px; border-left:0; border-top:1px solid var(--line); }
  .feature{ grid-template-columns:1fr; }
  .feature .media{ border-right:0; border-bottom:1px solid var(--line); }
  .manifesto{ grid-template-columns:1fr; gap:20px; }
  .manifesto p{ font-size:26px; }
  .hinweise-grid{ grid-template-columns:1fr; gap:22px; }
  .products:has(> :nth-child(4):last-child){ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  :root{ --pad:22px; --nav-h:71px; }
  .hero h1 .eb-sep{ display:none; } /* Punkt würde am Zeilenende hängen */
  .nav{ padding-top:13px; padding-bottom:13px; }
  .brand-logo{ width:44px; height:44px; }
  .nav-menu{ max-height:calc(100vh - 71px); max-height:calc(100dvh - 71px); }
  .hero h1{ font-size:40px; }
  .ticker{ flex-wrap:wrap; }
  .ticker > div{ flex:1 1 50%; border-bottom:1px solid var(--line); }
  .products, .products:has(> :nth-child(4):last-child){ grid-template-columns:1fr; }
  .product .thumb{ aspect-ratio:4/3; }
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .mosaic .m-big{ grid-column:span 2; grid-row:span 2; }
  .mosaic > a:last-child:nth-child(even){ grid-column:span 2; }
  .hinweise-list a{ font-size:18px; }
  .vered-grid{ grid-template-columns:1fr; gap:0; }
  .papers{ grid-template-columns:repeat(2,1fr); }
  .paper:last-child:nth-child(odd){ grid-column:span 2; }
  /* Lange deutsche Wörter (Geschäftsbedingungen, Feinstpapiermanufaktur) trennen statt abschneiden */
  h1, h2, h3, h4, .page-inner p, .page-inner li{ hyphens:auto; overflow-wrap:break-word; }
  .sustain{ flex-direction:column; align-items:flex-start; text-align:left; }
  .contact h2{ font-size:34px; }
  .statement-title{ font-size:40px; }
  .footer{ flex-direction:column; }
}
@media (max-width:400px){
  .page-hero h1, .page-inner h1{ font-size:30px; }
  .page-hero.split h1{ font-size:32px; }
  .hero h1{ font-size:36px; }
}

/* Für KI-Assistenten: kopierbarer Prompt */
.ki-prompt{ position:relative; margin:0 0 28px; border:1px solid var(--line); background:var(--soft); }
.ki-prompt pre{ margin:0; padding:56px 20px 20px; font-family:var(--font-mono); font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.ki-prompt .ki-copy{ position:absolute; top:12px; right:12px; font-size:11.5px; padding:7px 14px; cursor:pointer; }

/* Handy: Untertitel der Veredelungsliste (Startseite) unter den Namen statt daneben,
   sonst bricht „Gold · Silber · Kupfer · und mehr“ in mehrere schmale Zeilen um */
@media (max-width:480px){
  .vered-row{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; row-gap:2px; }
  .vered-row .desc{ grid-column:2; }
}