/*
Theme Name: Apogee Co-Working
Theme URI: https://apogee-coworking.de
Author: Entwurf
Description: Massgeschneidertes Theme fuer Apogee Co-Working, Monheim am Rhein. Einseiter mit
 Nutzungsszenarien, Ausstattung, Anbietervergleich, Paketen und zwei Standorten. Ohne Page-Builder,
 ohne externe Abrufe, WPML-tauglich.
Version: 1.10.0
Update URI: false
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apogee
Tags: one-column, custom-colors, translation-ready
*/

/* ---------- Schriften, lokal gehostet (kein externer Abruf) ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================================================
   TOKENS
   Neutrale Skala verankert auf der Markenfarbe #3F3F3F.
   Akzente stammen aus den NASA-Aufnahmen selbst: das Gold der
   Kaptonfolie und das Blau des Erdrands.
   ============================================================ */
:root{
  color-scheme:dark;

  --void:#0A0B0C;
  --hull:#141517;
  --hull-2:#1B1D1F;
  --rule:#3F3F3F;          /* Markenfarbe, hier als Kanten- und Linienfarbe */
  --rule-soft:#26282A;
  --muted:#8C8C8C;
  --regolith:#A9A6A0;      /* warmes Grau, Raumanzug */
  --ice:#ECEDEE;

  --kapton:#D8A45A;        /* Goldfolie */
  --kapton-wash:rgba(216,164,90,.13);
  --limb:#6E9BD1;          /* Erdrand */
  --field:#1B1E22;
  --field-on:#22262B;
  --field-line:#454B52;
  --go:#5FBE8C;
  --nogo:#E0645A;
  --nogo-wash:rgba(224,100,90,.12);

  --glass:rgba(10,11,12,.62);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);

  --r-s:6px; --r-m:12px; --r-l:20px;
  --page:min(1200px, 100% - 3rem);

  --f-sans:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Réseau-Kreuze: die Messmarken, die auf jeder Hasselblad-Aufnahme
     der Mondmissionen mitbelichtet wurden. */
  --reseau:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 42v12M42 48h12' stroke='%23ffffff' stroke-width='1' stroke-opacity='.16'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--void); color:var(--ice);
  font-family:var(--f-sans); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2.5px solid var(--kapton); outline-offset:3px; border-radius:4px}

/* ---------- Typo-Rollen ---------- */
.display{
  font-family:var(--f-sans); font-weight:700;
  font-size:clamp(2.05rem, 4.4vw, 3.55rem); line-height:1.02;
  letter-spacing:-.035em; margin:0; text-wrap:balance;
}
.h2{
  font-family:var(--f-sans); font-weight:700;
  font-size:clamp(1.65rem, 3.2vw, 2.5rem); line-height:1.08;
  letter-spacing:-.026em; margin:0; text-wrap:balance;
}
.h3{font-size:1.125rem; font-weight:600; line-height:1.3; letter-spacing:-.012em; margin:0}
.lede{font-size:clamp(1.0625rem,1.5vw,1.22rem); line-height:1.58; letter-spacing:-.004em; color:var(--regolith); margin:0; max-width:36em; text-wrap:pretty}
p{margin:0}
.label{
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0;
}
.label--gold{color:var(--kapton)}

/* Lange Zusammensetzungen ("Datenschutzerklärung", niederlaendisch
   "Verwerkingsverantwoordelijke") passen auf schmalen Bildschirmen nicht in
   eine Zeile und liefen ueber den Rand. Dort wird getrennt -- nach den
   Regeln der Seitensprache, die WPML im lang-Attribut setzt -- und nur
   notfalls mitten im Wort umbrochen. Auf breiten Bildschirmen aendert sich nichts. */
