/* RUDEL Flow, Unterseiten (Referenz, Impressum, Datenschutz, Danke), 14.10.2026
   Wird nach komponenten.css und flow.css geladen und nutzt deren Farben,
   Kopf, Fuß, Knöpfe und Bausteine. Hier stehen nur die Ergänzungen. */

/* ---------- Kopfband: dunkler Einstieg wie der Hero, nur kompakter ---------- */
.seitenkopf{position:relative;background:var(--graphit);color:var(--auf-dunkel);overflow:hidden;isolation:isolate}
.seitenkopf::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(640px 360px at 82% 20%,rgba(37,99,235,.2),transparent 70%),
    radial-gradient(460px 300px at 10% 110%,rgba(200,122,58,.12),transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
.seitenkopf-innen{padding-block:clamp(48px,7vw,88px) clamp(52px,7vw,92px)}
.seitenkopf h1{font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-top:16px;color:#fff;max-width:18em}
.seitenkopf-text{margin-top:20px;max-width:38em;color:var(--auf-dunkel-2);font-size:1.06rem}
.seitenkopf--fall .drytech-raster{padding-block:clamp(48px,7vw,88px) clamp(56px,7vw,96px)}
.seitenkopf--fall h1{max-width:none;font-size:clamp(2.1rem,3.8vw,3.1rem)}
.seitenkopf--klein .seitenkopf-innen{padding-block:clamp(40px,6vw,72px) clamp(40px,6vw,72px)}

.pfadleiste{display:flex;flex-wrap:wrap;gap:6px;font-size:.78rem;color:var(--auf-dunkel-2)}
.pfadleiste a{text-decoration:none;color:var(--auf-dunkel-2)}
.pfadleiste a:hover{color:#fff}
.pfadleiste span::before{content:"/";margin-right:6px;color:var(--text-3)}

/* ---------- Rechtstexte ---------- */
.rechtstext-flaeche{padding-block:clamp(40px,6vw,72px) clamp(72px,9vw,112px)}
.rechtstext{max-width:780px;background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius-gross);padding:clamp(24px,4vw,48px);box-shadow:var(--schatten);margin-top:calc(-1 * clamp(40px,6vw,72px) - 28px);position:relative}
.rechtstext h2{font-size:1.12rem;font-weight:700;letter-spacing:-.01em;margin-top:34px;padding-top:26px;border-top:1px solid var(--linie);display:flex;gap:12px;align-items:baseline}
.rechtstext h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rechtstext p{margin-top:12px;color:var(--text-2);font-size:.98rem;overflow-wrap:break-word}
.rechtstext a{color:var(--blau)}
.rechtstext .stand{margin-top:34px;padding:16px 18px;border-radius:12px;background:var(--grund);font-size:.86rem;color:var(--text-3)}
.rechtstext .stand em{font-style:normal}

/* ---------- Danke ---------- */
.danke-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;max-width:640px}
.danke-weg{display:grid;gap:4px;padding:16px 18px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid var(--linie-dunkel);text-decoration:none;transition:border-color .2s,background .2s}
.danke-weg:hover{border-color:rgba(91,140,255,.6);background:rgba(37,99,235,.08)}
.danke-weg small{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kupfer-hell);font-weight:600}
.danke-weg b{color:#fff;font-weight:600;overflow-wrap:anywhere}
.danke-haken{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--blau);box-shadow:0 0 0 10px rgba(37,99,235,.15),0 0 60px rgba(37,99,235,.4)}
.danke-haken svg{width:30px;height:30px}
.danke-haken path{stroke-dasharray:30;stroke-dashoffset:30;animation:haken .7s .3s ease forwards}
@keyframes haken{to{stroke-dashoffset:0}}
.seitenkopf .hero-knoepfe{margin-top:32px}

/* ---------- Referenz: Kacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kachel{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius-gross);padding:28px;transition:transform .3s ease,box-shadow .3s ease;min-width:0}
.kachel:hover{transform:translateY(-4px);box-shadow:var(--schatten)}
.kachel h3{font-size:1.12rem;margin-top:18px}
.kachel p{margin-top:10px;color:var(--text-2);font-size:.96rem}
.kachel-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--blau-zart);color:var(--blau)}
.kachel-ico svg{width:22px;height:22px}
.kachel--kupfer .kachel-ico{background:var(--kupfer-zart);color:var(--kupfer)}
.kachel-zahl{display:block;font-size:clamp(2.4rem,4.4vw,3.2rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--blau);font-variant-numeric:tabular-nums}
.kachel--kupfer .kachel-zahl{color:var(--kupfer)}
.kachel-zahl+h3{margin-top:14px}

.weiss{background:var(--papier);border-block:1px solid var(--linie)}
.weiss .kachel{background:var(--grund)}
.weiss .pfad-punkt{background:var(--papier)}

.hinweis-box{margin-top:32px;padding:22px 26px;border-radius:var(--radius-gross);background:var(--kupfer-zart);color:var(--text-2);font-size:.96rem;max-width:56em;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.hinweis-box::before{content:"";width:10px;height:10px;margin-top:8px;border-radius:50%;background:var(--kupfer)}

.technik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.bausteine{display:flex;flex-wrap:wrap;gap:10px}
.bausteine li{padding:10px 16px;border-radius:999px;background:var(--papier);border:1px solid var(--linie);font-size:.9rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.bausteine li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blau)}
.bausteine li:last-child::before{background:var(--kupfer)}

/* ---------- Abschluss (dunkel) ---------- */
.abschluss{position:relative;overflow:hidden;isolation:isolate}
.abschluss::before{content:"";position:absolute;width:620px;height:620px;left:-220px;bottom:-280px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.22),transparent 65%)}
.abschluss-innen{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.abschluss h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-top:14px;font-weight:700;letter-spacing:-.03em}
.abschluss-innen>div>p{margin-top:16px;color:var(--auf-dunkel-2);max-width:34em}
.abschluss .danke-wege{grid-template-columns:minmax(0,1fr);margin-top:0}

.kopf .navi a[aria-current="page"]{color:#fff}

@media (max-width:980px){
  .kacheln{grid-template-columns:minmax(0,1fr)}
  .technik,.abschluss-innen{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .danke-wege{grid-template-columns:minmax(0,1fr)}
  .rechtstext{margin-top:-36px;border-radius:var(--radius)}
  .hinweis-box{padding:18px}
  .kachel{padding:22px}
}