/* ============================================================
   chinesischerturmev.de - Design-Layer v5 (15.08.2026)
   Vereinheitlicht die statischen Seiten mit der Startseite.
   Wird ZUSAETZLICH zum Seiten-CSS geladen und ueberschreibt gezielt.
   ============================================================ */
:root{
  --ct-navy:#0B3D6B;
  --ct-navy-dark:#082C4E;
  --ct-navy-soft:#1A5590;
  --ct-gold:#C9A227;
  --ct-gold-dark:#8C6D1F;
  --ct-ink:#1C2027;
  --ct-muted:#5A6270;
  --ct-paper:#FFFFFF;
  --ct-paper-alt:#F7F8FB;
  --ct-sand:#F6F3EC;
  --ct-line:#E2E6EE;
  --ct-line-soft:#EDF0F5;
  --ct-radius:12px;
  --ct-shadow:0 1px 2px rgba(11,61,107,.05), 0 8px 24px -12px rgba(11,61,107,.18);
  --ct-measure:68ch;
}

/* ---------- Grundtypografie ---------- */
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:18px; line-height:1.72;
  color:var(--ct-ink); background:var(--ct-paper);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;padding-left:24px;padding-right:24px}
main .wrap, main.wrap{max-width:1120px}

h1,h2,h3,h4,.ct-h{font-family:"Playfair Display",Georgia,serif;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.35rem + 2.1vw,3.15rem);line-height:1.12;color:var(--ct-navy);margin:.15em 0 .35em}
h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,2.1rem);line-height:1.2;color:var(--ct-navy);margin:2.4em 0 .5em;scroll-margin-top:96px}
h3{font-size:clamp(1.12rem,1.03rem + .35vw,1.35rem);line-height:1.3;color:var(--ct-ink);margin:1.9em 0 .35em}
p,li{max-width:var(--ct-measure)}
p{margin:0 0 1.15em}
strong,b{color:var(--ct-navy-dark);font-weight:700}
a{color:var(--ct-navy-soft);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ct-navy)}

.kicker,.eyebrow{
  font-family:"Jost",system-ui,sans-serif;font-weight:600;
  color:var(--ct-gold-dark)!important;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 .35em;
}

/* ---------- Kopfbereich ---------- */
header.site{
  border-bottom:1px solid var(--ct-line);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  position:sticky;top:0;z-index:900;
}
header.site .wrap{padding-top:12px;padding-bottom:12px}
header.site .brand{
  font-family:"Playfair Display",Georgia,serif;font-size:1.05rem;
  color:var(--ct-navy);gap:12px;letter-spacing:.01em;
}
header.site .brand img{height:38px}
.lang{font-family:"Jost",system-ui,sans-serif;font-size:.82rem;display:flex;align-items:center;gap:4px}
.lang a,.lang strong{
  border-radius:999px;padding:7px 13px!important;margin:0!important;
  line-height:1;min-height:38px;display:inline-flex;align-items:center;
  text-decoration:none;font-weight:500;
}
.lang a{color:var(--ct-navy-soft)}
.lang a:hover{background:var(--ct-paper-alt)}
.lang strong,.lang [aria-current]{background:var(--ct-navy);color:#fff!important;font-weight:600}

/* ---------- Brotkrume + Seitenkopf ---------- */
nav.crumb,.crumbs{
  font-family:"Jost",system-ui,sans-serif;font-size:.82rem;
  color:var(--ct-muted);margin:28px 0 0;
}
nav.crumb a,.crumbs a{color:var(--ct-muted);text-decoration:none}
nav.crumb a:hover,.crumbs a:hover{color:var(--ct-navy);text-decoration:underline}

.ct-hero{
  margin:10px 0 40px;padding:34px 0 30px;
  border-bottom:1px solid var(--ct-line);
}
.ct-hero .lede{
  font-size:1.16rem;line-height:1.62;color:var(--ct-muted);
  max-width:62ch;margin:.2em 0 0;
}

/* ---------- Faktenkasten ---------- */
dl.facts,.facts{
  background:var(--ct-paper-alt);border:1px solid var(--ct-line);
  border-left:3px solid var(--ct-gold);border-radius:var(--ct-radius);
  padding:22px 26px;margin:1.9em 0;box-shadow:none;
}
dl.facts dt{
  font-family:"Jost",system-ui,sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ct-gold-dark);margin-top:1.05em;
}
dl.facts dt:first-child{margin-top:0}
dl.facts dd{margin:.15em 0 0;color:var(--ct-ink)}