@media (max-width:600px){
  h1, h2, h3, .display, .h2, .h3{
    -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere;
  }
  /* Fliesstext: "break-word" statt "anywhere", damit Tabellen (etwa die
     Cookie-Uebersicht von Complianz) ihre Spalten nicht zusammenquetschen. */
  .lede, .prose{ -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
}

/* ---------- Layout ---------- */
.wrap{width:var(--page); margin-inline:auto}
.band{padding-block:clamp(3.5rem,8vw,7rem)}
.band + .band{border-top:1px solid var(--rule-soft)}
.band__head{display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-bottom:clamp(2rem,4vw,3.25rem); max-width:48rem}

/* ---------- Navigation ---------- */
.nav{position:sticky; top:0; z-index:60}
.nav__scrim{
  position:absolute; inset:0 0 -20px 0; pointer-events:none; background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  opacity:0; transition:opacity 220ms ease;
}
.nav[data-stuck="true"] .nav__scrim{opacity:1}
.nav__inner{position:relative; width:var(--page); margin-inline:auto; display:flex; align-items:center; gap:1.75rem; height:74px}
.brand{display:inline-flex; margin-right:auto; line-height:0; flex-shrink:0}
/* flex-shrink:0: Wird es in der Leiste eng, darf das Logo nicht mit
   schrumpfen -- sonst wird es bei fester Hoehe seitlich gestaucht. */
.brand img{height:30px; width:auto; flex-shrink:0}
.nav__links{display:flex; gap:1.35rem; list-style:none; margin:0; padding:0}
.nav__links a{
  font-size:.9375rem; color:var(--regolith); text-decoration:none; white-space:nowrap;
  transition:color 130ms ease; padding-block:.35rem;
}
.nav__links a:hover{color:var(--ice)}
.nav__links a[aria-current="page"]{color:var(--ice); box-shadow:inset 0 -2px 0 var(--kapton)}

/* Untermenü: klappt bei Zeiger und bei Tastaturfokus auf, ohne JavaScript. */
.nav__links li{position:relative}
.nav__links .has-sub > a::after{content:"⌄"; font-size:.8em; margin-left:.35rem; opacity:.6; vertical-align:.1em}
.nav__links .sub{
  position:absolute; top:100%; left:-.85rem; min-width:11rem; list-style:none; margin:0;
  padding:.4rem; display:grid; gap:.1rem;
  background:rgba(10,11,12,.97); border:1px solid var(--rule); border-radius:var(--r-m);
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.nav__links .has-sub:hover > .sub,
.nav__links .has-sub:focus-within > .sub{opacity:1; visibility:visible; transform:translateY(0)}
.nav__links .sub a{display:block; padding:.5rem .75rem; border-radius:var(--r-s); font-size:.875rem}
.nav__links .sub a:hover, .nav__links .sub a:focus-visible{background:var(--hull-2); color:var(--ice)}
@media (prefers-reduced-motion: reduce){ .nav__links .sub{transition:none} }

/* Im Mobilmenü stehen die Untereinträge eingerückt darunter. */
.menu__links .sub{list-style:none; margin:0; padding:0 0 0 1.1rem; display:grid}
.menu__links .sub a{font-size:1rem; color:var(--muted); padding:.65rem 0}
.menu__links .has-sub > a::after{content:""}

/* ---------- Menüschalter ---------- */
.burger{
  display:none; position:relative; width:42px; height:42px; flex:0 0 auto;
  border:0; background:transparent; cursor:pointer; padding:0;
}
.burger__b{
  position:absolute; left:11px; width:20px; height:2px; border-radius:2px;
  background:var(--ice); transition:transform 260ms cubic-bezier(.2,.7,.3,1), opacity 160ms ease;
}
.burger__b:nth-child(1){top:16px}
.burger__b:nth-child(2){top:24px}
.burger[aria-expanded="true"] .burger__b:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__b:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ---------- Mobilmenü ---------- */
.menu{
  position:absolute; inset:100% 0 auto 0;
  /* Dichter als die Kopfleiste: hier steht Text drauf, der lesbar bleiben muss. */
  background:rgba(10,11,12,.94);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid var(--rule-soft);
  will-change:transform, opacity;
}
.menu[hidden]{display:none}
.menu__in{width:var(--page); margin-inline:auto; padding-block:1rem 1.75rem; display:grid; gap:1.25rem}
.menu__links{list-style:none; margin:0; padding:0; display:grid}
.menu__links a{
  display:block; padding:.85rem 0; font-size:1.125rem; font-weight:500; letter-spacing:-.012em;
  color:var(--regolith); text-decoration:none; border-bottom:1px solid var(--rule-soft);
}
.menu__links a:hover, .menu__links a:focus-visible{color:var(--ice)}
.menu__links a[aria-current="page"]{color:var(--kapton)}
.menu__cta{justify-self:start}
.menu__tel a{
  display:inline-block; min-height:24px; padding-block:.25rem;
  font-family:var(--f-mono); font-size:.875rem; letter-spacing:.04em;
  color:var(--muted); text-decoration:none;
}
.menu__tel a:hover{color:var(--kapton)}
body[data-menu="true"]{overflow:hidden}

/* Knapp oberhalb des Umschaltpunkts wird es mit drei Sprachen und den
   laengeren deutschen und niederlaendischen Menuewoertern eng. Statt das
   Logo zu stauchen, ruecken hier die Abstaende etwas zusammen. */
@media (min-width:1181px) and (max-width:1320px){
  .nav__inner{gap:1.125rem}
  .nav__links{gap:.9rem}
}

/* Umschaltpunkt: darunter reicht die Breite für sieben Einträge nicht mehr */
@media (max-width:1180px){
  .nav__wide{display:none}
  .nav__inner .burger{display:block}
}
/* Der Aufruf bleibt sichtbar, solange Platz ist — auf sehr schmalen
   Geraeten uebernimmt ihn das Menue. */
@media (max-width:600px){ .nav__inner .nav__cta{display:none} }
/* Mit drei Sprachen braucht der Umschalter in der Kopfleiste rund 95 px.
   Auf sehr schmalen Geraeten (unter 360 px) schoebe er den Menueschalter
   ueber den Rand. Dort entfaellt er oben -- im Menue steht er ohnehin. */
@media (max-width:359px){ .nav__inner .nav__lang{display:none} }
@media (max-width:900px){ .nav__inner{height:64px} .brand img{height:24px} .nav__inner{gap:1rem} }
@media (prefers-reduced-transparency: reduce){
  .menu{background:var(--void); backdrop-filter:none; -webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion: reduce){ .burger__b{transition:none} }

/* ---------- Schaltflächen ---------- */
.btn{
  --bg:var(--kapton); --fg:#14100A;
  display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap; max-width:100%;
  font-family:var(--f-sans); font-size:.9375rem; font-weight:600; letter-spacing:-.004em;
  padding:.72rem 1.2rem; border-radius:999px; border:1px solid transparent;
  background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer;
  transition:transform 110ms cubic-bezier(.2,.7,.3,1), background-color 150ms ease, border-color 150ms ease;
  will-change:transform;
}
.btn:active{transform:scale(.965)}
.btn:hover{background:#E4B36D}
.btn--ghost{--bg:transparent; --fg:var(--ice); border-color:var(--rule)}
.btn--ghost:hover{background:transparent; border-color:var(--kapton)}
.btn--sm{padding:.5rem .95rem; font-size:.875rem; white-space:nowrap}
.btn__meta{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.04em; opacity:.7; font-weight:400}

/* ---------- Bilder mit Messmarken ---------- */
.plate{margin:0}
.plate__f{position:relative}
.plate img{width:100%; border-radius:var(--r-m)}
.plate__f::before, .plate__f::after{
  content:""; position:absolute; width:34px; height:34px; pointer-events:none;
  border:1px solid var(--rule); opacity:.85;
}
.plate__f::before{top:-1px; left:-1px; border-right:0; border-bottom:0; border-top-left-radius:var(--r-m)}
.plate__f::after{bottom:-1px; right:-1px; border-left:0; border-top:0; border-bottom-right-radius:var(--r-m)}
.plate figcaption{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:.7rem;
}

/* ---------- Hero ---------- */
.hero{position:relative; padding-top:clamp(2.5rem,5vw,4.5rem); padding-bottom:clamp(3rem,6vw,5rem); overflow:hidden}
.hero__field{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--reseau);
  -webkit-mask-image:radial-gradient(115% 75% at 30% 0%, #000 0%, transparent 70%);
  mask-image:radial-gradient(115% 75% at 30% 0%, #000 0%, transparent 70%);
}
.hero__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 38% at 78% 18%, rgba(216,164,90,.14) 0%, transparent 70%),
    radial-gradient(50% 40% at 8% 4%, rgba(110,155,209,.10) 0%, transparent 72%);
}
.hero__inner{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; align-items:center}
.hero__text{display:grid; gap:1.5rem; justify-items:start}
.hero__cta{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
@media (min-width:1000px){
  .hero__inner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); column-gap:3.5rem}
}
.hero__plate{opacity:0}

/* ============================================================
   SIGNATUR: der Apogäum-Rechner.
   Die Bahn aus der Bildmarke wird zum Regler.
   ============================================================ */
.calc{
  position:relative; background:var(--hull); border:1px solid var(--rule);
  border-radius:var(--r-l); overflow:hidden;
}
.calc::before{
  content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--reseau);
  -webkit-mask-image:radial-gradient(80% 70% at 28% 0%, #000, transparent 72%);
  mask-image:radial-gradient(80% 70% at 28% 0%, #000, transparent 72%);
}
.calc__bar{
  position:relative; display:flex; flex-wrap:wrap; gap:.9rem 1.25rem; align-items:center;
  padding:1.15rem 1.35rem; border-bottom:1px solid var(--rule-soft);
}
.calc__bar > div:first-child{margin-right:auto}
.chips{display:flex; flex-wrap:wrap; gap:.3rem; max-width:100%; background:var(--void); border:1px solid var(--rule-soft); border-radius:999px; padding:.25rem}
.chip{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.02em; color:var(--regolith);
  padding:.4rem .8rem; border-radius:999px; border:0; background:transparent; cursor:pointer; white-space:nowrap; flex:0 0 auto;
  transition:transform 110ms cubic-bezier(.2,.7,.3,1), background-color 160ms ease, color 160ms ease;
}
.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{background:var(--hull-2); color:var(--ice)}

.calc__body{position:relative; display:grid; gap:2rem; padding:1.6rem 1.35rem 1.9rem}
@media (min-width:920px){ .calc__body{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:2.75rem; padding:2rem 1.75rem 2.25rem; align-items:center} }

.orbit{position:relative; touch-action:none; -webkit-user-select:none; user-select:none}
.orbit svg{width:100%; height:auto; display:block; overflow:visible}
.orbit__track{fill:none; stroke:var(--rule); stroke-width:2}
.orbit__fill{fill:none; stroke:var(--kapton); stroke-width:2.5; stroke-linecap:round}
.orbit__tick{stroke:var(--rule); stroke-width:1.5}
.orbit__halo{fill:var(--kapton); opacity:.18}
.orbit__sat{fill:var(--kapton); stroke:var(--void); stroke-width:2.5}
.orbit__hit{fill:transparent; cursor:grab}
.orbit__hit:active{cursor:grabbing}
.orbit__ends{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; fill:var(--muted)}
.orbit__read{
  position:absolute; left:50%; top:62%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; width:66%;
}
.orbit__read .k{display:block; font-family:var(--f-mono); font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem}
.orbit__read .v{
  display:block; font-family:var(--f-mono); font-weight:700;
  font-size:clamp(1.55rem,4.2vw,2.5rem); letter-spacing:-.02em; color:var(--ice);
  font-variant-numeric:tabular-nums;
}

.rows{display:grid; gap:1.15rem}
.row__top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.5rem}
.row__k{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.row__v{font-family:var(--f-mono); font-size:.9375rem; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ice)}
.bar{height:8px; border-radius:999px; background:var(--hull-2); overflow:hidden}
.bar i{display:block; height:100%; width:0; border-radius:999px}
.bar--home i{background:var(--kapton)}
.bar--away i{background:var(--limb)}
.save{
  margin-top:.4rem; padding:1.1rem 1.15rem; border-radius:var(--r-m);
  background:var(--kapton-wash); border:1px solid rgba(216,164,90,.28);
  display:grid; gap:.35rem;
}
.save__v{font-family:var(--f-mono); font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem); letter-spacing:-.02em; color:var(--kapton); font-variant-numeric:tabular-nums}
.save__x{font-size:.875rem; color:var(--regolith)}
.calc__note{
  position:relative; padding:.95rem 1.35rem; border-top:1px solid var(--rule-soft);
  font-family:var(--f-mono); font-size:.6875rem; line-height:1.7; letter-spacing:.02em; color:var(--muted);
}

/* ---------- Pakete ---------- */
.tiers{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); border-radius:var(--r-l); overflow:hidden}
@media (min-width:860px){ .tiers{grid-template-columns:repeat(3,1fr)} }
.tier{background:var(--hull); padding:1.6rem 1.5rem 1.8rem; display:grid; gap:.85rem; align-content:start}
.tier[data-featured="true"]{background:var(--hull-2)}
.tier__k{display:flex; align-items:baseline; gap:.6rem}
.tier__k .label{margin-right:auto}
.tier__p{font-family:var(--f-mono); font-weight:700; font-size:1.75rem; letter-spacing:-.02em; color:var(--ice)}
.tier__p span{font-size:.75rem; font-weight:400; letter-spacing:.1em; color:var(--muted); margin-left:.35rem}
.tier ul{list-style:none; margin:.3rem 0 0; padding:0; display:grid; gap:.5rem}
.tier li{display:flex; gap:.65rem; font-size:.9375rem; color:var(--regolith); line-height:1.5}
.tier li::before{content:"+"; font-family:var(--f-mono); color:var(--kapton); flex:0 0 auto}

