/* treppenviertel-blankenese.de — site.css
   Tokens + Basiskomponenten übernommen aus dem Redesign-Handoff
   (03 Redesign/.../styles.css), Layoutklassen für die fünf Screens ergänzt.
   Kein Google-Fonts-@import hier — die Schrift wird über inter-fonts.css
   selbst gehostet eingebunden (siehe partials/head.php). */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --color-section: #262a60;
  --color-section-glow: #353b80;

  --color-neutral-100: #f3f5fe; --color-neutral-200: #e4e7f5; --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca; --color-neutral-500: #9397ab; --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c; --color-neutral-800: #3f424d; --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff; --color-accent-200: #e7e5fe; --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc; --color-accent-500: #968ae0; --color-accent-600: #796cbf;
  --color-accent-700: #5d5294; --color-accent-800: #423a6a; --color-accent-900: #2b2741;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px;
  --space-4: 11.2px; --space-6: 16.8px; --space-8: 22.4px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);

  --content-max: 1200px;
  --page-pad: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.75; font-weight: 400;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
  a, button, .card, .btn { transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out; }
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-3); text-wrap: pretty; }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.tabular { font-variant-numeric: tabular-nums; }
.kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-300); font-weight: 500; }

.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}

/* — Bilder mit Blend-Container (dunkle Bildpartien fallen in den Grund) — */
.photo { position: relative; overflow: hidden; background: #0e1017; border-radius: var(--radius-sm); }
.photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; }
.photo-credit { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: var(--space-1); }

/* — Buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  text-decoration: none; font-family: var(--font-heading); font-weight: 500; font-size: 14px;
  line-height: 1.2; background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { color: var(--color-text); border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — Forms — */
.field { display: block; margin-bottom: var(--space-3); }
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-message { font-size: 13px; margin-top: var(--space-2); }
.form-message-success { color: var(--color-accent-300); }
.form-message-error { color: #e08a8a; }

/* — Cards / Tags / Table (Admin + Werbung nutzen diese Basis) — */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-divider); }
.card-title { font-family: var(--font-heading); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; }
.elev-md { box-shadow: var(--shadow-md); }
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 6px; }
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); }
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.status-live { color: var(--color-accent-400); font-size: 12px; text-transform: uppercase; }
.status-entwurf { color: var(--color-neutral-500); font-size: 12px; text-transform: uppercase; }

/* ══════════════ Layout ══════════════ */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--page-pad); }

/* — Header — */
.site-header {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  height: 54px; padding: 12px var(--page-pad);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-word { font: 500 15px var(--font-heading); letter-spacing: -0.005em; color: var(--color-text); }
.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav a { color: var(--color-text); text-decoration: none; font-size: 14px; padding: 8px 14px; border-radius: 4px; }
.site-nav a[aria-current='page'] { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: #d2cefd; }
.nav-divider { width: 1px; height: 18px; background: var(--color-divider); }
.nav-lang { color: var(--color-neutral-500) !important; font-size: 13px !important; }
.nav-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-burger span { width: 20px; height: 2px; background: var(--color-text); display: block; }

/* — Hero (Startseite) — */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 520px; border-bottom: 1px solid var(--color-divider); }
.hero-text { padding: 76px 56px; display: flex; flex-direction: column; justify-content: center; }
.hero-text h1 { font-size: 62px; line-height: 1.0; letter-spacing: -0.035em; max-width: 18ch; margin-bottom: var(--space-4); }
.hero-text .lead { font-size: 18px; line-height: 1.55; max-width: 44ch; color: var(--color-neutral-300); margin-bottom: var(--space-6); }
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-photo { position: relative; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }
.hero-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--color-bg), transparent 45%); }
.hero-photo .photo-credit { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 1; }

