/* ZEVOK — "Das eherne Meer"
   A cast-bronze basin for washing, its rim an open lily, full of clear water.
   Bronze, aqua, linen and navy; Petrona for headings, Urbanist for reading.
   Motion is slow and quiet, never blinks, never covers text or ads, and stops
   entirely under prefers-reduced-motion. Every class is ZEVOK's own (erz-…). */

:root {
  --erz-tiefsee: #081325;
  --erz-navy: #0f1f36;
  --erz-navy-2: #17304f;
  --erz-navy-3: #22426b;
  --erz-bronze-tief: #4a2c12;
  --erz-bronze-dunkel: #6e4420;
  --erz-bronze: #a86e34;
  --erz-bronze-hell: #d9a25f;
  --erz-glanz: #f4d9a8;
  --erz-aqua-tief: #146f74;
  --erz-aqua: #2aa7a5;
  --erz-aqua-hell: #9fe3dc;
  --erz-gischt: #e6f6f2;
  --erz-leinen: #f5efe3;
  --erz-leinen-2: #ece3d1;
  --erz-papier: #fbf8f1;
  --erz-tinte: #1b2638;
  --erz-grau: #4f5a6a;
  --erz-rot: #c60b1e;
  --erz-gelb: #ffc400;
  --erz-breite: 1200px;
  --erz-rand: clamp(16px, 4vw, 40px);
  --erz-serif: "Petrona", "Iowan Old Style", Georgia, serif;
  --erz-sans: "Urbanist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --erz-weich: cubic-bezier(0.22, 0.8, 0.24, 1);
  /* One period of a wave, tiled along every water surface. */
  --erz-welle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5C8 0 16 0 24 5S40 10 48 5V10H0z' fill='%239fe3dc'/%3E%3C/svg%3E");
  --erz-welle-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5C8 0 16 0 24 5S40 10 48 5V10H0z' fill='%23d3f1ec'/%3E%3C/svg%3E");
  /* One lily petal hanging from a rim; tiled, it becomes the basin's lip. */
  --erz-bluete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H36C30 0 25.4 3 22.4 7.6 20.6 10.4 19.2 13.2 18 16 16.8 13.2 15.4 10.4 13.6 7.6 10.6 3 6 0 0 0z'/%3E%3C/svg%3E");
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--erz-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--erz-tinte);
  background-color: var(--erz-papier);
  /* Woven linen: two faint thread directions. */
  background-image:
    repeating-linear-gradient(0deg, rgba(110, 68, 32, 0.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(110, 68, 32, 0.018) 0 1px, transparent 1px 5px);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: var(--erz-aqua-tief); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--erz-bronze-dunkel); }
h1, h2, h3, h4 { font-family: var(--erz-serif); color: var(--erz-navy); line-height: 1.18; letter-spacing: -0.005em; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--erz-aqua); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.erz-tauchsprung {
  position: absolute; left: 1rem; top: -200px; z-index: 200;
  padding: 0.7rem 1.1rem; border-radius: 10px;
  background: var(--erz-aqua-hell); color: var(--erz-navy); font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 30px rgba(8, 19, 37, 0.35);
}
.erz-tauchsprung:focus { top: 1rem; }

/* ── Spanien 2026 ─────────────────────────────────────────────────────── */
.erz-wm {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--erz-tiefsee), var(--erz-navy) 50%, var(--erz-tiefsee));
  border-bottom: 1px solid rgba(217, 162, 95, 0.35);
  color: var(--erz-leinen);
  font-size: 0.86rem; line-height: 1.3;
}
.erz-wm__innen {
  position: relative; z-index: 1;
  max-width: var(--erz-breite); margin: 0 auto; padding: 0.42rem var(--erz-rand);
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
}
.erz-wm__text { margin: 0; letter-spacing: 0.02em; }
.erz-wm__text strong { color: #f2c230; font-weight: 700; }
.erz-wm__pokal { flex: none; width: 22px; height: 28px; filter: drop-shadow(0 0 6px rgba(242, 194, 48, 0.45)); }
.erz-wm__glanz { transform: translateX(0) skewX(-18deg); animation: erz-pokalglanz 5s ease-in-out infinite; }
@keyframes erz-pokalglanz {
  0%, 55% { transform: translateX(0) skewX(-18deg); }
  100% { transform: translateX(58px) skewX(-18deg); }
}
.erz-wm__band {
  flex: none; width: 36px; height: 18px; transform-origin: left center;
  clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 25%, rgba(255, 255, 255, 0.28) 50%, transparent 75%, rgba(0, 0, 0, 0.2)) 0 0 / 24px 100%,
    linear-gradient(180deg, var(--erz-rot) 0 25%, var(--erz-gelb) 25% 75%, var(--erz-rot) 75% 100%);
  animation: erz-flattern 2.8s ease-in-out infinite alternate, erz-falten 1.6s linear infinite;
}
@keyframes erz-flattern {
  from { transform: skewY(-5deg) scaleX(1); }
  to { transform: skewY(4deg) scaleX(0.92); }
}
@keyframes erz-falten { to { background-position: 24px 0, 0 0; } }
.erz-wm__bahn {
  --weg: 86px;
  flex: none; position: relative; width: var(--weg); height: 12px; border-radius: 999px;
  background: linear-gradient(180deg, var(--erz-bronze-tief), var(--erz-bronze-dunkel));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(244, 217, 168, 0.35);
}
.erz-wm__ball { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; animation: erz-rollen 3.4s ease-in-out infinite alternate; }
.erz-wm__ball svg { display: block; width: 14px; height: 14px; }
@keyframes erz-rollen {
  from { transform: translateX(-1px) rotate(0deg); }
  to { transform: translateX(calc(var(--weg) - 13px)) rotate(560deg); }
}
.erz-wm__seifen { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.erz-wm__seifen i {
  position: absolute; bottom: -18px; width: 12px; height: 12px; border-radius: 50%; opacity: 0;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(198, 11, 30, 0.08) 52%, rgba(198, 11, 30, 0.75) 68%, rgba(198, 11, 30, 0.2) 74%, transparent 76%);
  animation: erz-seife 8s linear infinite;
}
.erz-wm__seifen i:nth-child(2n) {
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 196, 0, 0.08) 52%, rgba(255, 196, 0, 0.8) 68%, rgba(255, 196, 0, 0.2) 74%, transparent 76%);
}
.erz-wm__seifen i:nth-child(1) { left: 8%; animation-delay: 0s; }
.erz-wm__seifen i:nth-child(2) { left: 22%; width: 9px; height: 9px; animation-delay: 1.8s; }
.erz-wm__seifen i:nth-child(3) { left: 71%; width: 14px; height: 14px; animation-delay: 3.4s; }
.erz-wm__seifen i:nth-child(4) { left: 86%; width: 10px; height: 10px; animation-delay: 5s; }
.erz-wm__seifen i:nth-child(5) { left: 50%; width: 8px; height: 8px; animation-delay: 6.4s; }
@keyframes erz-seife {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.9; }
  50% { transform: translate(6px, -26px); }
  80% { opacity: 0.6; }
  100% { transform: translate(-4px, -52px); opacity: 0; }
}