/* ---------- Icons (Font Awesome Free, inline eingebettet) ---------- */
.ic{width:1em; height:1em; fill:currentColor; flex:0 0 auto; vertical-align:-.125em}
.ic--yes{color:var(--go)}
.ic--no{color:var(--nogo)}

/* ---------- Gegenüberstellung ---------- */
.vs{border:1px solid var(--rule); border-radius:var(--r-l); overflow:hidden; background:var(--hull)}
.vs__head{display:none}
@media (min-width:900px){
  .vs__head{
    display:grid; grid-template-columns:12rem minmax(0,1fr) minmax(0,1fr); gap:1.5rem;
    padding:1rem 1.5rem; border-bottom:1px solid var(--rule);
    font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  }
  .vs__hb{display:flex; align-items:center; gap:.5rem; color:var(--nogo)}
  .vs__hg{display:flex; align-items:center; gap:.5rem; color:var(--go)}
}
.vs__row{
  display:grid; gap:.55rem; padding:1.15rem 1.35rem;
  border-top:1px solid var(--rule-soft);
}
.vs__row:first-of-type{border-top:0}
@media (min-width:900px){
  .vs__row{grid-template-columns:12rem minmax(0,1fr) minmax(0,1fr); gap:1.5rem; padding:1.05rem 1.5rem; align-items:start}
}
.vs__k{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding-top:.1rem;
}
.vs__bad, .vs__good{display:flex; gap:.7rem; font-size:.9375rem; line-height:1.5; min-width:0}
.vs__bad{color:var(--regolith)}
.vs__good{color:var(--ice)}
.vs__bad .ic, .vs__good .ic{margin-top:.28rem; font-size:1rem}
@media (min-width:900px){ .vs__head .ic{font-size:.9rem} }