/* — Besuch planen (4 Karten) — */
.section { max-width: var(--content-max); margin: 0 auto; padding: 64px var(--page-pad); }
.section-head { margin-bottom: var(--space-8); }
.section-head h2 { font-size: 34px; letter-spacing: -0.025em; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fact-card .fact-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-300); margin-bottom: var(--space-1); }
.fact-card .fact-value { font-size: 21px; font-family: var(--font-heading); margin-bottom: var(--space-1); }
.fact-card .fact-text { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* — Orte-Liste + Sidebar — */
.layout-with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 48px; }
.orte-list { display: flex; flex-direction: column; gap: var(--space-3); }
.orte-list a.ort-row {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: center;
  padding: 16px; background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: 8px; text-decoration: none; color: var(--color-text);
}
.orte-list a.ort-row:hover { border-color: var(--color-accent); }
.ort-row .photo { aspect-ratio: 3 / 2; }
.ort-row .ort-art { font-size: 11px; text-transform: uppercase; color: var(--color-accent-300); }
.ort-row .ort-weg { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.ort-row .ort-name { font-size: 20px; margin: var(--space-1) 0; }
.ort-row .ort-text { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.ort-row .ort-arrow { font-size: 18px; color: var(--color-accent-400); }

.sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--space-6); align-self: start; }
.sidebar-widget {
  border-radius: var(--radius-lg); border: 1px solid var(--color-accent-800); padding: var(--space-6);
  background: linear-gradient(150deg, var(--color-section) 0%, #1d2049 100%);
}
.sidebar-widget h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-300); margin-bottom: var(--space-2); }
.sidebar-widget .widget-value { font-size: 30px; font-family: var(--font-heading); }
.sidebar-widget .widget-meta { font-size: 12px; color: var(--color-accent-200); }
.ad-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  border: 1px dashed var(--color-divider); border-radius: var(--radius-md); text-align: center;
  min-height: 250px; padding: var(--space-4);
}
.ad-slot .ad-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.sidebar-links { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar-links a { font-size: 14px; }

/* — Magazin-Grid — */
.grid-magazin { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.magazin-card { border-top: 1px solid var(--color-accent-700); padding-top: 14px; }
.magazin-card .rubrik-meta { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: var(--space-1); }
.magazin-card .magazin-titel { font-size: 18px; margin-bottom: var(--space-1); }
.magazin-card .magazin-teaser { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* — Ortsseite — */
.page-photohead { position: relative; height: 420px; overflow: hidden; }
.page-photohead img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0.72; }
.page-photohead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-bg) 2%, transparent 70%); }
.page-photohead .breadcrumb { position: absolute; left: var(--page-pad); bottom: 90px; font-size: 12px; text-transform: uppercase; color: var(--color-accent-200); z-index: 1; }
.page-photohead h1 { position: absolute; left: var(--page-pad); bottom: 32px; font-size: 60px; z-index: 1; margin: 0; }
.page-photohead .photo-credit { position: absolute; right: var(--page-pad); top: var(--space-4); z-index: 1; }
.ort-content { display: grid; grid-template-columns: 1fr 320px; gap: 64px; padding: 56px var(--page-pad) 88px; }
.article-col .lead { font-size: 20px; max-width: 64ch; }
.article-col p { font-size: 16px; line-height: 1.7; max-width: 66ch; }
.facts-list { display: flex; flex-direction: column; }
.facts-list .fact-row { display: flex; justify-content: space-between; font-size: 13px; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); }
.facts-list .fact-row:last-child { border-bottom: 0; }
.nearby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.nearby-grid .gehzeit { font-size: 11px; text-transform: uppercase; color: var(--color-accent-300); }
.nearby-grid .name { font-size: 17px; }