/* ── Header ───────────────────────────────────────────────────────────── */
.erz-haupt {
  position: relative; z-index: 20;
  color: var(--erz-leinen);
  background:
    radial-gradient(ellipse 60% 120% at 50% -30%, rgba(159, 227, 220, 0.16), transparent 70%),
    linear-gradient(180deg, var(--erz-navy), var(--erz-tiefsee));
}
.erz-haupt__leiste {
  max-width: var(--erz-breite); margin: 0 auto; padding: 0.95rem var(--erz-rand) 0.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.erz-siegel { display: inline-flex; align-items: center; gap: 0.8rem; color: inherit; text-decoration: none; min-width: 0; }
.erz-siegel__bild { flex: none; width: 52px; height: 52px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); }
.erz-siegel__texte { display: flex; flex-direction: column; min-width: 0; }
.erz-siegel__name {
  font-family: var(--erz-serif); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: 0.16em;
  color: var(--erz-glanz);
  background: linear-gradient(100deg, var(--erz-bronze-hell) 0%, var(--erz-glanz) 40%, #fffaf0 50%, var(--erz-glanz) 60%, var(--erz-bronze-hell) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: erz-lichtlauf 11s ease-in-out infinite;
}
.erz-siegel__zeile { margin-top: 0.3rem; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--erz-aqua-hell); }
.erz-siegel:hover .erz-siegel__zeile { color: #d6f4ef; }
@keyframes erz-lichtlauf {
  0% { background-position: 100% 0; }
  50%, 100% { background-position: 0% 0; }
}

.erz-nebenwege { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.erz-nebenwege a {
  color: rgba(245, 239, 227, 0.86); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  background: linear-gradient(var(--erz-aqua-hell), var(--erz-aqua-hell)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--erz-weich), color 0.3s;
  padding-bottom: 2px;
}
.erz-nebenwege a:hover, .erz-nebenwege a[aria-current] { color: #fff; background-size: 100% 1px; }

.erz-schalter {
  display: none; align-items: center; gap: 0.55rem; flex: none;
  padding: 0.55rem 0.9rem; border-radius: 12px 12px 16px 16px;
  border: 1px solid rgba(217, 162, 95, 0.55); background: rgba(255, 255, 255, 0.04);
  color: var(--erz-leinen); font: 600 0.95rem var(--erz-sans); cursor: pointer;
}
.erz-schalter__wellen { display: grid; gap: 4px; }
.erz-schalter__wellen i {
  display: block; width: 22px; height: 5px;
  background: var(--erz-welle) repeat-x 0 0 / 11px 5px;
  filter: brightness(1.1);
}
.erz-schalter[aria-expanded="true"] .erz-schalter__wellen i { background-image: var(--erz-welle-hell); }

/* The menu: small bronze vessels that fill with water. */
.erz-wasserlauf { max-width: var(--erz-breite); margin: 0 auto; padding: 0.35rem var(--erz-rand) 1.35rem; }
.erz-wasserlauf ul { list-style: none; margin: 0; padding: 0; }
.erz-wasserlauf__reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.erz-wasserlauf__neben { display: none; }
.erz-pegel {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; min-height: 2.6rem;
  padding: 0.5rem 1.05rem; border-radius: 12px 12px 20px 20px;
  border: 1px solid rgba(217, 162, 95, 0.42);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  color: var(--erz-leinen); text-decoration: none; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  transition: color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.erz-pegel::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 100%; height: 140%;
  background:
    var(--erz-welle) repeat-x 0 0 / 48px 10px,
    linear-gradient(180deg, var(--erz-aqua-hell), #5fcac5 40%, var(--erz-aqua)) no-repeat 0 9px / 100% 100%;
  transform: translateY(0);
  transition: transform 0.85s var(--erz-weich);
  animation: erz-wogen 2.4s linear infinite paused;
}
.erz-pegel::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--erz-glanz), transparent); opacity: 0.6;
}
.erz-pegel:hover, .erz-pegel:focus-visible, .erz-pegel[aria-current] {
  color: var(--erz-tiefsee); border-color: var(--erz-aqua-hell);
  box-shadow: 0 6px 18px rgba(42, 167, 165, 0.25);
}
.erz-pegel:hover::before, .erz-pegel:focus-visible::before, .erz-pegel[aria-current]::before {
  transform: translateY(-67%); animation-play-state: running;
}
.erz-pegel:focus-visible { outline-color: var(--erz-aqua-hell); }
@keyframes erz-wogen { to { background-position: 48px 0, 0 9px; } }
.erz-pegel__wort { position: relative; z-index: 1; }
.erz-pegel__perlen { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.erz-pegel__perlen i {
  position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.25);
  opacity: 0;
}
.erz-pegel__perlen i:nth-child(1) { left: 22%; }
.erz-pegel__perlen i:nth-child(2) { left: 52%; width: 4px; height: 4px; }
.erz-pegel__perlen i:nth-child(3) { left: 76%; width: 6px; height: 6px; }
.erz-pegel:hover .erz-pegel__perlen i, .erz-pegel:focus-visible .erz-pegel__perlen i { animation: erz-perle 1.9s ease-in infinite; }
.erz-pegel:hover .erz-pegel__perlen i:nth-child(2), .erz-pegel:focus-visible .erz-pegel__perlen i:nth-child(2) { animation-delay: 0.55s; }
.erz-pegel:hover .erz-pegel__perlen i:nth-child(3), .erz-pegel:focus-visible .erz-pegel__perlen i:nth-child(3) { animation-delay: 1.1s; }
@keyframes erz-perle {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 0.95; }
  70% { transform: translate(2px, -1.6rem); opacity: 0.75; }
  100% { transform: translate(-1px, -2.1rem); opacity: 0; }
}