.split{display:grid; gap:2.25rem; align-items:center}
@media (min-width:960px){ .split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:3.5rem} }
.ticks{display:grid; gap:.6rem; margin:.5rem 0 0; padding:0; list-style:none}
.ticks li{display:flex; gap:.7rem; align-items:flex-start; font-size:.9375rem; color:var(--regolith); line-height:1.5}
.ticks li::before{
  content:""; flex:0 0 auto; width:6px; height:6px; margin-top:.6rem;
  border-radius:999px; background:var(--kapton);
}

.locs{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft);
       border-radius:var(--r-l); overflow:hidden; margin-bottom:2.5rem}
@media (min-width:760px){ .locs{grid-template-columns:1fr 1fr} }
.loc{background:var(--hull); padding:1.6rem 1.5rem 1.75rem; display:grid; gap:.35rem; align-content:start}
.loc__y{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--kapton)}
.loc__n{font-family:var(--f-sans); font-size:1.35rem; font-weight:700; letter-spacing:-.022em; margin:.15rem 0 0; color:var(--ice)}
.loc__a{font-family:var(--f-mono); font-size:.8125rem; color:var(--regolith)}
.loc__d{font-size:.9375rem; line-height:1.55; color:var(--regolith); margin-top:.5rem}

.epilog{background:var(--hull-2)}
.nasa{display:grid; gap:1.25rem}
@media (min-width:520px){ .nasa{grid-template-columns:1fr 1fr; align-items:start} }
.nasa img{aspect-ratio:4/3; object-fit:cover}
.nasa .plate figcaption{margin-top:.55rem}
.epilog .split{align-items:start}
@media (min-width:960px){ .epilog .split{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)} }

/* ---------- Ausstattung als Zeichen ---------- */
.kits{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule-soft);
      border:1px solid var(--rule-soft); border-radius:var(--r-l); overflow:hidden}
@media (min-width:560px){ .kits{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .kits{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1140px){ .kits{grid-template-columns:repeat(4,1fr)} }
.kit{background:var(--hull); padding:1.5rem 1.35rem 1.6rem; display:grid; gap:.4rem; align-content:start}
.kit__i{font-size:1.5rem; width:1em; height:1em; fill:var(--kapton); margin-bottom:.55rem}
.kit__t{font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--ice)}
.kit__d{font-size:.875rem; line-height:1.5; color:var(--regolith)}

/* ---------- Nutzungsszenarien ---------- */
.uses{display:grid; gap:1.5rem}
@media (min-width:820px){ .uses{grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); border-radius:var(--r-l); overflow:hidden} }
.use{display:grid; gap:.9rem; align-content:start}
.use__img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-m); border:1px solid var(--rule-soft); margin-bottom:.35rem}
@media (min-width:820px){ .use__img{border-radius:0; border:0; border-bottom:1px solid var(--rule-soft); margin:-1.6rem -1.5rem .55rem} }
@media (min-width:820px){ .use{background:var(--hull); padding:1.6rem 1.5rem 1.8rem} }
.use ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.use li{display:flex; gap:.65rem; font-size:.9375rem; color:var(--regolith); line-height:1.5}
.use li::before{content:"›"; font-family:var(--f-mono); color:var(--kapton); flex:0 0 auto}
.use__note{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.06em; color:var(--muted); line-height:1.7; margin-top:.2rem}

/* ---------- Ausstattung / Datenblock ---------- */
.specs{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); border-radius:var(--r-m); overflow:hidden}
@media (min-width:640px){ .specs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .specs{grid-template-columns:repeat(4,1fr)} }
.spec{background:var(--void); padding:1.15rem 1.2rem; display:grid; gap:.3rem; align-content:start}
.spec dt{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.spec dd{margin:0; font-size:.9375rem; color:var(--ice); line-height:1.45}

.data{display:grid; gap:0; border-top:1px solid var(--rule-soft)}
.data__r{display:grid; gap:.2rem 1.5rem; padding:.95rem 0; border-bottom:1px solid var(--rule-soft)}
@media (min-width:700px){ .data__r{grid-template-columns:13rem 1fr; align-items:baseline} }
.data__k{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.data__v{font-size:.9375rem; color:var(--ice); line-height:1.5}
.data__v b{color:var(--kapton); font-weight:500; font-family:var(--f-mono); font-size:.875rem}
.data__v a{display:inline-block; min-height:24px; padding-block:.2rem}

/* ---------- Bildbanner ---------- */
.bleed{position:relative; border-block:1px solid var(--rule-soft)}
.bleed__img{width:100%; height:clamp(240px, 46vh, 500px); object-fit:cover; object-position:50% 42%; border-radius:0}
.bleed__credit{
  position:absolute; bottom:.7rem; right:1.1rem;
  font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(236,237,238,.7); text-shadow:0 1px 3px rgba(0,0,0,.9);
}

/* ---------- Kontakt ---------- */
.contact{display:grid; gap:2.5rem}
@media (min-width:920px){ .contact{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:4rem; align-items:start} }
.form{display:grid; gap:1rem}
.field{display:grid; gap:.4rem}
.field label{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--regolith);
}
.field .req{color:var(--kapton)}
.field input, .field textarea, .field select{
  font-family:var(--f-sans); font-size:1rem; color:var(--ice);
  /* Heller als der Seitengrund, damit die Felder als Felder lesbar sind.
     Der Rahmen traegt die Kante, die Flaeche traegt die Erkennbarkeit. */
  background:var(--field); border:1px solid var(--field-line); border-radius:var(--r-s);
  padding:.8rem .95rem; width:100%; transition:border-color 150ms ease, background-color 150ms ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.field select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--regolith) 50%),linear-gradient(135deg,var(--regolith) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:2.4rem}
