@charset "UTF-8";
/* ==========================================================================
   MC Schrott – Design System V3
   Marke: Grün (Logo), Industrie-Anthrazit, Funken-Orange

   Wichtige Änderungen gegenüber V2:
   • Keine externen Schriften mehr. Es wird nichts von fonts.googleapis.com
     geladen (DSGVO). Wer Oswald/Inter selbst hosten möchte, findet die
     Anleitung in assets/fonts/LIESMICH.md und den fertigen @font-face-Block
     weiter unten (auskommentiert).
   • Alle Animationen respektieren prefers-reduced-motion.
   • Inhalte sind ohne JavaScript vollständig sichtbar (.reveal greift nur,
     wenn <html class="js"> gesetzt ist).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Optional: Schriften selbst hosten.
   1. Oswald + Inter als .woff2 nach assets/fonts/ legen
   2. Diesen Block einkommentieren
   3. In :root --font-display / --font-body die Namen nach vorn stellen

@font-face{
  font-family:"Oswald"; font-style:normal; font-weight:400 700; font-display:swap;
  src:local("Oswald"), url("../fonts/oswald-variable.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:local("Inter"), url("../fonts/inter-variable.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
}
-------------------------------------------------------------------------- */

:root{
  --green:        #6fb42e;
  --green-dark:   #47791c;
  --green-deep:   #35590f;
  --green-light:  #8fd14f;
  --green-pale:   #eef7e2;
  --orange:       #ff8a3d;
  --orange-dark:  #d95f13;

  --ink:          #14170f;
  --ink-soft:     #43483c;
  --ink-mute:     #6a6f61;
  --anthracite:   #1a1c19;
  --anthracite-2: #24261f;
  --steel:        #4a4e45;
  --paper:        #ffffff;
  --paper-2:      #f4f6ef;
  --paper-3:      #e9ede0;
  --line:         #dde2d3;
  --line-soft:    #eaeee2;

  /* Materialfarben – auch in der Preisliste verwendet.
     Alu, Edelstahl und Blei waren einmal drei nahezu gleiche Grautöne; als
     4px-Strich ließen sie sich nicht auseinanderhalten. Jetzt hat jeder eine
     eigene Temperatur: Alu hell und silbrig, Edelstahl blau, Blei violett. */
  --c-kupfer:     #b87333;
  --c-alu:        #8a949c;
  --c-messing:    #c49a26;
  --c-edelstahl:  #5b829f;
  --c-blei:       #6b6480;
  --c-eisen:      #4b4f55;
  --c-misch:      var(--green);

  --font-display: "Oswald", "Fira Sans Condensed", "Roboto Condensed", "Segoe UI Semibold", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --radius:    14px;
  --radius-sm: 9px;
  --radius-xs: 6px;

  --shadow-sm: 0 1px 3px rgba(20,23,15,.07), 0 3px 10px rgba(20,23,15,.05);
  --shadow-md: 0 6px 16px rgba(20,23,15,.09), 0 14px 40px rgba(20,23,15,.08);
  --shadow-lg: 0 20px 60px rgba(20,23,15,.16);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 28px);
  --sp-section: clamp(52px, 7vw, 88px);

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem, .97rem + .15vw, 1.06rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--green-deep); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--green-dark); }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.015em;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:clamp(2rem, 1.4rem + 2.8vw, 3.3rem); }
h2{ font-size:clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3{ font-size:clamp(1.1rem, 1.02rem + .35vw, 1.28rem); }
h4{ font-size:1rem; }
strong,b{ font-weight:650; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-section) 0; }
/* Muss jede display-Regel schlagen: Sonst blieben Elemente sichtbar, die das
   Skript per hidden ausblendet – etwa die Summenzeile des Rechners, die als
   display:flex gesetzt ist und deshalb trotz hidden angezeigt wurde. */
[hidden]{ display:none !important; }
table{ border-collapse:collapse; width:100%; }