/* The basin's lip: a band of lily petals in bronze, light passing over it. */
.erz-lilienrand {
  position: relative; z-index: 3; height: 16px; margin-bottom: -16px;
  background: linear-gradient(100deg, var(--erz-bronze-dunkel), var(--erz-bronze) 22%, var(--erz-glanz) 42%, #fff6e0 48%, var(--erz-glanz) 54%, var(--erz-bronze) 74%, var(--erz-bronze-dunkel)) 0 0 / 300% 100%;
  -webkit-mask: var(--erz-bluete) repeat-x 0 0 / 36px 16px;
  mask: var(--erz-bluete) repeat-x 0 0 / 36px 16px;
  animation: erz-lichtlauf 16s ease-in-out infinite;
  filter: drop-shadow(0 3px 2px rgba(8, 19, 37, 0.35));
}

.erz-lesepegel { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 4px; background: rgba(15, 31, 54, 0.12); pointer-events: none; }
.erz-lesepegel i {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--erz-aqua-tief), var(--erz-aqua), var(--erz-aqua-hell));
}

/* ── Shared pieces ───────────────────────────────────────────────────── */
.erz-dachzeile {
  display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--erz-bronze-dunkel);
}
.erz-dachzeile::before, .erz-dachzeile::after {
  content: ""; width: 26px; height: 7px;
  background: var(--erz-welle) repeat-x 0 0 / 13px 7px; filter: hue-rotate(160deg) saturate(0.6) brightness(0.62);
}
.erz-dachzeile--hell { color: var(--erz-glanz); }
.erz-dachzeile--hell::before, .erz-dachzeile--hell::after { filter: none; }

.erz-taste {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.9rem; padding: 0.7rem 1.35rem; border-radius: 14px 14px 22px 22px;
  background: linear-gradient(160deg, #8f5d2c, var(--erz-bronze-dunkel) 60%, #5d391a);
  border: 1px solid rgba(244, 217, 168, 0.65);
  color: #fffaf0; font-weight: 700; text-decoration: none; letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(74, 44, 18, 0.28), inset 0 1px 0 rgba(255, 246, 224, 0.35);
  transition: transform 0.35s var(--erz-weich), box-shadow 0.35s;
}
.erz-taste::after {
  content: ""; position: absolute; z-index: -1; inset: -2px; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 246, 224, 0.4) 50%, transparent 70%);
  transition: transform 0.9s var(--erz-weich);
}
.erz-taste:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(74, 44, 18, 0.34), inset 0 1px 0 rgba(255, 246, 224, 0.4); }
.erz-taste:hover::after { transform: translateX(120%); }
.erz-taste--rand { background: transparent; color: var(--erz-navy); border: 1.5px solid var(--erz-bronze); box-shadow: none; }
.erz-taste--rand:hover { color: var(--erz-navy); background: rgba(217, 162, 95, 0.12); box-shadow: 0 10px 22px rgba(74, 44, 18, 0.14); }
.erz-taste--aqua { background: linear-gradient(160deg, var(--erz-aqua-hell), #6fd3cd); color: var(--erz-tiefsee); border-color: rgba(255, 255, 255, 0.6); }
.erz-taste--aqua:hover { color: var(--erz-tiefsee); }

.erz-ueber { max-width: 760px; margin: 0 auto 2.2rem; text-align: center; }
.erz-ueber__zeile { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--erz-bronze); }
.erz-ueber h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.45rem); font-weight: 600; }
.erz-ueber h2::after {
  content: ""; display: block; width: 110px; height: 12px; margin: 0.8rem auto 0;
  background: linear-gradient(90deg, transparent, var(--erz-bronze) 20%, var(--erz-glanz) 50%, var(--erz-bronze) 80%, transparent);
  -webkit-mask: var(--erz-bluete) repeat-x 0 0 / 22px 12px; mask: var(--erz-bluete) repeat-x 0 0 / 22px 12px;
}
.erz-ueber__text { margin: 0.9rem auto 0; color: var(--erz-grau); max-width: 600px; }
.erz-ueber--hell h2 { color: var(--erz-leinen); }
.erz-ueber--hell .erz-ueber__zeile { color: var(--erz-bronze-hell); }

.erz-pfad ol { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0; font-size: 0.88rem; color: var(--erz-grau); }
.erz-pfad li { display: inline-flex; align-items: center; min-width: 0; }
.erz-pfad li + li::before { content: ""; width: 14px; height: 6px; margin: 0 0.55rem; background: var(--erz-welle) repeat-x 0 0 / 14px 6px; filter: hue-rotate(160deg) saturate(0.6) brightness(0.62); }
.erz-pfad a { color: var(--erz-aqua-tief); text-decoration: none; }
.erz-pfad a:hover { text-decoration: underline; }
.erz-pfad [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }

.erz-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.erz-chips a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.6rem;
  padding: 0.45rem 1rem 0.45rem 0.7rem; border-radius: 999px;
  border: 1px solid rgba(168, 110, 52, 0.38); background: var(--erz-papier);
  color: var(--erz-navy); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  transition: background-color 0.35s, border-color 0.35s, transform 0.35s var(--erz-weich);
}
.erz-chips a:hover { background: var(--erz-gischt); border-color: var(--erz-aqua); transform: translateY(-2px); color: var(--erz-navy); }
.erz-chips a[aria-current] { background: var(--erz-navy); color: var(--erz-leinen); border-color: var(--erz-navy); }
.erz-chips__icon { width: 24px; height: 24px; color: var(--erz-bronze); }
.erz-chips a[aria-current] .erz-chips__icon { color: var(--erz-aqua-hell); }