.field input::placeholder, .field textarea::placeholder{color:var(--muted)}
.field input:hover, .field textarea:hover, .field select:hover{border-color:var(--rule)}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{
  border-color:var(--kapton); outline:2px solid var(--kapton); outline-offset:1px; background:var(--field-on);
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--kapton); background:var(--field-on)}
.field textarea{resize:vertical; min-height:8rem; line-height:1.55}
.form__row{display:grid; gap:1rem}
@media (min-width:560px){ .form__row{grid-template-columns:1fr 1fr} }
@media (min-width:760px){ .form__row--3{grid-template-columns:1fr 1fr 1fr} }
.form__note{font-size:.8125rem; line-height:1.6; color:var(--muted)}
.form__note a{color:var(--kapton)}
.form__send{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:.3rem}
.form__status{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.06em; line-height:1.6;
  max-width:26rem; color:var(--muted);
}
.form__status[data-state="ok"]{color:var(--go)}
.form__status[data-state="warn"]{color:var(--kapton)}

/* ---------- Kontaktangaben ---------- */
.reach{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft);
       border-radius:var(--r-l); overflow:hidden}
@media (min-width:760px){ .reach{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .reach{grid-template-columns:repeat(4,1fr)} }
.reach__i{background:var(--hull); padding:1.5rem 1.4rem 1.6rem; display:grid; gap:.35rem; align-content:start}
.reach__i .ic{font-size:1.35rem; fill:var(--kapton); margin-bottom:.5rem}
.reach__k{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.reach__v{font-size:1rem; line-height:1.5; color:var(--ice)}
.reach__v a{color:var(--ice); text-decoration:none; display:inline-block; min-height:24px; padding-block:.15rem}
.reach__v a:hover{color:var(--kapton)}
.reach__x{font-size:.875rem; color:var(--regolith); line-height:1.5}

/* ---------- Räume ---------- */
.rooms{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft);
       border-radius:var(--r-l); overflow:hidden}
@media (min-width:900px){ .rooms{grid-template-columns:repeat(3,1fr)} }
.room{background:var(--hull); display:grid; align-content:start}
.room img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block}
.room__in{padding:1.4rem 1.4rem 1.6rem; display:grid; gap:.5rem}
.room__n{display:flex; align-items:baseline; gap:.65rem; flex-wrap:wrap}
.room__n b{font-family:var(--f-sans); font-size:1.35rem; font-weight:700; letter-spacing:-.022em; color:var(--ice)}
.room__n span{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--kapton)}
.room__s{font-family:var(--f-mono); font-size:.8125rem; color:var(--regolith)}
.room dl{display:grid; gap:.45rem; margin:.4rem 0 0}
.room dt{font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.room dd{margin:0; font-size:.9375rem; line-height:1.5; color:var(--regolith)}

/* ---------- Fuß ---------- */

.foot{padding-block:3rem 3.5rem; border-top:1px solid var(--rule-soft)}
.foot__grid{display:grid; gap:2rem}
@media (min-width:760px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .foot__grid{grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem} }
.foot img{height:26px; width:auto}
.foot__h{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; font-weight:500}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.foot ul a{display:inline-block; padding-block:.3rem; min-height:24px}
.foot a{color:var(--regolith); text-decoration:none; font-size:.9375rem}
.foot a:hover{color:var(--kapton)}
/* Schalter "Cookie-Einstellungen": ein <button>, weil er nichts laedt, sondern
   das Einwilligungsfenster oeffnet -- sieht aber aus wie die Links daneben. */
.foot__consent{
  display:inline-block; min-height:24px; padding:.3rem 0; margin:0;
  background:none; border:0; border-radius:0; cursor:pointer; text-align:left;
  font:inherit; font-size:.9375rem; color:var(--regolith); line-height:inherit;
}
.foot__consent:hover{color:var(--kapton)}
.foot__consent:focus-visible{outline:2px solid var(--kapton); outline-offset:3px; border-radius:2px}
.foot__legal{margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--rule-soft); font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.03em; color:var(--muted); line-height:1.9}

/* ---------- Zugänglichkeit ---------- */
@media (prefers-reduced-motion: reduce){
  .btn,.chip{transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease}
  .btn:active,.chip:active{transform:none}
  .hero__plate{opacity:1 !important; transform:none !important; filter:none !important}
}
@media (prefers-reduced-transparency: reduce){
  .nav__scrim{background:var(--void); backdrop-filter:none; -webkit-backdrop-filter:none}
  .hero__glow{display:none}
}
@media (prefers-contrast: more){
  :root{--rule:#9A9A9A; --rule-soft:#6E6E6E; --muted:#BFBFBF; --regolith:#DCDAD6}
  .hero__field, .calc::before{display:none}
  .nav__scrim{background:var(--void); backdrop-filter:none}
}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:.6rem; z-index:200; background:var(--hull); padding:.6rem 1rem; border-radius:var(--r-s); box-shadow:var(--shadow)}
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ============================================================
   Ergaenzungen fuer WordPress
   ============================================================ */