/* ---------- Karten fuer verwandte Seiten ---------- */
ul.related{
  list-style:none;padding:0;margin:1.4em 0 0;
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  max-width:none;
}
ul.related li{max-width:none;margin:0}
ul.related a{
  display:block;padding:16px 18px;border:1px solid var(--ct-line);
  border-radius:var(--ct-radius);background:#fff;text-decoration:none;
  font-family:"Jost",system-ui,sans-serif;font-size:.97rem;font-weight:500;
  color:var(--ct-navy);transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
ul.related a:hover{border-color:var(--ct-gold);box-shadow:var(--ct-shadow);transform:translateY(-1px)}
ul.related a::after{content:" \2192";color:var(--ct-gold-dark)}

/* ---------- Tabellen ---------- */
table{border-collapse:collapse;width:100%;margin:1.6em 0;font-size:.97rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--ct-line)}
th{font-family:"Jost",system-ui,sans-serif;font-size:.78rem;letter-spacing:.09em;
   text-transform:uppercase;color:var(--ct-gold-dark);border-bottom:1px solid var(--ct-line)}

/* ---------- Zitat ---------- */
blockquote{
  margin:1.8em 0;padding:4px 0 4px 22px;border-left:3px solid var(--ct-gold);
  font-style:italic;font-size:1.1rem;color:var(--ct-navy-dark);
}
blockquote p{max-width:58ch}

/* ---------- Fusszeile ---------- */
footer.site{
  border-top:1px solid var(--ct-line);background:var(--ct-navy);color:#DDE6F0;
  margin-top:72px;padding:44px 0 34px;font-size:.9rem;
}
footer.site .wrap{max-width:1120px}
footer.site a{color:#F2E4B8;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site strong{color:#fff}
.ct-foot-grid{
  display:grid;gap:26px 34px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-bottom:26px;
}
.ct-foot-grid h2{
  font-family:"Jost",system-ui,sans-serif;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:#C9A227;margin:0 0 10px;font-weight:600;
}
.ct-foot-grid ul{list-style:none;padding:0;margin:0}
.ct-foot-grid li{margin:0 0 2px;max-width:none}
.ct-foot-grid a{display:inline-block;padding:6px 0;line-height:1.35}
.ct-foot-legal{
  border-top:1px solid rgba(255,255,255,.16);padding-top:18px;
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:.82rem;color:#A8BDD4;
}

/* ---------- Sprachhinweis: nicht mehr ueber dem Inhalt ---------- */
#lang-hint{
  position:static!important;
  background:var(--ct-sand)!important;color:var(--ct-ink)!important;
  border-bottom:1px solid var(--ct-line);
  font-family:"Jost",system-ui,sans-serif;font-size:.9rem;
  padding:10px 0!important;box-shadow:none!important;
}
#lang-hint .wrap{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
#lang-hint a{color:var(--ct-navy)!important;font-weight:600}
#lang-hint button{
  background:transparent;border:1px solid var(--ct-line);border-radius:8px;
  color:var(--ct-muted);cursor:pointer;
}