/* ── Home: the hall ──────────────────────────────────────────────────── */
.erz-halle {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 55% 70% at 78% 45%, rgba(159, 227, 220, 0.32), transparent 70%),
    linear-gradient(180deg, #efe5d1, var(--erz-papier) 85%);
}
.erz-halle::before {
  /* Rings spreading over still water: the hall's geometric ornament. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 76% 48%, rgba(168, 110, 52, 0.12) 0 1px, transparent 1.5px 30px);
  -webkit-mask: radial-gradient(circle at 76% 48%, #000 0 30%, transparent 62%);
  mask: radial-gradient(circle at 76% 48%, #000 0 30%, transparent 62%);
}
.erz-halle__innen {
  position: relative; max-width: var(--erz-breite); margin: 0 auto; padding: 0 var(--erz-rand);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
.erz-halle__titel { margin: 0 0 1rem; font-size: clamp(2.2rem, 4.6vw, 3.55rem); font-weight: 700; line-height: 1.08; }
.erz-halle__titel em {
  font-style: italic; font-weight: 500; color: var(--erz-aqua-tief);
  background: var(--erz-welle) repeat-x 0 100% / 24px 6px; padding-bottom: 0.12em;
}
.erz-halle__claim { margin: 0 0 1rem; font-family: var(--erz-serif); font-size: clamp(1.12rem, 1.8vw, 1.3rem); line-height: 1.5; color: var(--erz-bronze-dunkel); }
.erz-halle__intro { margin: 0 0 1.8rem; color: var(--erz-grau); max-width: 58ch; }
.erz-halle__knoepfe { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }
.erz-halle__bild { margin: 0; }
.erz-bild {
  display: block; width: 100%; height: auto; border-radius: 30px;
  box-shadow: 0 30px 60px rgba(8, 19, 37, 0.32), 0 0 0 1px rgba(217, 162, 95, 0.55), 0 0 0 8px rgba(251, 248, 241, 0.7), 0 0 0 9px rgba(168, 110, 52, 0.35);
}
.erz-halle__bild figcaption { margin-top: 1.1rem; text-align: center; font-family: var(--erz-serif); font-style: italic; font-size: 0.95rem; color: var(--erz-bronze-dunkel); }

.erz-bild__glanz { animation: erz-bronzelicht 10s ease-in-out infinite; transform: translateX(-140px); }
@keyframes erz-bronzelicht {
  0%, 15% { transform: translateX(-140px); }
  70%, 100% { transform: translateX(600px); }
}
.erz-bild__ringe ellipse { transform-box: fill-box; transform-origin: center; opacity: 0; animation: erz-ring 7.5s ease-out infinite; }
.erz-bild__ringe .r2 { animation-delay: 2.5s; }
.erz-bild__ringe .r3 { animation-delay: 5s; }
@keyframes erz-ring {
  0% { transform: scale(0.15); opacity: 0; }
  12% { opacity: 0.7; }
  100% { transform: scale(3.1); opacity: 0; }
}
.erz-bild__perlen circle { opacity: 0; animation: erz-blase 6s ease-in infinite; }
.erz-bild__perlen .b2 { animation-delay: 1.5s; }
.erz-bild__perlen .b3 { animation-delay: 3s; }
.erz-bild__perlen .b4 { animation-delay: 4.5s; }
@keyframes erz-blase {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.9; }
  80% { opacity: 0.6; }
  100% { transform: translateY(-110px); opacity: 0; }
}
.erz-bild__strahlen { animation: erz-atmen 9s ease-in-out infinite alternate; }
@keyframes erz-atmen { from { opacity: 0.55; } to { opacity: 1; } }

/* ── Home: six basins ────────────────────────────────────────────────── */
.erz-becken { max-width: var(--erz-breite); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5.5rem) var(--erz-rand) clamp(3rem, 6vw, 4.5rem); }
.erz-becken__reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.erz-schale {
  position: relative; isolation: isolate; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.6rem 1.5rem 1.7rem; border-radius: 20px 20px 46px 46px;
  background: linear-gradient(180deg, #fffdf8, var(--erz-leinen));
  border: 1px solid rgba(168, 110, 52, 0.32);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 30px rgba(74, 44, 18, 0.08);
  color: var(--erz-tinte); text-decoration: none;
  transition: transform 0.5s var(--erz-weich), box-shadow 0.5s, border-color 0.5s;
}
.erz-schale::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--erz-bronze-dunkel), var(--erz-glanz), var(--erz-bronze-dunkel));
}
.erz-schale__wasser {
  position: absolute; z-index: -1; left: -2px; right: -2px; bottom: 0; height: 100%;
  background:
    var(--erz-welle-hell) repeat-x 0 0 / 60px 12px,
    linear-gradient(180deg, #d3f1ec, rgba(159, 227, 220, 0.75) 60%, rgba(95, 202, 197, 0.6)) no-repeat 0 11px / 100% 100%;
  transform: translateY(86%);
  transition: transform 1.1s var(--erz-weich);
  animation: erz-wogen-breit 4.5s linear infinite paused;
}
@keyframes erz-wogen-breit { to { background-position: 60px 0, 0 11px; } }
.erz-schale:hover, .erz-schale:focus-visible { transform: translateY(-4px); border-color: rgba(42, 167, 165, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 40px rgba(20, 111, 116, 0.18); color: var(--erz-tinte); }
.erz-schale:hover .erz-schale__wasser, .erz-schale:focus-visible .erz-schale__wasser { transform: translateY(42%); animation-play-state: running; }
.erz-schale__nr { position: absolute; top: 1.1rem; right: 1.3rem; font-family: var(--erz-serif); font-size: 2.2rem; font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(168, 110, 52, 0.55); }
.erz-schale__icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--erz-navy-3), var(--erz-navy) 70%);
  box-shadow: 0 0 0 3px var(--erz-bronze-hell), 0 0 0 5px rgba(255, 255, 255, 0.85), 0 0 0 6px rgba(168, 110, 52, 0.4), 0 8px 18px rgba(8, 19, 37, 0.25);
  color: var(--erz-aqua-hell); margin-bottom: 0.4rem;
}
.erz-schale__icon svg { width: 36px; height: 36px; }
.erz-schale__name { font-family: var(--erz-serif); font-size: 1.4rem; font-weight: 700; color: var(--erz-navy); line-height: 1.2; }
.erz-schale__text { font-size: 0.97rem; color: var(--erz-grau); line-height: 1.55; flex: 1; }
.erz-schale__zahl { align-self: flex-start; margin-top: 0.3rem; padding: 0.2rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(20, 111, 116, 0.35); font-size: 0.85rem; font-weight: 700; color: var(--erz-aqua-tief); }