/* Inhaltsseiten (Impressum, Datenschutz) */
.prose{max-width:44rem; color:var(--regolith); font-size:1rem; line-height:1.7}
.prose > * + *{margin-top:1.1rem}
.prose h2{font-family:var(--f-sans); font-size:1.5rem; font-weight:700; letter-spacing:-.02em; color:var(--ice); margin-top:2.25rem}
.prose h3{font-family:var(--f-sans); font-size:1.125rem; font-weight:600; letter-spacing:-.012em; color:var(--ice); margin-top:1.75rem}
.prose a{color:var(--kapton); text-decoration:underline; text-underline-offset:.18em}
/* Telefon- und E-Mail-Verweise werden auf dem Telefon wirklich angetippt und
   sollen die Mindestzielgroesse erreichen. Reine Fliesstext-Verweise bleiben
   unveraendert — fuer sie gilt die Ausnahme fuer Verweise im Satz. */
.prose a[href^="tel:"], .prose a[href^="mailto:"]{
  display:inline-block; padding-block:.2rem; min-height:24px;
}
.prose a:hover{color:var(--ice)}
.prose ul, .prose ol{padding-left:1.25rem}
.prose li + li{margin-top:.35rem}
.prose strong{color:var(--ice); font-weight:600}
.prose table{width:100%; border-collapse:collapse; font-size:.9375rem}
.prose th, .prose td{text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--rule-soft)}

/* ---------- Complianz: Cookie-Uebersichtstabelle ---------- */
/* Complianz gibt seine Tabellen oft mit Inline-Hintergrundfarben aus
   (hellgrau/weiss), die eine normale Regel nicht ueberschreiben kann.
   Deshalb hier gezielt und mit !important. Die genauen Klassen stammen
   aus Complianz -> Einstellungen -> Document CSS; falls eine kuenftige
   Plugin-Version die Namen aendert, dort nachsehen und hier anpassen.

   Zwei Formen kommen vor: eine div-basierte Auflistung (innerhalb von
   #cmplz-document / #cmplz-cookies-overview) und eine gewoehnliche
   <table>. Beide werden hier abgedeckt -- letztere zusaetzlich ohne
   ID-Bindung, weil Complianz sie mitunter ausserhalb dieser Wrapper
   ausgibt. Die Selektoren bleiben auf .prose beschraenkt, damit keine
   andere Tabelle auf der Seite ungewollt mit betroffen ist. */
.prose #cmplz-document,
.prose #cmplz-cookies-overview{
  color:var(--regolith);
}
.prose table,
.prose #cmplz-document .cmplz-dropdown,
.prose #cmplz-cookies-overview .cmplz-dropdown{
  background:var(--hull) !important;
  border:1px solid var(--rule-soft);
  border-radius:var(--r-m);
  overflow:hidden;
}
.prose th,
.prose td,
.prose #cmplz-document .cmplz-dropdown .cookies-per-purpose div,
.prose #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div{
  background:var(--hull) !important;
  color:var(--regolith) !important;
  border-color:var(--rule-soft) !important;
}
.prose th,
.prose .name-header{
  background:var(--hull-2) !important;
  color:var(--ice) !important;
  font-family:var(--f-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.prose #cmplz-document a,
.prose #cmplz-cookies-overview a{
  color:var(--kapton) !important;
}
/* Aufklapp-Koepfe der Kategorien (Notwendig, Statistik, ...) */
.prose #cmplz-document .cmplz-dropdown > div:first-child,
.prose #cmplz-cookies-overview .cmplz-dropdown > div:first-child{
  background:var(--hull-2) !important;
  color:var(--ice) !important;
}
.prose img{border-radius:var(--r-m); margin-block:1.5rem}
.prose blockquote{border-left:2px solid var(--kapton); padding-left:1.1rem; color:var(--regolith)}

/* Rueckmeldung des Kontaktformulars */
#formNote{max-width:26rem; line-height:1.6; letter-spacing:.06em}
#formNote[data-state="ok"]{color:var(--go)}
#formNote[data-state="warn"]{color:var(--kapton)}

/* Blockeditor-Ausrichtungen auf Inhaltsseiten */
.prose .alignwide{width:min(100%, 56rem)}
.prose .alignfull{width:100%}
.prose .wp-caption-text, .prose figcaption{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-top:.5rem;
}

/* ---------- Sprachumschalter (WPML) ---------- */
.nav__lang{
  display:flex; align-items:center; gap:.15rem; list-style:none; margin:0 .35rem 0 0; padding:0;
  /* Sprachkuerzel (JetBrains Mono 12px) und Navigationstext (Space Grotesk 15px)
     haben unterschiedliche Schriftmetriken. Bei mittiger Ausrichtung der Kaesten
     liegt die Grundlinie der kleineren Schrift gemessene 1,75px hoeher. Der
     Versatz gleicht genau das aus, ohne die Zeile insgesamt zu verschieben. */
  position:relative; top:2px;
}
/* align-items:center ist hier entscheidend: ohne das wird das ::before-Element
   auf volle Zeilenhoehe gestreckt und der Schraegstrich klebt oben. */
.nav__lang li{display:flex; align-items:center}
.nav__lang li + li::before{
  content:"/"; color:var(--rule); font-family:var(--f-mono); font-size:.75rem;
  line-height:19px; display:flex; align-items:center; margin-inline:.15rem;
}
.nav__lang a{
  font-family:var(--f-mono); font-size:.75rem; letter-spacing:.08em; font-weight:500;
  color:var(--muted); text-decoration:none; transition:color 130ms ease;
  /* Dieselbe Zeilenbox wie .nav__links a (19px Inhalt + 2x .35rem Innenabstand),
     damit die Schrift exakt auf einer Hoehe mit den uebrigen Eintraegen sitzt. */
  display:inline-flex; align-items:center; line-height:19px; padding:.35rem .2rem;
}
.nav__lang a:hover{color:var(--ice)}
.nav__lang li.is-active a{color:var(--kapton)}