:focus-visible{
  outline:3px solid var(--orange-dark);
  outline-offset:2px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--radius-xs) 0;
}
.skip-link:focus{ left:0; color:#fff; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sp-section); }
.section-tight{ padding-block:clamp(34px,5vw,54px); }
.bg-alt{ background:var(--paper-2); }
.bg-dark{ background:var(--anthracite); color:#d6dacd; }
.bg-dark h2,.bg-dark h3{ color:#fff; }
.muted{ color:var(--ink-mute); }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:.78rem; font-weight:600; color:var(--green-dark); margin:0 0 12px;
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--orange); flex:none; }
.section-head{ max-width:720px; margin:0 auto clamp(30px,4vw,46px); text-align:center; }
.section-head .eyebrow{ justify-content:center; }
.section-head.is-left{ margin-inline:0; text-align:left; }
.lede{ font-size:clamp(1.04rem,1rem + .35vw,1.18rem); color:var(--ink-soft); margin-inline:auto; max-width:70ch; }
.section-head.is-left .lede{ margin-inline:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:.95rem; font-weight:500; text-decoration:none;
  padding:13px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer;
  /* Knöpfe brechen um, statt aus ihrem Container zu laufen. Vorher stand hier
     white-space:nowrap, und an drei Stellen musste das einzeln zurückgenommen
     werden (Hinweiskästen, Schrottschere-Kasten). Übersehen wurde dabei der
     Knopf „Abholung vereinbaren: 0172 3930708“ im Abholungs-Abschnitt: 371px
     breit, damit lief /schrotthandel/ auf 375px um 12px über. Als Grundregel
     statt als Einzelfall kann das nicht wieder passieren. */
  white-space:normal; text-align:center; max-width:100%;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.btn-sm{ padding:9px 18px; font-size:.82rem; }
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--green-dark); color:#fff; box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border-color:var(--green); color:var(--green-deep); }
.btn-outline:hover{ background:var(--green); color:#fff; }
.btn-quiet{ background:var(--paper-2); color:var(--ink-soft); border-color:var(--line); }
.btn-quiet:hover{ background:var(--paper-3); color:var(--ink); }
.btn-invert{ background:#fff; color:var(--green-deep); }
.btn-invert:hover{ background:var(--green-pale); color:var(--green-deep); }
.btn-ghost-light{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-ghost-light:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }
.btn-dark{ background:var(--anthracite); color:#fff; }
.btn-dark:hover{ background:var(--anthracite-2); color:#fff; }
@media (prefers-reduced-motion: no-preference){
  .btn:hover{ transform:translateY(-2px); }
}

/* Mehrere Knöpfe nebeneinander. Ohne die Regel stünden zwei .btn als
   Inline-Elemente mit einem Wortabstand von 4px aneinander und lägen bei
   schmalem Fenster ohne Abstand übereinander. .hero-actions und
   .location-actions tun dasselbe mit eigenen Abständen für ihren Ort; dies
   ist die allgemeine Fassung für den übrigen Seitentext. */
.btn-row{ display:flex; flex-wrap:wrap; gap:9px; }

/* Telefonnummer im Knopf auf schmalen Schirmen in eine eigene Zeile.
   Betrifft „Abholung vereinbaren: 0172 3930708“ auf der Startseite und auf
   /schrotthandel/ – der längste Knopf der Seite.

   display:contents auf dem Schreibtisch ist der Kniff: .btn ist inline-flex,
   und JEDES Element darin würde zum Flex-Element mit den 9px gap dazwischen.
   Die Beschriftung bekäme also mitten im Satz eine sichtbare Lücke. Mit
   display:contents verschwindet der Kasten des span, sein Text gehört wieder
   zum umgebenden Textfluss, und der Knopf sieht aus wie vorher. Dasselbe
   Verfahren nutzt .partner-cta-long weiter unten.

   Unter 640px – dieselbe Grenze, an der auch die Raster einspaltig werden –
   wird der span zum Flex-Element über die volle Breite und rückt damit in die
   zweite Zeile. flex-wrap muss dafür am Knopf selbst stehen, sonst bliebe die
   volle Breite wirkungslos. Das row-gap wird zurückgenommen: Die 9px sind als
   Abstand zwischen zwei Knöpfen gedacht, zwischen zwei Zeilen einer
   Beschriftung wären sie zu viel. */
.btn-nummer{ display:contents; }
@media (max-width:640px){
  /* Der seitliche Innenabstand geht von 26px auf 14px zurück. Ohne das bleiben
     bei 375px nur 186px nutzbare Breite, die Beschriftung „Abholung
     vereinbaren:“ braucht aber 205px – sie bräche selbst noch einmal um, und
     der Knopf stünde dreizeilig da („Abholung / vereinbaren: / 0172 3930708“).
     Mit 14px sind es 214px, die Beschriftung passt in eine Zeile und die
     Nummer steht darunter. Von außen ändert sich nichts: Der Knopf ist so
     breit wie sein Nachbar, nur der Text hat innen mehr Platz. */
  .btn-zweizeilig{ flex-wrap:wrap; row-gap:0; padding-inline:14px; }
  .btn-nummer{ display:block; flex:0 0 100%; }
}

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--line); }
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }

.topbar{ background:var(--anthracite); color:#b9bfae; font-size:.82rem; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; padding-block:6px; }
.topbar p{ margin:0; }
.topbar a{ color:var(--green-light); }
.topbar-claim{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-status{ flex:none; display:flex; align-items:center; gap:8px; }
.topbar-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-mute); flex:none; }
.topbar-status .dot.is-open{ background:var(--green-light); box-shadow:0 0 0 3px rgba(143,209,79,.22); }
.topbar-status .dot.is-closed{ background:var(--orange); }
@media (max-width:760px){
  .topbar-claim{ display:none; }
  .topbar-inner{ justify-content:center; }
  /* Der Status darf hier schrumpfen und umbrechen. Sonst gilt weiter oben
     flex:none – nötig, solange der Claim daneben steht, denn der ist der
     Teil, der gekürzt werden soll. Ab hier ist der Claim ausgeblendet und die
     Leiste gehört dem Status allein.
     Ohne diese Regel schob der geschlossen-Text „Alle Standorte geschlossen ·
     Öffnungszeiten ansehen" (305px) die Leiste bei 320px Fensterbreite auf
     321px und erzeugte 1px horizontales Scrollen auf der ganzen Seite. */
  .topbar-status{ flex:0 1 auto; min-width:0; }
}

.nav-bar{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); padding-block:12px; }
/* Das Logo trägt seinen Zusatz „Recycling, Schrotthandel …“ in Weiß – auf dem
   weißen Kopfbereich wäre die Zeile unsichtbar. Deshalb liegt das Logo hier auf
   einer Fläche in der Farbe der Leiste ganz oben (--anthracite), genau wie in
   der Fußzeile. Original-Logofarben bleiben so überall erhalten. */
.brand{ flex:none; display:inline-flex; align-items:center; background:var(--anthracite); padding:8px 12px; border-radius:var(--radius-sm); }
.brand img{ height:44px; width:auto; display:block; }
.nav-links{ margin-inline:auto; }
.nav-links > ul{ display:flex; align-items:center; gap:2px; }
.nav-links a,
.nav-links .nav-parent{
  display:block; padding:10px 12px; border-radius:var(--radius-xs);
  font-family:var(--font-display); text-transform:uppercase; font-size:.88rem;
  letter-spacing:.04em; color:var(--ink-soft); text-decoration:none;
  transition:background .15s, color .15s;
}
.nav-links a:hover{ background:var(--paper-2); color:var(--green-deep); }
/* Menuepunkt ohne eigene Seite (nav-parent): sieht aus wie die anderen, ist
   aber kein Link. Kein hover-Effekt, weil es dort nichts zu klicken gibt. */
.nav-links .nav-parent{ cursor:default; }
.nav-links a.is-active,
.nav-links .nav-parent.is-active{ color:var(--green-deep); background:var(--green-pale); }

.nav-links .has-sub{ position:relative; display:flex; align-items:center; }
.sub-toggle{
  border:0; background:none; cursor:pointer; color:var(--ink-mute);
  font-size:.7rem; line-height:1; padding:10px 6px 10px 0; margin-left:-8px; border-radius:var(--radius-xs);
}
.sub-toggle span{ display:inline-block; transition:transform .18s var(--ease); }
.sub-toggle[aria-expanded="true"] span{ transform:rotate(180deg); }
.subnav{
  position:absolute; top:100%; left:0; min-width:230px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:8px; display:none; z-index:20;
}
.subnav a{ font-size:.85rem; padding:9px 12px; }
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav,
.sub-toggle[aria-expanded="true"] + .subnav{ display:block; }

.nav-toggle{
  display:none; align-items:center; gap:9px; flex:none;
  padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--paper); cursor:pointer;
  font-family:var(--font-display); text-transform:uppercase; font-size:.82rem; letter-spacing:.06em; color:var(--ink);
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{
  display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:.2s var(--ease);
}
.nav-toggle-bars{ position:relative; }
.nav-toggle-bars::before,.nav-toggle-bars::after{ content:""; position:absolute; left:0; }
.nav-toggle-bars::before{ top:-6px; }
.nav-toggle-bars::after{ top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1080px){
  .nav-links a,
  .nav-links .nav-parent{ padding:10px 9px; font-size:.82rem; }
}
@media (max-width:940px){
  .nav-bar{ flex-wrap:wrap; position:relative; }
  .nav-toggle{ display:inline-flex; order:3; margin-left:auto; }
  .nav-links{
    order:4; flex-basis:100%; margin:0;
    display:none; border-top:1px solid var(--line); padding-block:10px;
  }
  .nav-links.is-open{ display:block; }
  .nav-links > ul{ flex-direction:column; align-items:stretch; gap:1px; }
  .nav-links a,
  .nav-links .nav-parent{ padding:13px 12px; font-size:1rem; }
  .nav-links .has-sub{ flex-wrap:wrap; }
  .nav-links .has-sub > a,
  .nav-links .has-sub > .nav-parent{ flex:1; }
  .sub-toggle{ padding:13px 14px; font-size:.85rem; margin:0; }
  .subnav{
    position:static; flex-basis:100%; box-shadow:none; border:0; border-left:2px solid var(--line);
    border-radius:0; margin:0 0 6px 12px; padding:0 0 0 8px;
  }
  .has-sub:hover > .subnav{ display:none; }
  .sub-toggle[aria-expanded="true"] + .subnav{ display:block; }
}
@media (max-width:520px){
  .brand{ padding:6px 10px; }
  .brand img{ height:38px; }
}

/* ---------- Hero (Startseite) ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(1100px 520px at 72% 18%, #30352a 0%, transparent 60%),
    linear-gradient(160deg, #23261f 0%, #1a1c19 55%, #101210 100%);
  padding-block:clamp(56px,8vw,100px);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 60% 40%, #000 30%, transparent 85%);
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; }
.hero h1{ color:#fff; margin-bottom:.35em; }
.hero h1 em{ font-style:normal; color:var(--green-light); }
.hero .lede{ color:#c9cfc0; margin-inline:0; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(143,209,79,.13); border:1px solid rgba(143,209,79,.38); color:var(--green-light);
  padding:7px 15px; border-radius:999px; font-family:var(--font-display);
  text-transform:uppercase; font-size:.76rem; letter-spacing:.1em; margin-bottom:18px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:26px; }
/* Zwei feste Spalten statt umbrechendem Flexbereich: Die vier Punkte sollen
   2 + 2 stehen (Preisliste / Privat- und Gewerbekunden, darunter Demontage /
   Containerdienst). Bei flex-wrap hinge der Umbruch allein an der Spaltenbreite
   und läge je nach Fenstergröße mal nach dem zweiten, mal nach dem dritten
   Punkt. max-content, damit die Spalten so breit sind wie ihr längster Eintrag
   und nicht auf halbe Breite auseinandergezogen werden.
   Unter 520px reicht der Platz nicht für zwei Spalten – dort untereinander. */
.hero-trust{
  display:grid; grid-template-columns:repeat(2, max-content); justify-content:start;
  gap:8px 22px; margin-top:26px; padding:0; font-size:.87rem; color:#a9af9f;
}
@media (max-width:520px){ .hero-trust{ grid-template-columns:1fr; } }
.hero-trust li{ display:flex; align-items:center; gap:8px; }
.hero-trust li::before{ content:"✓"; color:var(--green-light); font-weight:700; }

/* Preis-Teaser-Karte im Hero */
.hero-card{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius); padding:22px 24px; backdrop-filter:blur(6px);
}
.hero-card h2{ color:#fff; font-size:1.05rem; margin-bottom:4px; }
.hero-card > p{ color:#a9af9f; font-size:.84rem; margin-bottom:16px; }
.hero-prices{ display:flex; flex-direction:column; gap:1px; }
.hero-prices li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1);
}
.hero-prices li:last-child{ border-bottom:0; }
.hero-prices .nm{ color:#e3e7dc; font-size:.94rem; }
.hero-prices .pr{ font-family:var(--font-display); font-size:1.22rem; color:var(--green-light); white-space:nowrap; }
.hero-card .card-foot{ margin:16px 0 0; font-size:.8rem; color:#9aa08f; }
.hero-card .card-foot a{ color:var(--green-light); }

@media (max-width:900px){ .hero-inner{ grid-template-columns:1fr; } }

/* ---------- Innenseiten-Hero ---------- */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  padding-block:clamp(34px,5vw,62px);
  background:linear-gradient(140deg, var(--anthracite) 0%, var(--anthracite-2) 100%);
}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:38px 38px;
}
.page-hero > .container{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; margin:0; }
.page-hero .lede{ color:#c4cab9; margin:14px 0 0; }

.breadcrumb{ margin-bottom:14px; font-size:.82rem; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:6px; }
.breadcrumb li + li::before{ content:"›"; margin-right:6px; color:#7d8375; }
.breadcrumb a{ color:var(--green-light); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb [aria-current]{ color:#9aa08f; }

/* ---------- Grids & Karten ---------- */
.grid{ display:grid; gap:clamp(16px,2.2vw,24px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
@media (max-width:1000px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,54px); align-items:start; }
.two-col.is-centered{ align-items:center; }
@media (max-width:880px){ .two-col{ grid-template-columns:1fr; } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.bg-alt .card{ background:var(--paper); }
.card h3{ margin-bottom:8px; }
.card p{ color:var(--ink-soft); font-size:.95rem; }
/* Vergleichskarten „Warum Sortieren bares Geld ist“: nur ein kurzer Satz je
   Karte, der die Differenz nennt – zentriert und durchgehend fett. */
.card p:last-child{ margin-bottom:0; }
.card .icon{
  width:50px; height:50px; border-radius:12px; background:var(--green-pale); color:var(--green-deep);
  display:grid; place-items:center; margin-bottom:15px; font-size:1.35rem;
}
a.card{ display:block; text-decoration:none; color:inherit; }
a.card:hover, .card.is-link:hover{ border-color:var(--green); box-shadow:var(--shadow-md); }
@media (prefers-reduced-motion: no-preference){
  a.card:hover, .card.is-link:hover{ transform:translateY(-3px); }
}
.card-link{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; color:var(--green-deep); font-weight:600; font-size:.9rem; text-decoration:none; }
.card-link::after{ content:"→"; transition:transform .18s var(--ease); }
a.card:hover .card-link::after{ transform:translateX(3px); }

.service-card{ position:relative; overflow:hidden; }
.service-card .num{
  position:absolute; top:12px; right:18px; font-family:var(--font-display);
  font-size:2.6rem; line-height:1; color:var(--paper-3); pointer-events:none;
}
.service-card > *{ position:relative; }
.service-card .num{ z-index:0; }

/* Historie auf /unternehmen/: Anders als die Schrittnummern der .service-card
   ist das Jahr keine Dekoration, sondern der Kern der Aussage. Es steht deshalb
   im Textfluss statt als Wasserzeichen in der Ecke, in --green-deep (8,1:1 auf
   der weißen Karte) und ohne aria-hidden.
   Die Auszeichnung braucht .timeline-card, sonst gewinnt .card p mit Farbe und
   Schriftgröße des Fließtexts. */
.timeline-card .timeline-year{
  font-family:var(--font-display); font-size:clamp(1.5rem,1.3rem + .6vw,1.9rem);
  line-height:1; color:var(--green-deep); margin:0 0 10px;
}

.chip-row{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 0; }
.chip{
  display:inline-block; background:var(--paper-2); border:1px solid var(--line-soft);
  border-radius:999px; padding:5px 13px; font-size:.79rem; color:var(--ink-soft);
}
.chip-strong{ background:var(--green-pale); border-color:#cfe6b4; color:var(--green-deep); font-weight:600; }

/* ---------- Hinweisboxen ---------- */
.note{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--green-pale); border:1px solid #d5e9bd; border-radius:var(--radius);
  padding:20px 22px; margin-block:24px;
}
.note p:last-child{ margin-bottom:0; }
.note-ic{
  flex:none; width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff;
  display:grid; place-items:center; font-weight:700; margin:0; font-size:1.05rem;
}
/* Knöpfe im Hinweiskasten haben weniger Platz als sonst – der Icon-Kreis nimmt
   links rund 56px weg. Der nötige Umbruch steckt seit der Umstellung in .btn
   selbst, hier braucht es keine eigene Regel mehr. */

/* Schutzregel, die derzeit auf keinen Kasten zutrifft – bitte stehen lassen:
   Ein Hinweiskasten in einem dunklen Abschnitt bringt seine eigene helle Fläche
   mit (.note ist blassgrün), erbt aber die helle Schriftfarbe von .bg-dark.
   Das ergibt hellgrau auf Blassgrün, Kontrast 1,3:1 und praktisch unlesbar –
   genau so stand es im Containerdienst-Abschnitt, solange der anthrazit war.
   Wandert wieder ein Kasten in einen dunklen Abschnitt, greift die Regel und
   der Fehler tritt gar nicht erst auf.
   Die Überschriftenzeile ist dabei, weil .bg-dark h2/h3 sonst weiß bliebe. */
.bg-dark .note{ color:var(--ink); }
.bg-dark .note h2, .bg-dark .note h3{ color:var(--ink); }

.note-warn{ background:#fff5ea; border-color:#f6dcbd; }
.note-warn .note-ic{ background:var(--orange-dark); }
.note-neutral{ background:var(--paper-2); border-color:var(--line); }
.note-neutral .note-ic{ background:var(--steel); }

/* Der Statistik-Streifen (.stats) mit den hochzählenden Zahlen ist entfallen –
   er stand nur im Kreislauf-Abschnitt, den es nicht mehr gibt. Mit ihm sind die
   Regeln hier und der Zähler in main.js verschwunden. Falls die Zahlen
   zurückkehren: Sie brauchen einen dunklen Untergrund, --green-light und
   #a9af9f kamen auf Weiß nur auf 1,8:1 bzw. 2,6:1. */

/* ---------- Materialkarten ---------- */
.metal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,2vw,20px); }
.metal-card{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:22px;
  min-height:180px; display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; text-decoration:none; box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.metal-card::before{
  content:""; position:absolute; inset:0; opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size:18px 18px;
}
.metal-card > *{ position:relative; }
.metal-card h3{ color:#fff; font-size:1.12rem; margin-bottom:5px; }
.metal-card p{ font-size:.86rem; color:rgba(255,255,255,.88); margin:0; }
.metal-card .metal-tag{
  align-self:flex-start; font-family:var(--font-display); text-transform:uppercase;
  font-size:.68rem; letter-spacing:.1em; background:rgba(255,255,255,.2);
  padding:4px 11px; border-radius:999px; margin-bottom:10px;
}
.metal-card .metal-price{
  margin-top:12px; font-family:var(--font-display); font-size:1.05rem;
  color:#fff; background:rgba(0,0,0,.24); border-radius:999px; padding:5px 14px; align-self:flex-start;
}
@media (prefers-reduced-motion: no-preference){
  a.metal-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
}
/* Die Kacheln tragen dieselben Materialfarben wie die Streifen der Preisliste:
   oben links der reine Ton, nach unten rechts auf 40 % abgedunkelt. Das hält
   die Abstufung und sorgt dafür, dass die weiße Schrift – sie sitzt in der
   unteren Hälfte – überall mindestens 5:1 Kontrast hat. Ändert sich eine
   Materialfarbe, zieht der helle Punkt der Kachel mit. */
.m-kupfer   { background:linear-gradient(135deg,var(--c-kupfer),#4a2e14); }
.m-alu      { background:linear-gradient(135deg,var(--c-alu),#373b3e); }
.m-messing  { background:linear-gradient(135deg,var(--c-messing),#4e3e0f); }
.m-edelstahl{ background:linear-gradient(135deg,var(--c-edelstahl),#243440); }
.m-blei     { background:linear-gradient(135deg,var(--c-blei),#2b2833); }
.m-eisen    { background:linear-gradient(135deg,var(--c-eisen),#1e2022); }
.m-sonstiges{ background:linear-gradient(135deg,var(--c-misch),#2c4812); }

/* ---------- Standorte ---------- */
.location-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column;
}
/* flex-wrap ist hier keine Kosmetik, sondern behebt einen Layoutfehler, der
   nur außerhalb der Öffnungszeiten auftrat: Die Status-Pille wird erst von
   main.js gefüllt. „Geschlossen · Montag ab 09:00 Uhr“ ist 263px breit und
   konnte als flex:none mit nowrap weder umbrechen noch schrumpfen. Zusammen
   mit dem Ortsnamen ergab das eine Mindestbreite von 406px für diese Zeile und
   447px für die Karte – die Rasterspalte kam damit nie unter 447px.
   Folge: /standorte/ lief bei 1280px um 181px über, die sechs Standortseiten
   und /kontakt/ bei 375px um 70 bzw. 88px. Während der Öffnungszeit („Jetzt
   geöffnet“) und ohne JavaScript trat der Fehler nicht auf – deshalb ist er
   durch alle bisherigen Mobilprüfungen gefallen. */
.location-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.location-card h3{ margin:0; }
.location-card h3 a{ color:inherit; text-decoration:none; }
.location-card h3 a:hover{ color:var(--green-deep); }
.open-badge{
  flex:none; margin:0; font-size:.74rem; font-weight:650; letter-spacing:.04em;
  text-transform:uppercase; padding:4px 11px; border-radius:999px;
  /* Kein nowrap: Auf sehr schmalen Karten muss der Text der Pille umbrechen
     dürfen – siehe Begründung bei .location-head. */
  white-space:normal;
}
.open-badge.is-open{ background:var(--green-pale); color:var(--green-deep); }
.open-badge.is-closed{ background:var(--paper-3); color:var(--ink-mute); }
/* Vorübergehend geschlossen – bewusst NICHT das Grau von .is-closed: Das
   heißt „hat gerade Feierabend, morgen wieder da" und ist der Normalzustand
   an jedem Abend. Hier geht es um eine Ausnahme, wegen der jemand umsonst
   losfährt; sie trägt deshalb die Warnfarbe der Hinweiskästen (.note-warn). */
.open-badge.is-paused{ background:#fff5ea; color:var(--orange-dark); box-shadow:inset 0 0 0 1px #f6dcbd; }
.location-meta{ margin:0; font-size:.93rem; color:var(--ink-soft); }
.location-meta > div{ display:grid; grid-template-columns:9.5rem 1fr; gap:10px; padding:5px 0; }
.location-meta dt{ color:var(--ink-mute); font-size:.86rem; }
.location-meta dd{ margin:0; }
.location-actions{ display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 0; }
@media (max-width:520px){
  .location-meta > div{ grid-template-columns:1fr; gap:0; padding:7px 0; }
}

.hours{ margin:0; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.hours-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 16px; border-bottom:1px solid var(--line-soft); }
.hours-row:last-child{ border-bottom:0; }
.hours-row dt{ font-weight:600; }
.hours-row dd{ margin:0; }
.hours-row.is-today{ background:var(--green-pale); }
.hours-row.is-closed{ color:var(--ink-mute); background:var(--paper-2); }
/* Solange der Standort vorübergehend geschlossen ist, treten die regulären
   Zeiten zurück. Sie bleiben stehen – sie gelten ja wieder, sobald die
   Schließung endet –, aber die grüne Hervorhebung des heutigen Tages muss
   weg: Sie sagt „hier ist heute etwas los" und widerspräche dem Kasten
   darüber. */
.hours.is-paused{ opacity:.72; }
.hours.is-paused .hours-row.is-today{ background:var(--paper-2); }
/* Dasselbe an einem gesetzlichen Feiertag: Die Zeiten stimmen, sie gelten nur
   heute nicht. Der Satz darunter sagt, warum und ab wann wieder. */
.hours.is-holiday .hours-row.is-today{ background:var(--paper-2); }
.hours-note{
  margin:10px 0 0; font-size:.9rem; line-height:1.5;
  color:var(--orange-dark); font-weight:600;
}

/* ---------- Zustimmungs-Dialog ----------
   Liegt unten am Fensterrand statt mittig über der Seite: der Inhalt bleibt
   lesbar, während entschieden wird. Wer den Dialog wegdrückt, soll die Seite
   nicht erst durchschauen müssen, um zu wissen, worüber er entscheidet.

   Die Knöpfe nutzen --green-dark statt --green: weiße Schrift auf --green
   erreicht nur 2,55:1 und verfehlt die 4,5:1 aus WCAG 1.4.3. Bei einem
   Element, an dem eine Rechtsfolge hängt, ist Lesbarkeit keine Kür. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:var(--paper); border-top:3px solid var(--green-dark);
  box-shadow:0 -8px 30px rgba(20,23,15,.18);
  max-height:85vh; overflow-y:auto;
}
.consent-inner{
  max-width:var(--container); margin-inline:auto;
  padding:clamp(18px,2.4vw,26px) var(--gutter);
}
.consent-h{
  font-size:clamp(1.05rem,1rem + .3vw,1.25rem); margin:0 0 .4em;
}
.consent-h:focus-visible{ outline:3px solid var(--orange-dark); outline-offset:4px; }
.consent-d{ margin:0 0 14px; max-width:70ch; }

.consent-opts{ margin:0 0 14px; padding:14px 16px; background:var(--paper-2); border-radius:var(--radius-sm); }
.consent-opt{ margin:0 0 8px; }
.consent-opt:last-child{ margin-bottom:0; }
.consent-opt label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:.94rem; }
.consent-opt input{ margin-top:.25em; flex:none; width:18px; height:18px; accent-color:var(--green-dark); }
.consent-opt input:disabled{ cursor:not-allowed; }
.consent-opt input:disabled + *, .consent-opt input:disabled ~ *{ color:var(--ink-soft); }

.consent-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
/* Zustimmen und Ablehnen sehen gleich aus und stehen gleich groß nebeneinander.
   Ein hervorgehobenes "Akzeptieren" neben einem blassen "Ablehnen" wäre nach
   Art. 7 DSGVO keine freiwillige Einwilligung. */
.consent-actions .btn[data-consent="alle"],
.consent-actions .btn[data-consent="keine"]{
  background:var(--green-dark); color:#fff; border-color:var(--green-dark); min-width:190px;
}
.consent-actions .btn[data-consent="alle"]:hover,
.consent-actions .btn[data-consent="keine"]:hover{ background:var(--green-deep); border-color:var(--green-deep); }

.consent-legal{ margin:0; font-size:.83rem; color:var(--ink-soft); }
.consent-legal a{ color:var(--green-deep); }

@media (max-width:560px){
  .consent-actions{ flex-direction:column; }
  .consent-actions .btn{ width:100%; min-width:0; }
}
/* Auf sehr niedrigen Fenstern darf der Dialog die Seite nicht zudecken. */
@media (max-height:420px){ .consent{ max-height:100vh; } }

/* Widerrufs-Knopf am Ende der Datenschutzerklärung */
.consent-revoke{ margin:26px 0 0; padding:18px 20px; background:var(--paper-2); border-radius:var(--radius-sm); border:1px solid var(--line); }
.consent-revoke p{ margin:0 0 12px; }
.consent-revoke .btn{ background:var(--green-dark); color:#fff; border-color:var(--green-dark); }
.consent-revoke .btn:hover{ background:var(--green-deep); border-color:var(--green-deep); }

/* Karte mit Zwei-Klick-Lösung */
.map-consent{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-2) repeating-linear-gradient(45deg, rgba(0,0,0,.015) 0 12px, transparent 12px 24px);
  min-height:320px; display:grid; place-items:center; overflow:hidden;
}
.map-consent-inner{ max-width:430px; padding:26px; text-align:center; }
.map-consent-ic{ font-size:2rem; margin:0 0 8px; }
.map-consent h3{ font-size:1.05rem; margin-bottom:8px; }
.map-consent p{ font-size:.88rem; color:var(--ink-soft); }
.map-consent-actions{ margin:16px 0 12px; }
.map-consent-alt{ font-size:.82rem; }
.map-consent.is-loaded{ display:block; min-height:0; padding:0; background:none; }
.map-consent iframe{ display:block; width:100%; aspect-ratio:16/10; border:0; }

/* ---------- Preisliste ---------- */
.price-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:16px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  /* Klebt unterhalb der Kopfzeile. Deren Höhe setzt main.js als --header-h,
     damit der Abstand nicht bei jeder Änderung am Kopfbereich nachgeführt
     werden muss; der Rückfallwert entspricht der Höhe auf großen Bildschirmen. */
  margin-bottom:22px; position:sticky; top:calc(var(--header-h, 123px) + 8px); z-index:20;
}
/* Gewählter Standort und Stand – volle Breite, über Suche und Filtern. */
.price-current{ flex:1 1 100%; margin:0; font-size:.9rem; color:var(--ink-soft); }
.price-current strong{ color:var(--ink); }
.price-search{ display:flex; align-items:center; gap:10px; flex:1 1 260px; }
.price-search label{ font-size:.85rem; color:var(--ink-mute); white-space:nowrap; }
.price-search input{ flex:1; min-width:0; }
.price-filters{ display:flex; flex-wrap:wrap; gap:7px; }
.price-filter{
  border:1px solid var(--line); background:var(--paper); border-radius:999px;
  padding:7px 15px; font-size:.83rem; font-family:inherit; color:var(--ink-soft); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.price-filter:hover{ border-color:var(--green); }
.price-filter[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:#fff; }
/* Auf grauem Grund hätte die klebende Leiste dieselbe Farbe wie der Abschnitt –
   beim Scrollen verschwände ihre Kante und Überschriften liefen scheinbar
   ungeschnitten hinein. Deshalb dort weiß, wie die Karten. */
.bg-alt .price-toolbar{ background:var(--paper); }
@media (max-width:760px){ .price-toolbar{ position:static; } }

/* ---------- Standortumschalter der Preisliste ---------- */
/* Der Streifen setzt den dunklen Kopfbereich nach unten fort und wirkt dadurch
   als dessen Bedienzeile - nicht als kleine Fussnote darunter. Das gewaehlte
   Kaestchen leuchtet gruen aus der dunklen Flaeche heraus und ist damit auf den
   ersten Blick zu finden. Kein Abstand nach oben, sonst reisst die Flaeche.
   Beschriftung und Kaestchen mittig, passend zu den zentrierten
   Abschnittsueberschriften der Seite. */
.section-switch{ padding-block:0; background:var(--anthracite); }
.section-switch > .container{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding-block:clamp(16px,2vw,22px);
  border-top:1px solid rgba(255,255,255,.09);
}
.switch-label{
  margin:0; text-align:center;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em;
  font-size:1rem; font-weight:600; color:#fff;
}
.price-locations{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
/* Hinweis auf einen vorübergehend geschlossenen Standort unter der Reihe.
   Der Umschalter steht auf dunklem Grund, deshalb helle Schrift. */
.switch-note{
  margin:12px auto 0; max-width:56ch; text-align:center;
  font-size:.86rem; line-height:1.5; color:#ffd9b8;
}
.price-loc{
  border:1px solid rgba(255,255,255,.28); background:transparent; border-radius:999px;
  padding:7px 15px; font-size:.83rem; font-family:inherit; color:#d6dacd;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.price-loc:hover{ border-color:var(--green-light); color:#fff; }
.price-loc[aria-pressed="true"]{
  background:var(--green); border-color:var(--green); color:#fff; font-weight:600;
  box-shadow:0 0 0 3px rgba(111,180,46,.22);
}
.price-loc:focus-visible{ outline:2px solid var(--green-light); outline-offset:2px; }


/* Sorten, die der gewaehlte Standort nicht annimmt, verschwinden aus der Liste.
   Das uebernimmt row.hidden zusammen mit der bestehenden Regel
   .price-table tr[hidden]{ display:none; } weiter oben. Der Rechner wird beim
   Standortwechsel geleert, deshalb braucht es dort keine Markierung. */

.price-group{ margin-bottom:clamp(30px,4vw,48px); scroll-margin-top:120px; }
.price-group-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.price-group-head h3{ margin:0; font-size:1.3rem; }
.price-group-head .count{ font-size:.82rem; color:var(--ink-mute); }
.price-group > .lead{ color:var(--ink-soft); font-size:.94rem; max-width:75ch; margin-bottom:16px; }
/* Alle Streifen sind gleich stark. Der Messington wirkt trotzdem kräftiger als
   die übrigen – gesättigtes Gelb trägt auf Weiß optisch auf. Deshalb 7px für
   alle, damit die dunklen Töne nicht dagegen abfallen. */
.price-group::before{ content:""; display:block; width:120px; height:7px; border-radius:4px; margin-bottom:14px; background:var(--accent,var(--green)); }
.price-group[data-accent="kupfer"]   { --accent:var(--c-kupfer); }
.price-group[data-accent="alu"]      { --accent:var(--c-alu); }
.price-group[data-accent="messing"]  { --accent:var(--c-messing); }
.price-group[data-accent="edelstahl"]{ --accent:var(--c-edelstahl); }
.price-group[data-accent="blei"]     { --accent:var(--c-blei); }
.price-group[data-accent="eisen"]    { --accent:var(--c-eisen); }
.price-group[data-accent="misch"]    { --accent:var(--c-misch); }

.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
/* Ohne die Nummernspalte kommen Bezeichnung und Preis auch auf 320px-Schirmen
   nebeneinander unter – die Mindestbreite darf deshalb klein bleiben. Der
   waagerechte Überlauf im .table-wrap bleibt als Netz bestehen. */
.price-table{ min-width:280px; font-size:.95rem; }
.price-table caption{ text-align:left; padding:14px 18px; font-size:.85rem; color:var(--ink-mute); border-bottom:1px solid var(--line-soft); }
.price-table th, .price-table td{ padding:12px 18px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.price-table thead th{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem;
  color:var(--ink-mute); background:var(--paper-2); border-bottom:1px solid var(--line); position:sticky; top:0;
}
.price-table tbody tr:last-child td{ border-bottom:0; }
.price-table tbody tr:hover{ background:var(--paper-2); }
.price-table .col-price{ text-align:right; white-space:nowrap; font-family:var(--font-display); font-size:1.08rem; }
.price-table td.col-price{ color:var(--green-deep); }
.price-table td.col-price.is-request{ color:var(--ink-mute); font-family:var(--font-body); font-size:.9rem; font-style:italic; }
.price-table td.col-price.is-negative{ color:var(--orange-dark); }
.price-table .item-desc{
  display:block; max-width:46ch; margin-top:4px;
  font-size:.82rem; font-weight:400; line-height:1.45; color:var(--ink-mute);
}
.price-table .item-note{ display:block; font-size:.8rem; color:var(--ink-mute); margin-top:3px; font-style:italic; }
.price-table tr[hidden]{ display:none; }
.price-empty{ padding:28px; text-align:center; color:var(--ink-mute); }

/* ---------- Rechner ---------- */
.calc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.6vw,30px); }
.calc-row{ display:grid; grid-template-columns:1fr 8rem auto; gap:12px; align-items:end; }
@media (max-width:640px){ .calc-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.84rem; color:var(--ink-soft); font-weight:600; }
.field .hint{ font-size:.78rem; color:var(--ink-mute); }
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],select,textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:.96rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .15s, box-shadow .15s;
}
input:hover,select:hover,textarea:hover{ border-color:#c6cdb8; }
input:focus,select:focus,textarea:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(111,180,46,.18); outline:none; }
textarea{ resize:vertical; min-height:130px; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-mute) 50%),linear-gradient(135deg,var(--ink-mute) 50%,transparent 50%); background-position:calc(100% - 18px) 51%, calc(100% - 13px) 51%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px; }

.calc-list{ margin:22px 0 0; border-top:1px solid var(--line); }
.calc-list li{ display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.calc-list .ci-name{ font-size:.94rem; }
.calc-list .ci-name small{ display:block; color:var(--ink-mute); font-size:.8rem; }
.calc-list .ci-sum{ font-family:var(--font-display); font-size:1.1rem; color:var(--green-deep); white-space:nowrap; }
.calc-list .ci-sum.is-negative{ color:var(--orange-dark); }
.calc-remove{ border:0; background:var(--paper-2); color:var(--ink-mute); border-radius:50%; width:30px; height:30px; cursor:pointer; font-size:1rem; line-height:1; }
.calc-remove:hover{ background:var(--orange-dark); color:#fff; }
.calc-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:18px; padding:18px 20px; background:var(--green-pale); border-radius:var(--radius-sm);
}
.calc-total span{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; color:var(--green-deep); }
.calc-total b{ font-family:var(--font-display); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem); color:var(--green-deep); line-height:1; }
.calc-empty{ color:var(--ink-mute); font-size:.9rem; padding:18px 0 0; }
.no-js .js-only{ display:none !important; }
.js .no-js-only{ display:none !important; }

/* ---------- FAQ (details/summary – funktioniert ohne JS) ---------- */
.faq-list{ max-width:860px; margin-inline:auto; border-top:1px solid var(--line); }
.section-head.is-left + .faq-list{ margin-inline:0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:19px 4px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:1.03rem; letter-spacing:.01em; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--green-pale); color:var(--green-deep);
  display:grid; place-items:center; font-size:1.15rem; line-height:1;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.faq-item[open] summary::after{ content:"+"; transform:rotate(45deg); background:var(--green); color:#fff; }
.faq-item summary:hover{ color:var(--green-deep); }
.faq-a{ padding:0 4px 22px; color:var(--ink-soft); max-width:80ch; }
.faq-a p:last-child{ margin-bottom:0; }
.faq-cat{
  display:inline-block; font-family:var(--font-display); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--green-deep); background:var(--green-pale);
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
/* scroll-margin-top hält die Rubriküberschrift beim Sprung aus der klebenden
   Kopfzeile heraus. Vorher stand hier fest 110px – die Kopfzeile ist aber 123px
   hoch, die Pille „Preise & Ankauf“ verschwand also darunter. Seit jede
   Unterseite über den Knopf am Seitenende gezielt hierher springt, ist das kein
   Randfall mehr. --header-h setzt main.js aus der tatsächlichen Höhe; der
   Rückfallwert gilt, solange kein JavaScript läuft. */
.faq-block{ margin-bottom:clamp(28px,3.5vw,44px); scroll-margin-top:calc(var(--header-h, 123px) + 16px); }

/* ---------- Knopf „Häufige Fragen zu diesem Thema" ----------
   Steht auf jeder Seite außer /faq/ als letzter Abschnitt in <main>, direkt
   über der Fußzeile. Ein schmaler Streifen, kein Inhaltsabschnitt: Er nimmt
   deshalb weder am Wechsel weiß/grau teil (der Generator hängt ihn erst nach
   der Vergabe an) noch am vollen Abschnittsabstand – sonst stünde vor der
   Fußzeile eine leere Fläche von zwei Abschnittshöhen.
   Die Trennlinie oben grenzt ihn vom Inhalt ab, ohne eine weitere Farbfläche
   einzuführen. */
.faq-cta{ padding-block:clamp(26px,3.4vw,40px); border-top:1px solid var(--line-soft); }
.faq-cta > .container{ display:flex; justify-content:center; }
/* Endet die Seite auf einer grauen Fläche, trennt schon der Farbwechsel – eine
   Linie obendrauf wäre eine zweite Kante an derselben Stelle. */
.bg-alt + .faq-cta, .bg-dark + .faq-cta{ border-top:0; }

/* ---------- Eiserner Sponsor 2026/27 (Klassennamen: siehe unionLogo) ---------- */
/* Anthrazit, weil das gelieferte Lockup in der weißen Fassung auf dunklem Grund
   am ruhigsten steht – Rot auf Grün wäre neben der Hausfarbe unruhig geworden,
   und umfärben dürfen wir das Zeichen nicht.
   Das Logo bekommt bewusst KEINEN eigenen Rahmen, Schatten oder Farbkasten:
   der Schutzraum steckt bereits in der gelieferten Datei. */
.union-band{
  background:var(--anthracite); color:#d6dacd; border-radius:var(--radius);
  padding:clamp(24px,3.4vw,38px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,36px); flex-wrap:wrap;
}
.union-band > div{ flex:1 1 380px; }
/* Kleiner als die übrigen H2 der Seite und kleiner als vorher (war
   clamp(1.3rem,1.1rem + .8vw,1.7rem) = 27 px): Seit Eyebrow und zweiter Satz
   aus dem Kasten heraus sind, soll das Lockup links das dominierende Element
   sein, nicht die Überschrift. Der Umbruch bleibt bei zwei Zeilen – ein Satz
   pro Zeile –, weil die Schrift kleiner und nicht größer wird.
   Die untere Grenze liegt bewusst bei 1.25rem: darunter geriete die Überschrift
   auf schmalen Bildschirmen zu nah an den Fließtext daneben. */
.union-band h2{ color:#fff; font-size:clamp(1.25rem,1.05rem + .5vw,1.45rem); margin-bottom:10px; }
.union-band p{ max-width:62ch; margin:0; }
.union-band strong{ color:#fff; }
/* Der Link im Absatz trägt sonst --green-deep und käme auf dem dunklen Grund auf
   rund 2:1 – dasselbe Problem wie bei der .eyebrow zwei Regeln weiter unten.
   Weiß mit halbdeckender Unterlinie: als Link erkennbar, ohne den Absatz zu
   zerreißen. Beim Überfahren wird die Linie deckend, die Farbe bleibt – ein
   Farbwechsel wäre auf dieser Fläche der schwächere Hinweis. */
.union-band p a{ color:#fff; text-decoration-color:rgba(255,255,255,.55); }
.union-band p a:hover,
.union-band p a:focus-visible{ color:#fff; text-decoration-color:#fff; }
/* Die eyebrow-Pille ist auf hellen Grund abgestimmt (grüner Text auf blassgrün)
   und wäre hier kaum lesbar. */
/* Die eyebrow trägt sonst --green-dark (#47791c) – auf dunklem Grund knapp
   über 2:1 und damit nicht lesbar. Gilt für beide Kästen im Kopfbereich. */
.union-band .eyebrow,
.hero-partner .eyebrow{ background:rgba(255,255,255,.09); color:#cfd6c4; }
.union-logo{ flex:0 0 auto; margin:0; }
.union-logo img{ display:block; width:clamp(210px,26vw,300px); height:auto; }
.union-actions{ margin:0; flex:0 1 auto; }
.union-actions .btn{ white-space:normal; text-align:center; max-width:100%; }
/* Auf dunklem Grund braucht der Umriss-Knopf helle Kontur und Schrift. */
.union-band .btn-outline{ border-color:rgba(255,255,255,.45); color:#fff; }
.union-band .btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
@media (max-width:880px){
  .union-band{ justify-content:flex-start; }
  .union-actions{ flex:1 1 100%; }
  .union-actions .btn{ width:100%; }
}

/* ---------- Kästen im Fuß des Kopfbereichs (Union, Schrottschere) ---------- */
/* Beide liegen dort auf dem dunklen Verlauf des Heros (#23261f → #1a1c19 →
   #101210). Ihre eigenen Flächen funktionieren dort nicht: die anthrazitfarbene
   des Union-Kastens wäre stellenweise deckungsgleich mit dem Untergrund, die
   helle des Schrottschere-Kastens brächte dunkle Schrift auf dunklen Grund.
   Beide bekommen deshalb dieselbe aufgehellte Fläche mit feiner Kontur – so
   lesen sie sich auch als zusammengehöriges Paar.
   z-index wie .hero-inner, sonst läge das Raster aus .hero::before darüber. */
.hero-union, .hero-partner, .hero-notes{ position:relative; z-index:2; margin-top:clamp(32px,4.5vw,52px); }

/* Containerdienst und kostenlose Abholung im Fuß des Kopfbereichs.
   Anders als der Union- und der Schrottschere-Kasten behalten diese beiden ihre
   eigene helle Fläche – .note ist blassgrün, .note-neutral hellgrau. Auf .hero
   gilt aber color:#fff. Ohne diese Regel stünde weiße Schrift auf blassgrünem
   Grund: rund 1,3:1 und praktisch unlesbar. Es ist derselbe Fall, den weiter
   oben .bg-dark .note abfängt – der Kopfbereich trägt die Klasse nur nicht.
   Die Überschriftenzeile ist dabei, weil sonst .hero h2/h3 gewinnen würde. */
.hero .note{ color:var(--ink); }
.hero .note h2, .hero .note h3{ color:var(--ink); }
/* Der erste Kasten steht direkt unter dem Schrottschere-Kasten; .note bringt
   oben eigene 24px mit, die sich mit dem margin-top von .hero-notes addieren.
   Der Abstand zwischen den beiden Kästen bleibt erhalten. */
.hero-notes .note:first-child{ margin-top:0; }
.hero-notes .note:last-child{ margin-bottom:0; }
.hero-union .union-band,
.hero-partner .partner-band{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
}
/* Der grüne Balken links ist das Erkennungsmerkmal des Schrottschere-Kastens
   und bleibt – die Kurzschreibweise border oben überschreibt ihn sonst. */
.hero-partner .partner-band{ border-left:4px solid var(--green); }
.hero-partner .partner-band h2{ color:#fff; }
/* --ink-mute (#6a6f61) ist ein dunkles Grau für helle Flächen und käme hier auf
   3,25:1. Die Auszeichnung braucht .partner-band mit, weil die Regel
   `.partner-band .partner-note` weiter unten in dieser Datei steht und bei
   gleicher Spezifität sonst gewinnt. */
.hero-partner .partner-band .partner-note{ color:#a9b0a0; }
.hero-partner .btn-outline{ border-color:rgba(255,255,255,.45); color:#fff; }
.hero-partner .btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* Lockup im Kopfbereich der Sponsoring-Detailseite (dort ebenfalls anthrazit). */
.hero-logo{ margin:20px 0 0; }
.hero-logo img{ display:block; width:clamp(200px,30vw,280px); height:auto; }

/* Lockup anstelle des Emoji-Icons in einer Sponsoring-Karte.
   Höhe und Außenabstand sind exakt die von .card .icon (50px + 15px): In der
   Kachelreihe stehen Karten mit Logo neben Karten mit Emoji, und die
   Überschriften müssen auf einer Linie beginnen. Deshalb wird die Höhe gesetzt
   und die Breite läuft mit – nicht umgekehrt. */
.card-logo{ display:block; height:50px; margin-bottom:15px; }
.card-logo img{ display:block; height:50px; width:auto; }
/* Im Kästchen „Auf einen Blick“ sitzt das Logo neben der Überschrift, dort
   gilt die Höhe der Zeile, nicht die der Kachelreihe. */
.card-logo.is-inline{ height:auto; margin:0; flex:0 0 auto; }
.card-logo.is-inline img{ height:auto; width:64px; }

/* ---------- Partnerhinweis (Schrottschere) ---------- */
/* Steht auf der Startseite als erster Block nach dem Kopfbereich, direkt unter
   dem Union-Kasten. Ruhige Fläche statt Farbverlauf: Das Angebot richtet sich
   an Schrotthändler, nicht an die Haupt-Zielgruppe der Startseite.
   Der frühere padding-top:0 stammte aus der Zeit, als direkt darüber das grüne
   CTA-Band stand – ohne dieses Band saß das Kästchen sonst hart auf der Kante
   des Abschnitts darüber. Jetzt trägt es den normalen Abschnittsabstand. */
.partner-band{
  background:var(--paper-2); border:1px solid var(--line);
  border-left:4px solid var(--green); border-radius:var(--radius);
  padding:clamp(24px,3.4vw,38px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,36px); flex-wrap:wrap;
}
.partner-band h2{ font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin-bottom:10px; }
.partner-band p{ max-width:62ch; margin:0; }
.partner-band > div{ flex:1 1 420px; }
.partner-band .partner-note{ margin:10px 0 0; font-size:.85rem; color:var(--ink-mute); }
.partner-actions{ margin:0; flex:0 1 auto; }
/* Der Knopftext ist lang. Auf schmalen Bildschirmen bleibt nur die Adresse
   stehen; umbrechen darf er ohnehin, das steckt seit der Umstellung in .btn. */
/* display:contents, damit der erste Teil kein eigenes Flex-Element im Knopf
   wird – sonst käme zwischen „auf“ und der Adresse der Flex-Abstand statt
   eines normalen Leerzeichens. */
.partner-cta-long{ display:contents; }
@media (max-width:560px){ .partner-cta-long{ display:none; } }
/* Bei 320px steht die Adresse als ein einziges, unteilbares Wort im Knopf –
   ohne schmalere Innenabstände drückt sie ihn über den Kastenrand. */
@media (max-width:380px){ .partner-actions .btn{ padding-inline:16px; font-size:.86rem; } }

/* ---------- Formulare ---------- */
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.6vw,30px); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-stack{ display:flex; flex-direction:column; gap:18px; }
fieldset{ border:0; padding:0; margin:0; min-width:0; }
legend{ font-size:.84rem; font-weight:600; color:var(--ink-soft); padding:0; margin-bottom:9px; }
.check-row{ display:flex; flex-wrap:wrap; gap:8px; }
.check-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:8px 15px; font-size:.88rem; cursor:pointer; }
.check-pill:hover{ border-color:var(--green); }
.check-pill input{ accent-color:var(--green); width:16px; height:16px; }
.check-pill:has(input:checked){ background:var(--green-pale); border-color:var(--green); color:var(--green-deep); font-weight:600; }
.form-note{ font-size:.83rem; color:var(--ink-mute); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-feedback{ margin:0; padding:14px 18px; border-radius:var(--radius-sm); font-size:.92rem; }
.form-feedback.is-ok{ background:var(--green-pale); color:var(--green-deep); }
.form-feedback.is-err{ background:#fff2ea; color:var(--orange-dark); }

/* ---------- Social ---------- */
.social-strip{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.social-pill{
  display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:11px 22px 11px 11px; text-decoration:none; color:inherit;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.social-pill:hover{ box-shadow:var(--shadow-sm); border-color:var(--green); color:inherit; }
@media (prefers-reduced-motion: no-preference){ a.social-pill:hover{ transform:translateY(-2px); } }
.social-pill .ic{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--green-pale); color:var(--green-deep); display:grid; place-items:center; font-weight:700; }
.social-pill b{ display:block; font-size:.92rem; }
.social-pill small{ display:block; font-size:.79rem; color:var(--ink-mute); }
.social-pill.is-soon{ opacity:.6; }
.social-pill.is-soon .ic{ background:var(--paper-3); color:var(--steel); }

/* ---------- Prosa (Rechtstexte) ---------- */
.prose{ max-width:78ch; }
.prose h2{ margin-top:1.9em; font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); }
.prose h3{ margin-top:1.5em; font-size:1.05rem; text-transform:none; letter-spacing:0; font-family:var(--font-body); font-weight:650; }
.prose ul{ list-style:disc; padding-left:1.3em; margin:0 0 1em; }
.prose ol{ list-style:decimal; padding-left:1.4em; margin:0 0 1em; }
.prose li{ margin-bottom:.4em; }
.prose address{ font-style:normal; }
.toc{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin-bottom:32px; }
.toc h2{ margin:0 0 10px; font-size:1rem; }
.toc ol{ list-style:decimal; padding-left:1.3em; columns:2; column-gap:34px; }
.toc li{ margin-bottom:5px; font-size:.9rem; }
@media (max-width:640px){ .toc ol{ columns:1; } }

/* ---------- Footer ---------- */
.site-footer{ background:var(--anthracite); color:#adb2a4; padding:clamp(44px,6vw,68px) 0 22px; margin-top:0; }
/* Platz für den Nach-oben-Knopf: er schwebt unten rechts und läge sonst genau
   auf der Zeile mit Impressum/Datenschutz. Nur mit JS, denn nur dann gibt es
   den Knopf überhaupt. */
.js .site-footer{ padding-bottom:82px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(24px,3vw,40px); }
.footer-grid h2{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-grid a{ color:#a3a897; text-decoration:none; }
.footer-grid a:hover{ color:var(--green-light); text-decoration:underline; }
.footer-grid nav li{ padding:4px 0; font-size:.92rem; }
/* Logo in Originalfarben: das Grün steht mit 7,8:1 auf dem Anthrazit und
   entspricht damit dem Logo im Kopfbereich. Kein invert-Filter mehr, der es
   flach weiß gemacht hat. */
.footer-brand img{ height:38px; width:auto; margin-bottom:14px; }
.footer-brand p{ color:#8e9285; font-size:.88rem; max-width:34ch; }
.footer-contact{ font-family:var(--font-display); font-size:1.05rem; }
.footer-contact a{ color:#fff; }
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; font-weight:700; }
.footer-social a:hover{ background:var(--green); color:#fff; text-decoration:none; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:clamp(30px,4vw,48px); padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.83rem; color:#83887a;
}
.footer-bottom p{ margin:0; }
.footer-bottom ul{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom a{ color:#83887a; text-decoration:none; }
.footer-bottom a:hover{ color:var(--green-light); text-decoration:underline; }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Zurück nach oben ---------- */
/* Erscheint, sobald eine Bildschirmhöhe gescrollt wurde (main.js, Abschnitt 10).
   Ohne JavaScript bleibt der Knopf ausgeblendet – visibility:hidden nimmt ihn
   auch aus der Tab-Reihenfolge, sonst führte ein unsichtbares Ziel den
   Tastaturfokus ins Leere. Der href="#top" ist die Rückfalllösung, falls das
   Skript nicht lädt: Browser springen damit an den Seitenanfang. */
.to-top{
  position:fixed; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:90;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green); color:#fff; font-size:1.4rem; line-height:1; text-decoration:none;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s, background .15s var(--ease);
}
.to-top:hover{ background:var(--green-dark); color:#fff; }
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
@media (prefers-reduced-motion: reduce){
  .to-top{ transition:none; transform:none; }
}

/* ---------- 404 ---------- */
.err-page{ text-align:center; max-width:640px; margin-inline:auto; }
.err-code{ font-family:var(--font-display); font-size:clamp(4rem,10vw,7rem); line-height:1; color:var(--green); margin:0; }

/* ---------- Reveal (nur mit JS, nur ohne Bewegungsreduktion) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
  .js .reveal.is-visible{ opacity:1; transform:none; }
}
/* Letzte Absicherung aus main.js: sofort sichtbar, ohne Übergang */
.js .reveal.is-shown{ opacity:1 !important; transform:none !important; transition:none !important; }

/* ---------- Druck ---------- */
@media print{
  .site-header,.site-footer,.skip-link,.price-toolbar,.map-consent,.calc,.to-top,.no-print{ display:none !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .faq-item .faq-a{ display:block !important; }
  body{ font-size:11pt; color:#000; background:#fff; }
  .page-hero{ background:none; color:#000; padding-block:0 12pt; }
  .page-hero h1,.page-hero .lede{ color:#000; }
  .breadcrumb{ display:none; }
  .section{ padding-block:0 12pt; }
  .table-wrap{ overflow:visible; border:0; }
  .price-table{ min-width:0; font-size:9.5pt; }
  .price-table thead th{ background:#eee; position:static; }
  .price-table .item-desc{ font-size:8pt; color:#444; max-width:none; }
  .price-group{ break-inside:avoid; margin-bottom:14pt; }
  .price-table tr{ break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  .note{ border:1pt solid #999; background:#fff; }
}