/* ---------- Zugaenglichkeit ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ct-gold);outline-offset:2px;border-radius:3px;
}
.skip-link{background:var(--ct-navy)!important;font-family:"Jost",system-ui,sans-serif!important}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
html{scroll-behavior:smooth}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  body{font-size:17px;line-height:1.68}
  .wrap{padding-left:18px;padding-right:18px}
  header.site .wrap{padding-top:9px;padding-bottom:9px;gap:8px}
  header.site .brand{font-size:.95rem}
  header.site .brand img{height:32px}
  .lang{font-size:.78rem;gap:2px}
  .lang a,.lang strong{padding:7px 10px!important}
  .ct-hero{padding:22px 0 20px;margin-bottom:28px}
  .ct-hero .lede{font-size:1.06rem}
  h2{margin-top:2em}
  dl.facts{padding:18px 18px}
  footer.site{margin-top:52px;padding:34px 0 28px}
  ul.related{grid-template-columns:1fr}
}

/* ---------- Druck ---------- */
@media print{
  header.site,#lang-hint,.skip-link,nav.crumb,ul.related{display:none!important}
  footer.site{background:none;color:#000;border-top:1px solid #999}
  footer.site a{color:#000}
  body{font-size:11pt;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}

/* ---------- Lesespalte zentrieren (Korrektur 15.08.2026) ---------- */
main.wrap{max-width:860px}
main.wrap > *{max-width:none}
main.wrap p, main.wrap li{max-width:none}
main.wrap dl.facts, main.wrap blockquote, main.wrap table{max-width:none}
header.site .wrap, footer.site .wrap, #lang-hint .wrap{max-width:1120px}
@media (min-width:1180px){ main.wrap{max-width:880px} }

/* Fliesstext auf Rechtsseiten in Textfarbe, nicht in Linkfarbe */
main.wrap p, main.wrap dd, main.wrap li{color:var(--ct-ink)}
main.wrap a{color:var(--ct-navy-soft)}

/* Fussleisten-Linkzeile luftiger */
.ct-foot-links{display:block;margin:6px 0 10px;line-height:2.1}
.ct-foot-links a{margin-right:6px}
footer.site p{max-width:none}

/* Abschnittsabstand etwas straffen, wenn direkt nach einer Ueberschrift */
h2 + p, h3 + p{margin-top:0}

/* ---------- Sprungmarke: nur bei Tastaturfokus sichtbar ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--ct-navy);color:#fff;padding:12px 20px;
  font-family:"Jost",system-ui,sans-serif;font-size:1rem;text-decoration:none;border-radius:0 0 8px 0;
}
.skip-link:focus,.skip-link:focus-visible{
  left:0;top:0;min-height:44px;display:inline-flex;align-items:center;
}

/* ---------- Tabellen auf schmalen Schirmen scrollbar statt ueberlaufend ---------- */
@media (max-width:760px){
  main table{
    display:block; width:100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch; white-space:nowrap;
    border:1px solid var(--ct-line); border-radius:var(--ct-radius);
  }
  main table thead, main table tbody, main table tr{ white-space:normal }
  main table th, main table td{ padding:9px 11px; font-size:.88rem }
  main table th:first-child, main table td:first-child{ min-width:9.5em }
}

/* ---------- Seitenbanner der Wissensseiten ---------- */
.ct-banner{
  margin:0 0 34px; border-radius:var(--ct-radius); overflow:hidden;
  border:1px solid var(--ct-line); background:var(--ct-paper-alt);
}
.ct-banner img{display:block;width:100%;height:auto;aspect-ratio:1600/600;object-fit:cover}
@media (max-width:760px){ .ct-banner{margin-bottom:24px} }

/* ---------- Hinweiszeile ---------- */
.ct-note{
  background:var(--ct-sand); border-left:3px solid var(--ct-gold);
  border-radius:0 var(--ct-radius) var(--ct-radius) 0;
  padding:14px 20px; font-size:.96rem; color:var(--ct-muted); margin:1.4em 0;
}

/* ---------- Bildnachweis unter Bannern (fuer spaeteren Fotoaustausch) ---------- */
.ct-banner figcaption{
  font-family:"Jost",system-ui,sans-serif;font-size:.8rem;color:var(--ct-muted);
  padding:9px 14px;background:#fff;border-top:1px solid var(--ct-line);
}
.ct-banner figcaption a{color:var(--ct-muted);text-decoration:underline}