/* ── Home: rules at the rim ──────────────────────────────────────────── */
.erz-rand {
  position: relative; overflow: hidden; color: var(--erz-leinen);
  background:
    repeating-radial-gradient(circle at 12% 0%, rgba(217, 162, 95, 0.08) 0 1px, transparent 1.5px 34px),
    linear-gradient(180deg, var(--erz-navy-2), var(--erz-tiefsee));
  padding: clamp(3.5rem, 7vw, 5rem) 0;
}
.erz-rand::before, .erz-rand::after {
  content: ""; position: absolute; left: 0; right: 0; height: 16px;
  background: linear-gradient(90deg, var(--erz-bronze-dunkel), var(--erz-glanz), var(--erz-bronze-dunkel));
  -webkit-mask: var(--erz-bluete) repeat-x 0 0 / 36px 16px; mask: var(--erz-bluete) repeat-x 0 0 / 36px 16px;
}
.erz-rand::before { top: 0; }
.erz-rand::after { bottom: 0; transform: scaleY(-1); }
.erz-rand__innen { max-width: var(--erz-breite); margin: 0 auto; padding: 0 var(--erz-rand); }
.erz-regeln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.erz-regel {
  padding: 1.4rem 1.3rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(217, 162, 95, 0.35);
}
.erz-regel__icon { width: 40px; height: 40px; color: var(--erz-aqua-hell); margin-bottom: 0.5rem; }
.erz-regel p { margin: 0; font-size: 0.97rem; line-height: 1.6; color: rgba(245, 239, 227, 0.88); }
.erz-regel strong { display: block; margin-bottom: 0.25rem; font-family: var(--erz-serif); font-size: 1.2rem; color: var(--erz-glanz); }
.erz-rand__mehr { margin: 2rem 0 0; text-align: center; }
.erz-regeln--hell .erz-regel { background: var(--erz-papier); border-color: rgba(168, 110, 52, 0.32); }
.erz-regeln--hell .erz-regel p { color: var(--erz-grau); }
.erz-regeln--hell .erz-regel strong { color: var(--erz-navy); }
.erz-regeln--hell .erz-regel__icon { color: var(--erz-aqua-tief); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.erz-tafeln { max-width: var(--erz-breite); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5rem) var(--erz-rand) 1rem; }
.erz-tafeln__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.erz-tafel { position: relative; height: 100%; }
.erz-tafel__link {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.5rem 1.45rem 1.3rem; border-radius: 18px;
  background: #fffdf8; border: 1px solid rgba(168, 110, 52, 0.26);
  box-shadow: 0 10px 26px rgba(15, 31, 54, 0.06);
  color: var(--erz-tinte); text-decoration: none;
  transition: transform 0.45s var(--erz-weich), box-shadow 0.45s, border-color 0.45s;
}
.erz-tafel__link::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--erz-bronze), var(--erz-glanz) 45%, var(--erz-aqua) 100%);
}
.erz-tafel__link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 35%, rgba(159, 227, 220, 0.22) 50%, transparent 65%);
  transition: transform 1s var(--erz-weich);
}
.erz-tafel__link:hover { transform: translateY(-4px); border-color: rgba(42, 167, 165, 0.55); box-shadow: 0 20px 38px rgba(15, 31, 54, 0.12); color: var(--erz-tinte); }
.erz-tafel__link:hover::after { transform: translateX(110%); }
.erz-tafel__kopf { display: flex; align-items: center; gap: 0.55rem; }
.erz-tafel__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--erz-gischt); color: var(--erz-aqua-tief); box-shadow: 0 0 0 1px rgba(20, 111, 116, 0.25); }
.erz-tafel__icon svg { width: 22px; height: 22px; }
.erz-tafel__thema { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--erz-bronze-dunkel); }
.erz-tafel__titel { margin: 0.2rem 0 0; font-size: 1.28rem; font-weight: 700; line-height: 1.28; color: var(--erz-navy); }
.erz-tafel__text { margin: 0; flex: 1; font-size: 0.97rem; line-height: 1.6; color: var(--erz-grau); }
.erz-tafel__fuss { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px dashed rgba(168, 110, 52, 0.3); font-size: 0.86rem; font-weight: 600; color: var(--erz-aqua-tief); }
.erz-tafel__pfeil { transition: transform 0.45s var(--erz-weich); }
.erz-tafel__link:hover .erz-tafel__pfeil { transform: translateX(5px); }

/* ── Home: index and about teaser ────────────────────────────────────── */
.erz-verzeichnis { max-width: var(--erz-breite); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5rem) var(--erz-rand) 1rem; }
.erz-verzeichnis__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem 2rem; }
.erz-verzeichnis section { padding: 1.2rem 0 0; border-top: 2px solid rgba(168, 110, 52, 0.35); }
.erz-verzeichnis h3 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.erz-verzeichnis h3 a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--erz-navy); text-decoration: none; }
.erz-verzeichnis h3 a:hover { color: var(--erz-aqua-tief); }
.erz-verzeichnis__icon { width: 26px; height: 26px; color: var(--erz-bronze); }
.erz-verzeichnis ul { list-style: none; margin: 0; padding: 0; }
.erz-verzeichnis li { padding: 0.32rem 0 0.32rem 1.1rem; position: relative; font-size: 0.97rem; line-height: 1.45; }
.erz-verzeichnis li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--erz-aqua); }
.erz-verzeichnis li a { color: var(--erz-tinte); text-decoration: none; }
.erz-verzeichnis li a:hover { color: var(--erz-aqua-tief); text-decoration: underline; }