/* Im Mobilmenü wie ein eigener Navigationseintrag, mit Abstand zu den Seiten darüber. */
.menu__lang{
  display:flex; gap:1.25rem; list-style:none; margin:.25rem 0 0; padding:1rem 0 0;
  border-top:1px solid var(--rule-soft);
}
.menu__lang a{
  font-family:var(--f-mono); font-size:.9375rem; letter-spacing:.06em; font-weight:500;
  color:var(--muted); text-decoration:none; padding:.4rem 0; min-height:24px; display:inline-flex; align-items:center;
}
.menu__lang li.is-active a{color:var(--kapton)}

/* Admin-Leiste nicht unter die klebende Kopfzeile schieben */
.admin-bar .nav{top:32px}
@media screen and (max-width:782px){ .admin-bar .nav{top:46px} }

/* ============================================================
   Unterseiten
   ============================================================ */

/* Brotkrumen */
.crumbs{padding-top:1.5rem}
.crumbs, .crumbs a{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--kapton)}
.crumbs .breadcrumb_last{color:var(--regolith)}

/* Kopf einer Unterseite */
.phero{position:relative; padding-block:clamp(2rem,4vw,3.25rem) clamp(2.5rem,5vw,4rem); overflow:hidden}
.phero__glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(48% 40% at 82% 10%, rgba(216,164,90,.12) 0%, transparent 70%),
             radial-gradient(46% 36% at 6% 0%, rgba(110,155,209,.09) 0%, transparent 72%)}
.phero__in{position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:2.25rem; align-items:center}
@media (min-width:1000px){ .phero__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:3.25rem} }
.phero__t{display:grid; gap:1.25rem; justify-items:start}
.phero h1{font-family:var(--f-sans); font-weight:700; margin:0; text-wrap:balance;
  font-size:clamp(1.95rem, 4.1vw, 3.15rem); line-height:1.04; letter-spacing:-.032em}

/* Zwei Bewertungsspalten: passt / passt nicht */
.fit{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft);
     border-radius:var(--r-l); overflow:hidden}
@media (min-width:820px){ .fit{grid-template-columns:1fr 1fr} }
.fit__col{background:var(--hull); padding:1.6rem 1.5rem 1.8rem; display:grid; gap:1rem; align-content:start}
.fit__h{display:flex; align-items:center; gap:.6rem; font-family:var(--f-mono); font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase}
.fit__col[data-tone="yes"] .fit__h{color:var(--go)}
.fit__col[data-tone="no"] .fit__h{color:var(--nogo)}
.fit ul{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.fit li{display:grid; gap:.2rem}
.fit li b{font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--ice)}
.fit li span{font-size:.9375rem; line-height:1.5; color:var(--regolith)}

/* Nummerierte Bedingungen */
.conds{display:grid; counter-reset:cond; border-top:1px solid var(--rule-soft)}
.cond{display:grid; gap:.4rem 1.5rem; padding:1.5rem 0; border-bottom:1px solid var(--rule-soft);
  grid-template-columns:auto 1fr}
@media (min-width:820px){ .cond{grid-template-columns:3.5rem 17rem 1fr; align-items:baseline} }
.cond__n{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.1em; color:var(--kapton); counter-increment:cond}
.cond__n::before{content:counter(cond, decimal-leading-zero)}
.cond__t{font-size:1.0625rem; font-weight:600; letter-spacing:-.012em; color:var(--ice); grid-column:2}
.cond__d{color:var(--regolith); font-size:.9375rem; line-height:1.6; grid-column:2}
@media (min-width:820px){ .cond__d{grid-column:3; grid-row:1} }
.cond__d code{font-family:var(--f-mono); font-size:.8125rem; color:var(--kapton); background:none; padding:0}

/* Abschluss-Aufruf */
.cta{background:var(--hull); border:1px solid var(--rule); border-radius:var(--r-l);
     padding:clamp(1.75rem,4vw,2.75rem); display:grid; gap:1rem; justify-items:start}
.cta .h2{max-width:22em}

/* Verwandte Seiten */
.rel{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft);
     border-radius:var(--r-m); overflow:hidden; margin-top:clamp(2.5rem,5vw,4rem)}
@media (min-width:700px){ .rel{grid-template-columns:repeat(3,1fr)} }
.rel a{background:var(--hull); padding:1.25rem 1.35rem 1.4rem; display:grid; gap:.3rem;
  text-decoration:none; transition:background-color 160ms ease}
.rel a:hover{background:var(--hull-2)}
.rel b{font-size:.9375rem; font-weight:600; letter-spacing:-.01em; color:var(--ice)}
.rel span{font-size:.875rem; line-height:1.5; color:var(--muted)}

/* Weiterführender Verweis im Fließtext */
.more{display:inline-flex; align-items:center; gap:.4rem; font-size:.9375rem; font-weight:600;
  color:var(--kapton); text-decoration:none; margin-top:.35rem}
.more:hover{text-decoration:underline; text-underline-offset:.2em}
.more::after{content:"→"; font-family:var(--f-mono)}

.printhead, .form__print{display:none}

/* ============================================================
   Druck

   Wer die Seite ausdruckt, will sie jemandem zeigen oder ablegen.
   Deshalb: heller Grund, ein Kopf mit Anschrift, keine Fotos (dunkle
   Aufnahmen kosten Toner und werden auf Papier zu Matsch), und keine
   leeren Flaechen dort, wo am Bildschirm ein Bild oder Formular stand.
   ============================================================ */