/* — Magazinartikel — */
.artikel-content { display: grid; grid-template-columns: 1fr 300px; gap: 64px; padding: 56px var(--page-pad) 88px; }
.artikel-col { max-width: 720px; }
.artikel-col h1 { font-size: 52px; letter-spacing: -0.035em; line-height: 1.05; }
.artikel-meta { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: var(--space-4); }
.artikel-col .lead { font-size: 20px; color: var(--color-neutral-200); }
.autor-zeile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin: var(--space-4) 0; }
.autor-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-accent-800); border: 1px solid var(--color-accent-700); }
.autor-name { font-size: 13px; }
.autor-rolle { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.artikel-col blockquote { border-left: 2px solid var(--color-accent); padding-left: 24px; font-size: 24px; line-height: 1.35; font-family: var(--font-heading); margin: var(--space-6) 0; }
.artikel-col blockquote cite { display: block; font-size: 13px; font-style: normal; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: var(--space-2); }
.artikel-col h3 { font-size: 26px; margin-top: var(--space-8); }
.toc { display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px; }
.toc a { color: var(--color-neutral-500); text-decoration: none; }
.toc a.active { color: var(--color-neutral-200); }

/* — Werbung/Mediadaten — */
.werbung-head h1 { font-size: 56px; max-width: 22ch; }
.werbung-head .lead { font-size: 18px; max-width: 56ch; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kennzahlen .wert { font-size: 30px; font-family: var(--font-heading); }
.kennzahlen .label { font-size: 12px; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.platzierungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.platzierung-card .preis { font-size: 28px; font-family: var(--font-heading); }
.kontaktband {
  background: linear-gradient(140deg, var(--color-section-glow), var(--color-section));
  padding: 64px var(--page-pad); display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.kontaktband h2 { font-size: 34px; }
.kontaktband p { color: var(--color-accent-200); }

/* — Newsletter-Band + Footer — */
.newsletter-band { border-top: 1px solid var(--color-divider); padding: 56px var(--page-pad); display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; }
.newsletter-band h3 { font-size: 24px; }
.newsletter-form { display: flex; flex-direction: column; gap: var(--space-2); }
.newsletter-form > .input { width: 260px; }
.site-footer { border-top: 1px solid var(--color-divider); padding: var(--page-pad); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.site-footer p { margin: 0; font-size: 12px; }
.footer-links { display: flex; gap: var(--space-4); }
.footer-links a { font-size: 12px; color: var(--color-neutral-500); text-decoration: none; }

/* — Cookie-Banner — */
.cookie-banner {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 40;
  max-width: 480px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lg);
}
.cookie-banner p { font-size: 13px; }
.cookie-banner-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* — Admin — */
.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-8); }
.admin-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; }
.filter-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.login-box { max-width: 360px; margin: 96px auto; }

/* ══════════════ Responsive ══════════════
   Ein Umbruchpunkt (Handoff): ≥1024 wie oben, 768–1023 Sidebar unter Content
   + 4→2 Spalten, <768 einspaltig + Burger-Menü. */
@media (max-width: 1023px) {
  :root { --page-pad: 28px; }
  .layout-with-sidebar, .ort-content, .artikel-content { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .grid-4, .grid-magazin, .kennzahlen, .platzierungen, .nearby-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .kontaktband { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  :root { --page-pad: 20px; }
  body { font-size: 17px; }
  .hero-text h1 { font-size: 38px; }
  .page-photohead h1 { font-size: 34px; }
  .section-head h2 { font-size: 26px; }
  .grid-4, .grid-magazin, .kennzahlen, .platzierungen, .nearby-grid { grid-template-columns: 1fr; }
  .site-nav {
    display: none; position: fixed; inset: 0; top: 54px; background: var(--color-bg);
    flex-direction: column; align-items: flex-start; padding: var(--space-6); gap: var(--space-4);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { font-size: 18px; min-height: 44px; display: flex; align-items: center; }
  .nav-burger { display: flex; }
  .orte-list a.ort-row { grid-template-columns: 1fr; }
  .orte-list .photo { aspect-ratio: 16 / 9; }
  .newsletter-band { grid-template-columns: 1fr; }
  .newsletter-form > .input { width: 100%; }
}