.erz-kunde { max-width: var(--erz-breite); margin: 0 auto; padding: clamp(3.5rem, 7vw, 5rem) var(--erz-rand) clamp(4rem, 8vw, 6rem); }
.erz-kunde__innen {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start;
  padding: clamp(1.8rem, 4vw, 3rem); border-radius: 26px;
  background: linear-gradient(135deg, #fffdf8, var(--erz-leinen-2));
  border: 1px solid rgba(168, 110, 52, 0.4);
  box-shadow: 0 0 0 6px var(--erz-papier), 0 0 0 7px rgba(168, 110, 52, 0.25), 0 24px 50px rgba(74, 44, 18, 0.1);
}
.erz-kunde__zeichen { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; color: var(--erz-glanz); background: radial-gradient(circle at 35% 30%, var(--erz-navy-3), var(--erz-navy) 72%); box-shadow: 0 0 0 4px var(--erz-bronze-hell), 0 14px 30px rgba(8, 19, 37, 0.25); }
.erz-kunde__zeichen svg { width: 62px; height: 62px; }
.erz-kunde h2 { margin: 0 0 0.9rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.erz-kunde p { max-width: 70ch; }
.erz-kunde__link { margin-left: 1rem; font-weight: 600; }

/* ── Category header ─────────────────────────────────────────────────── */
.erz-themenkopf {
  position: relative; overflow: hidden; color: var(--erz-leinen);
  background:
    repeating-radial-gradient(circle at 88% 30%, rgba(159, 227, 220, 0.09) 0 1px, transparent 1.5px 32px),
    linear-gradient(180deg, var(--erz-navy-2), var(--erz-navy));
  padding: clamp(2.8rem, 6vw, 4rem) 0 clamp(2.6rem, 5vw, 3.5rem);
}
.erz-themenkopf__innen { max-width: 880px; margin: 0 auto; padding: 0 var(--erz-rand); }
.erz-themenkopf .erz-pfad ol { color: rgba(245, 239, 227, 0.7); }
.erz-themenkopf .erz-pfad a { color: var(--erz-aqua-hell); }
.erz-themenkopf .erz-pfad li + li::before { filter: none; }
.erz-themenkopf__zeile { display: flex; align-items: center; gap: 1.2rem; }
.erz-themenkopf__zeile .erz-dachzeile { margin-bottom: 0.3rem; }
.erz-themenkopf h1 { margin: 0; color: #fffaf0; font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.erz-themenkopf__icon { flex: none; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; color: var(--erz-aqua-hell); background: radial-gradient(circle at 35% 30%, var(--erz-navy-3), var(--erz-tiefsee) 75%); box-shadow: 0 0 0 3px var(--erz-bronze-hell), 0 0 0 7px rgba(217, 162, 95, 0.2); }
.erz-themenkopf__icon svg { width: 44px; height: 44px; }
.erz-themenkopf__text { margin: 1.3rem 0 0.6rem; font-size: 1.12rem; color: rgba(245, 239, 227, 0.9); max-width: 64ch; }
.erz-themenkopf__zahl { margin: 0; font-weight: 700; color: var(--erz-aqua-hell); }
.erz-tafeln--thema { padding-top: clamp(2.6rem, 5vw, 3.6rem); }
.erz-weitere { max-width: var(--erz-breite); margin: 0 auto; padding: clamp(2.6rem, 5vw, 3.5rem) var(--erz-rand) clamp(3rem, 6vw, 4.5rem); text-align: center; }
.erz-weitere__titel { margin: 0 0 1.2rem; font-size: 1.5rem; }
.erz-weitere--ratgeber { padding-bottom: 0.5rem; }

/* ── Article ─────────────────────────────────────────────────────────── */
.erz-ratgeber { padding: clamp(2.4rem, 5vw, 3.6rem) var(--erz-rand) 0; }
.erz-ratgeber__kopf { max-width: 880px; margin: 0 auto clamp(2rem, 4vw, 2.8rem); text-align: center; }
.erz-ratgeber__kopf .erz-pfad ol { justify-content: center; }
.erz-ratgeber__thema { margin: 0 0 0.9rem; }
.erz-ratgeber__thema a {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.95rem 0.3rem 0.55rem; border-radius: 999px;
  background: var(--erz-navy); color: var(--erz-glanz); text-decoration: none; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.erz-ratgeber__thema a:hover { color: #fff; background: var(--erz-navy-3); }
.erz-ratgeber__thema svg { width: 22px; height: 22px; color: var(--erz-aqua-hell); }
.erz-ratgeber__titel { margin: 0 0 1rem; font-size: clamp(2rem, 4.3vw, 3.05rem); font-weight: 700; line-height: 1.12; }
.erz-ratgeber__vorspann { margin: 0 auto 1.3rem; max-width: 62ch; font-family: var(--erz-serif); font-size: clamp(1.1rem, 1.7vw, 1.26rem); line-height: 1.55; color: var(--erz-bronze-dunkel); }
.erz-ratgeber__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0; font-size: 0.9rem; color: var(--erz-grau); }
.erz-ratgeber__meta li + li::before { content: "·"; margin: 0 0.65rem; color: var(--erz-bronze); }
.erz-ratgeber__meta a { color: inherit; }
.erz-ratgeber__koerper { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 720px); gap: clamp(2rem, 4vw, 3.5rem); justify-content: center; align-items: start; }
.erz-ratgeber__koerper > .erz-text:only-child { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 760px; }

.erz-inhalt { position: sticky; top: 1.5rem; }
.erz-inhalt__klappe { border-radius: 18px; background: #fffdf8; border: 1px solid rgba(168, 110, 52, 0.3); box-shadow: 0 10px 24px rgba(15, 31, 54, 0.05); overflow: hidden; }
.erz-inhalt__klappe summary {
  cursor: pointer; list-style: none; padding: 0.9rem 1.1rem; font-family: var(--erz-serif); font-weight: 700; font-size: 1.1rem; color: var(--erz-navy);
  background: linear-gradient(180deg, var(--erz-leinen), #fffdf8); border-bottom: 1px solid rgba(168, 110, 52, 0.2);
  display: flex; justify-content: space-between; align-items: center;
}
.erz-inhalt__klappe summary::-webkit-details-marker { display: none; }
.erz-inhalt__klappe summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--erz-bronze); border-bottom: 2px solid var(--erz-bronze); transform: rotate(45deg) translateY(-3px); transition: transform 0.3s; }
.erz-inhalt__klappe[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.erz-inhalt ol { list-style: none; margin: 0; padding: 0.6rem 0.6rem 0.8rem; counter-reset: erz-zaehler; max-height: calc(100vh - 8rem); overflow-y: auto; }
.erz-inhalt li { counter-increment: erz-zaehler; }
.erz-inhalt a {
  position: relative; display: block; padding: 0.42rem 0.6rem 0.42rem 2.1rem; border-radius: 10px;
  color: var(--erz-tinte); text-decoration: none; font-size: 0.92rem; line-height: 1.4; overflow: hidden; isolation: isolate;
}
.erz-inhalt a::before { content: counter(erz-zaehler, decimal-leading-zero); position: absolute; left: 0.55rem; top: 0.45rem; font-family: var(--erz-serif); font-size: 0.82rem; font-weight: 700; color: var(--erz-bronze); }
.erz-inhalt a::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--erz-gischt); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--erz-weich); }
.erz-inhalt a:hover::after, .erz-inhalt a.erz-hier::after { transform: scaleX(1); }
.erz-inhalt a.erz-hier { color: var(--erz-aqua-tief); font-weight: 600; }

.erz-text { min-width: 0; font-size: 1.08rem; }
.erz-text > p:first-child { font-size: 1.14rem; }
.erz-text h2 { position: relative; margin: 2.6rem 0 0.9rem; padding-top: 1.1rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); scroll-margin-top: 1.5rem; }
.erz-text h2::before {
  content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 9px;
  background: linear-gradient(90deg, var(--erz-bronze-dunkel), var(--erz-glanz), var(--erz-bronze));
  -webkit-mask: var(--erz-bluete) repeat-x 0 0 / 18px 9px; mask: var(--erz-bluete) repeat-x 0 0 / 18px 9px;
}
.erz-text h3 { margin: 1.9rem 0 0.6rem; font-size: 1.3rem; color: var(--erz-navy-2); scroll-margin-top: 1.5rem; }
.erz-text h4 { margin: 1.5rem 0 0.5rem; font-size: 1.1rem; }
.erz-text p { margin: 0 0 1.1em; }
.erz-text ul, .erz-text ol { margin: 0 0 1.3em; padding-left: 1.4rem; }
.erz-text li { margin: 0.35em 0; padding-left: 0.2rem; }
.erz-text ul li::marker { color: var(--erz-aqua); }
.erz-text ol li::marker { color: var(--erz-bronze); font-family: var(--erz-serif); font-weight: 700; }
.erz-text strong { color: var(--erz-navy); }
.erz-text a { font-weight: 500; }
.erz-text blockquote {
  position: relative; margin: 1.8rem 0; padding: 1.1rem 1.3rem 1.1rem 1.5rem; border-radius: 4px 18px 18px 4px;
  background: linear-gradient(135deg, var(--erz-gischt), #f3fbf9);
  border-left: 4px solid var(--erz-aqua);
  color: var(--erz-navy-2);
}
.erz-text blockquote p:last-child { margin-bottom: 0; }
.erz-text hr { border: 0; height: 12px; margin: 2.4rem auto; width: 160px; background: linear-gradient(90deg, transparent, var(--erz-bronze), transparent); -webkit-mask: var(--erz-bluete) repeat-x 0 0 / 24px 12px; mask: var(--erz-bluete) repeat-x 0 0 / 24px 12px; }
.erz-text code { padding: 0.1em 0.35em; border-radius: 5px; background: var(--erz-leinen-2); font-size: 0.92em; }
.erz-text .table-wrap { margin: 1.6rem 0 1.8rem; overflow-x: auto; border-radius: 16px; border: 1px solid rgba(168, 110, 52, 0.32); box-shadow: 0 10px 24px rgba(15, 31, 54, 0.05); -webkit-overflow-scrolling: touch; }
.erz-text table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; background: #fffdf8; }
.erz-text th { text-align: left; padding: 0.75rem 0.9rem; background: var(--erz-navy); color: var(--erz-glanz); font-family: var(--erz-serif); font-weight: 600; font-size: 1rem; white-space: nowrap; }
.erz-text td { padding: 0.7rem 0.9rem; border-top: 1px solid rgba(168, 110, 52, 0.18); vertical-align: top; }
.erz-text tbody tr:nth-child(even) td { background: rgba(230, 246, 242, 0.5); }

.erz-merkstein {
  margin: 2.6rem 0 0; padding: 1.3rem 1.4rem; border-radius: 18px;
  background: linear-gradient(135deg, #fff8ec, #f4ead6);
  border: 1px solid rgba(168, 110, 52, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.erz-merkstein__titel { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.4rem !important; font-family: var(--erz-serif); font-weight: 700; font-size: 1.15rem; color: var(--erz-navy); }
.erz-merkstein__icon { width: 28px; height: 28px; color: var(--erz-rot); }
.erz-merkstein p { margin: 0; font-size: 0.98rem; }

.erz-tafeln--weiter { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(3.5rem, 7vw, 5rem); }

/* ── Pages and 404 ───────────────────────────────────────────────────── */
.erz-ratgeber--seite { padding-bottom: clamp(3.5rem, 7vw, 5rem); }
.erz-ratgeber__koerper--seite { grid-template-columns: 250px minmax(0, 720px); }
.erz-leer { max-width: 760px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) var(--erz-rand); text-align: center; }
.erz-leer__code {
  margin: 0; font-family: var(--erz-serif); font-size: clamp(5rem, 16vw, 9rem); font-weight: 700; line-height: 1;
  background: linear-gradient(180deg, var(--erz-bronze-hell) 0 48%, var(--erz-aqua) 48% 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.erz-leer h1 { margin: 0.4rem 0 1rem; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.erz-leer p { color: var(--erz-grau); }
.erz-chips--gross { margin: 2rem 0; }

/* ── Footer: the plinth ──────────────────────────────────────────────── */
.erz-sockel {
  position: relative; margin-top: clamp(1rem, 3vw, 2rem); color: rgba(245, 239, 227, 0.86);
  background:
    repeating-radial-gradient(circle at 50% 120%, rgba(217, 162, 95, 0.07) 0 1px, transparent 1.5px 36px),
    linear-gradient(180deg, var(--erz-navy), var(--erz-tiefsee));
  font-size: 0.95rem;
}
.erz-sockel__fries {
  height: 16px; transform: translateY(-15px) scaleY(-1);
  background: linear-gradient(90deg, var(--erz-bronze-dunkel), var(--erz-glanz) 30%, var(--erz-bronze) 60%, var(--erz-glanz) 85%, var(--erz-bronze-dunkel));
  -webkit-mask: var(--erz-bluete) repeat-x 0 0 / 36px 16px; mask: var(--erz-bluete) repeat-x 0 0 / 36px 16px;
}
.erz-sockel__innen { max-width: var(--erz-breite); margin: 0 auto; padding: 2.4rem var(--erz-rand) 1.6rem; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2rem; }
.erz-sockel__name { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-family: var(--erz-serif); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.16em; color: var(--erz-glanz); }
.erz-sockel__siegel { width: 42px; height: 42px; }
.erz-sockel__zeile { margin: 0.4rem 0 0.8rem; color: var(--erz-aqua-hell); font-size: 0.88rem; }
.erz-sockel__marke p:last-child { line-height: 1.6; }
.erz-sockel__titel { margin: 0 0 0.7rem; font-family: var(--erz-serif); font-size: 1.1rem; font-weight: 700; color: var(--erz-glanz); }
.erz-sockel ul { list-style: none; margin: 0; padding: 0; }
.erz-sockel li { margin: 0.32rem 0; }
.erz-sockel a { color: rgba(245, 239, 227, 0.88); text-decoration: none; }
.erz-sockel a:hover { color: var(--erz-aqua-hell); text-decoration: underline; }
.erz-sockel__notfall p { margin: 0 0 0.7rem; line-height: 1.6; }
.erz-sockel__notfall strong { color: #fffaf0; }
.erz-sockel__notfall a { color: var(--erz-aqua-hell); font-weight: 600; text-decoration: underline; }
.erz-sockel__hinweis { max-width: var(--erz-breite); margin: 0 auto; padding: 1.2rem var(--erz-rand) 2rem; border-top: 1px solid rgba(217, 162, 95, 0.22); font-size: 0.84rem; color: rgba(245, 239, 227, 0.7); }
.erz-sockel__hinweis a { color: var(--erz-aqua-hell); text-decoration: underline; }

/* Content that rises into view (added by palace.js, never without it). */
.erz-auftauchen { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.9s var(--erz-weich); }
.erz-auftauchen.erz-da { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .erz-regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erz-sockel__innen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .erz-nebenwege { display: none; }
  .erz-js .erz-schalter { display: inline-flex; }
  .erz-wasserlauf { padding-top: 0.2rem; }
  .erz-wasserlauf__reihe, .erz-wasserlauf__neben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .erz-wasserlauf__neben { margin-top: 0.5rem !important; padding-top: 0.6rem !important; border-top: 1px solid rgba(217, 162, 95, 0.25) !important; }
  .erz-pegel { display: flex; width: 100%; min-height: 2.9rem; }
  .erz-pegel--still { border-style: dashed; }
  .erz-js .erz-wasserlauf { display: none; }
  .erz-js .erz-haupt.erz-offen .erz-wasserlauf { display: block; animation: erz-aufklappen 0.5s var(--erz-weich); }
  @keyframes erz-aufklappen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .erz-halle__innen { grid-template-columns: 1fr; }
  .erz-halle__bild { max-width: 560px; margin: 0 auto; width: 100%; }
  .erz-becken__reihe, .erz-tafeln__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erz-ratgeber__koerper, .erz-ratgeber__koerper--seite { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .erz-inhalt { position: static; }
  .erz-inhalt ol { max-height: none; }
}
@media (max-width: 640px) {
  body { font-size: 1.03rem; }
  .erz-wm { font-size: 0.78rem; }
  .erz-wm__innen { gap: 0.5rem; padding-top: 0.38rem; padding-bottom: 0.38rem; }
  .erz-wm__bahn { --weg: 44px; }
  .erz-wm__band { width: 26px; height: 14px; }
  .erz-siegel__bild { width: 44px; height: 44px; }
  .erz-siegel__name { font-size: 1.5rem; }
  .erz-siegel__zeile { font-size: 0.7rem; max-width: 17em; }
  .erz-becken__reihe, .erz-tafeln__raster, .erz-regeln { grid-template-columns: minmax(0, 1fr); }
  .erz-sockel__innen { grid-template-columns: minmax(0, 1fr); }
  .erz-kunde__innen { grid-template-columns: minmax(0, 1fr); }
  .erz-kunde__zeichen { width: 84px; height: 84px; }
  .erz-kunde__zeichen svg { width: 48px; height: 48px; }
  .erz-kunde__link { display: inline-block; margin: 0.8rem 0 0; }
  .erz-themenkopf__icon { width: 60px; height: 60px; }
  .erz-themenkopf__icon svg { width: 34px; height: 34px; }
  .erz-halle__knoepfe .erz-taste { width: 100%; }
  .erz-text { font-size: 1.04rem; }
  .erz-text th { white-space: normal; }
  .erz-pfad [aria-current] { max-width: 22ch; }
}
@media (max-width: 400px) {
  .erz-wm__band { display: none; }
  .erz-wasserlauf__reihe, .erz-wasserlauf__neben { grid-template-columns: minmax(0, 1fr); }
  .erz-schalter__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Calm for everyone who asks for it ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .erz-wm__seifen, .erz-bild__perlen, .erz-pegel__perlen { display: none; }
  .erz-wm__ball { transform: translateX(calc(var(--weg) / 2 - 7px)); }
  .erz-bild__glanz { transform: translateX(150px); opacity: 0.6; }
  .erz-bild__ringe .r1 { opacity: 0.45; transform: scale(1.6); }
  .erz-siegel__name { background-position: 50% 0; }
  .erz-auftauchen { opacity: 1; transform: none; }
}

@media print {
  .erz-wm, .erz-wasserlauf, .erz-schalter, .erz-nebenwege, .erz-lilienrand, .erz-lesepegel, .erz-inhalt, .erz-tafeln--weiter, .erz-weitere, .erz-sockel__fries { display: none !important; }
  body { background: #fff; }
  .erz-haupt, .erz-sockel { background: #fff; color: #000; }
}