@media print{

  @page{ margin:18mm 16mm 20mm; }

  :root{
    --void:#fff; --hull:#fff; --hull-2:#fff; --ice:#000; --regolith:#1a1a1a;
    --muted:#555; --rule:#888; --rule-soft:#c8c8c8; --kapton:#000; --kapton-deep:#000;
    --go:#000; --nogo:#000; --limb:#000; --brand:#000;
    --field:#fff; --field-on:#fff; --field-line:#888;
    --shadow:none; --shadow-l:none;
  }

  html, body{background:#fff !important; color:#000; font-size:10.5pt; line-height:1.45}
  body{-webkit-print-color-adjust:exact; print-color-adjust:exact}

  /* ---- Was auf Papier nichts verloren hat ---- */
  .nav, .menu, .burger, .skip, .crumbs,
  .hero__glow, .hero__field, .phero__glow,
  .btn, .hero__cta, .more, .form, .rel,
  .foot__grid > div:nth-child(2), .foot__grid > div:nth-child(3), .foot__grid > div:nth-child(4){
    display:none !important;
  }

  /* Fotos bleiben aussen vor — ausser dem Logo im Kopf. */
  .plate, .bleed, .nasa, .use__img, .room img, .pane__img, .hero__plate, .phero figure,
  .foot .brand{ display:none !important; }

  /* ---- Kopfzeile nur im Ausdruck ---- */
  .printhead{
    display:flex; gap:1.5rem; align-items:flex-start; justify-content:space-between;
    padding-bottom:.6rem; margin-bottom:1.4rem; border-bottom:1.5pt solid #000;
  }
  .printhead__logo{
    width:52mm; height:9.3mm; display:block;
    /* Nur hier referenziert: Der Browser laedt die Datei ausschliesslich,
       wenn tatsaechlich gedruckt wird — nicht bei jedem Seitenaufruf. */
    background:url('assets/img/logo-print.png') left top / contain no-repeat;
  }
  .printhead__meta{text-align:right; font-size:8pt; line-height:1.5; color:#333}
  .printhead__meta p{margin:0}

  /* ---- Struktur: alles einspaltig, keine Rasterluecken ---- */
  .wrap{width:100%; max-width:none}
  .band{padding-block:0 0; border:0; margin-bottom:9mm}
  .band + .band{border-top:0}
  .band__head{margin-bottom:4mm; max-width:none}
  .hero, .phero{padding-block:0; margin-bottom:9mm}
  .hero__inner, .phero__in, .split, .contact, .webinar, .flow__figs{
    display:block !important;
  }
  .hero__text, .phero__t{display:block}

  /* Raster, die am Bildschirm ihre Trennlinien ueber den Hintergrund
     zeichnen, wuerden auf Papier graue Fuellzellen hinterlassen. */
  .kits, .uses, .tiers, .vs, .rooms, .locs, .reach, .three, .fit, .quotes, .specs{
    background:none !important; border:0 !important; border-radius:0;
    display:grid; gap:0;
  }
  .kits{grid-template-columns:repeat(3,1fr)}
  .uses, .rooms, .locs, .reach, .three, .fit, .tiers, .quotes, .specs{grid-template-columns:repeat(2,1fr)}
  .kit, .use, .room, .loc, .reach__i, .pane, .fit__col, .tier, .quote, .spec{
    background:none !important; border:.5pt solid #bbb; border-radius:0;
    padding:3mm 3.5mm; margin:-0.25pt 0 0 -0.25pt;
  }
  .use, .room, .fit__col, .tier{break-inside:avoid}

  /* Gegenueberstellung als echte Tabelle lesbar halten */
  .vs__head{display:none}
  .vs__row{
    display:grid; grid-template-columns:1fr; gap:1mm;
    padding:2.5mm 0; border-top:.5pt solid #ccc; break-inside:avoid;
  }
  .vs__row:first-of-type{border-top:0}
  .vs__k{font-size:7.5pt; letter-spacing:.12em}
  .vs__bad, .vs__good{font-size:9.5pt}
  .vs__bad{color:#444}
  .vs__good{color:#000; font-weight:500}

  /* ---- Typografie ---- */
  .display, .phero h1{font-size:19pt; line-height:1.1; letter-spacing:-.02em; margin-bottom:2mm}
  .h2{font-size:13.5pt; line-height:1.15; margin-bottom:1.5mm}
  .h3, .loc__n, .room__n b{font-size:11pt}
  .lede{font-size:10.5pt; color:#1a1a1a; max-width:none}
  .label{font-size:7.5pt; color:#555; letter-spacing:.14em}
  .tier__p{font-size:14pt}
  .calc__note, .use__note, .foot__legal{font-size:8pt; color:#444}
  h1, h2, h3, .h2, .h3, .display{break-after:avoid; page-break-after:avoid}
  p, li{orphans:3; widows:3}

  /* Symbole: die Form unterscheidet Haken und Kreuz auch ohne Farbe. */
  .ic, .kit__i{fill:#000 !important; color:#000 !important}
  .kit__i{font-size:1.05rem; margin-bottom:1.5mm}

  /* ---- Kontaktangaben statt Formular ---- */
  .form__print{
    display:block; border:.75pt solid #000; padding:4mm 4.5mm; margin-top:3mm; break-inside:avoid;
  }
  .form__print-h{
    font-family:var(--f-mono); font-size:8pt; letter-spacing:.14em;
    text-transform:uppercase; color:#555; margin-bottom:2.5mm;
  }
  .form__print dl{display:grid; grid-template-columns:1fr 1fr; gap:2mm 6mm; margin:0}
  .form__print dt{font-family:var(--f-mono); font-size:7.5pt; letter-spacing:.1em;
    text-transform:uppercase; color:#666; margin:0}
  .form__print dd{margin:0; font-size:10pt; color:#000}

  /* ---- Fussbereich ---- */
  .foot{border-top:1pt solid #000; padding-block:4mm 0; margin-top:8mm; break-inside:avoid}
  .foot__grid{display:block}
  .foot__grid > div:first-child p{font-size:9pt; color:#333; margin:0}
  .foot__legal{margin-top:2mm; padding-top:2mm; border-top:.5pt solid #ccc}

  /* ---- Verweise ---- */
  a{color:#000; text-decoration:none}
  .prose a, .data__v a[href^="http"]{text-decoration:underline}
  /* Nur bei echten Zielen die Adresse mitdrucken; Sprungmarken,
     Telefon und E-Mail tragen ihre Angabe schon im Text. */
  .prose a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8pt; color:#555; word-break:break-all}

  /* ---- Umbrueche ---- */
  .kit, .loc, .reach__i, .cond, .data__r, .spec{break-inside:avoid}
  .epilog{break-before:auto}
  section{break-inside:auto}
}