/* ONOS — Vermarktungsseite · Farbkonzept: Soft Navy Blue, Lime Signal, Calm Mint, Cool Charcoal, Off White */

@font-face { font-family: "DM Sans"; src: url("dmsans-var.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("plexmono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Farben — ONOS-Farbkonzept */
  --ink: #1F2A44;          /* 01 Soft Navy Blue: dunkler Grund, Schrift */
  --ink-tiefer: #2E2E2E;   /* 04 Cool Charcoal: Fuss */
  --papier: #FFFFFF;
  --weiss: #FFFFFF;
  --akzent: #1F2A44;       /* Handlung auf hellem Grund */
  --akzent-dunkel: #151D31;
  --akzent-hell: #E1FF7C;  /* 02 Lime Signal: Hervorhebung und Handlung auf dunklem Grund */
  --gruen: #E1FF7C;
  --mint: #4AD1B0;         /* 03 Calm Mint: Akzent, Marker auf hellem Grund */
  --offwhite: #DBDBDB;     /* 05 Off White */
  --tint: #EDEDED;         /* Flächenfarbe, halbe Stufe von Off White */
  --text2: #555B66;
  --kante: #B5B9C0;
  --ok: #1E9C7E; --ok-hell: #DDF6EF;
  --gelb-hell: #F4FFD0;
  --rot: #D2394B; --rot-hell: #FBE7E9;

  --hair: rgba(31,42,68,.12); --grau: rgba(31,42,68,.06); --grau-tief: rgba(31,42,68,.14); --muted: var(--text2);
  --fg: var(--ink); --bg: var(--papier); --focus: var(--akzent); --hl: var(--akzent);
  --radius: 16px; --radius-klein: 10px;

  --fs-h1: clamp(2.9rem, 7.2vw, 6.2rem);
  --fs-h2: clamp(2.1rem, 5.2vw, 4.2rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.75rem);
  --fs-lead: clamp(1.12rem, 1.75vw, 1.5rem);
  --fs-body: 1.06rem; --fs-sm: .9rem; --fs-eyebrow: .72rem;

  --wrap: 1320px; --rand: max(1.25rem, calc(50vw - var(--wrap)/2));
  --gap: clamp(1.25rem, 3vw, 2.4rem);
  --luft: clamp(4.5rem, 10vw, 9rem); --luft-eng: clamp(2.75rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.16, 1, 0.30, 1);
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Der Grund entscheidet */
.tief { --fg: var(--weiss); --bg: var(--ink); --hair: rgba(255,255,255,.14); --grau: rgba(255,255,255,.08); --grau-tief: rgba(255,255,255,.18); --muted: rgba(255,255,255,.66); --focus: var(--akzent-hell); --hl: var(--akzent-hell); }
.tint { --bg: var(--tint); --hair: rgba(31,42,68,.12); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.5; letter-spacing: -.008em; color: var(--ink); background: var(--papier); -webkit-font-smoothing: antialiased; }
section, header, footer { color: var(--fg); background: var(--bg); }
::selection { background: var(--gruen); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.wrap { padding-inline: var(--rand); }
.luft { padding-block: var(--luft); }

h1, h2, h3 { margin: 0; text-wrap: balance; hyphens: manual; }
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: .94; letter-spacing: -.05em; }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: .98; letter-spacing: -.042em; max-width: 18ch; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -.026em; }
p { margin: 0 0 1em; max-width: 58ch; text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 6 3 3; }
.lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 44ch; }
.klein { font-size: var(--fs-sm); color: var(--muted); }

/* Das hervorgehobene Wort: Indigo als Schrift */
.hl { white-space: nowrap; color: var(--hl); }
section:not(.tief):not(.bildband) .hl { background: linear-gradient(var(--mint), var(--mint)) 0 88% / 100% .2em no-repeat; padding-bottom: .02em; }

/* Etikett */
.etikett { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1.4rem; padding: .45em .9em; border-radius: 100px; background: var(--tint); color: var(--akzent-dunkel); }
.etikett::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tief .etikett { background: rgba(225,255,124,.12); color: var(--gruen); }
.tint .etikett { background: var(--weiss); }

/* Marke ONOS */
.marke { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; }
.marke { font-size: 1.6rem; letter-spacing: -.02em; gap: .7rem; color: var(--weiss); }
.marke img { width: auto; height: 2.3rem; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: var(--rand); background: rgba(31,42,68,.94); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
.navi { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.8rem); }
.navi a { text-decoration: none; font-weight: 600; font-size: var(--fs-sm); padding-block: .3em; color: rgba(255,255,255,.72); transition: color 200ms var(--ease); }
.navi a:hover, .navi a[aria-current="page"] { color: var(--weiss); box-shadow: inset 0 -3px 0 var(--mint); }
.navi .knopf { font-size: var(--fs-sm); padding: .5em 1em; color: var(--ink); box-shadow: none; }
.navi .knopf:hover { color: var(--ink); box-shadow: none; }
.menue { display: none; background: transparent; border: 1px solid rgba(255,255,255,.3); color: var(--weiss); border-radius: 100px; padding: .45em 1em; font: 700 var(--fs-sm) var(--sans); cursor: pointer; }
@media (max-width: 820px) {
  .menue { display: block; }
  .navi { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: .6rem var(--rand) 1.4rem; background: var(--ink); display: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .navi.offen { display: flex; }
  .navi a { padding-block: .7em; font-size: var(--fs-body); }
  .navi .knopf { margin-top: .6rem; }
}

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: .5em; font: 700 clamp(1rem, 1.4vw, 1.15rem)/1.1 var(--sans); padding: .75em 1.25em; border-radius: 100px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease); }
.knopf.primaer { background: var(--akzent); color: var(--weiss); box-shadow: 0 8px 24px rgba(31,42,68,.25); }
.knopf.primaer:hover { background: var(--akzent-dunkel); transform: translateY(-1px); }
.tief .knopf.primaer { background: var(--gruen); color: var(--ink); box-shadow: 0 8px 24px rgba(225,255,124,.22); }
.tief .knopf.primaer:hover { background: #EBFF9E; }
.knopf.sekundaer { background: var(--weiss); color: var(--ink); border-color: var(--hair); }
.knopf.sekundaer:hover { border-color: var(--ink); }
.tief .knopf.sekundaer { background: transparent; border-color: rgba(255,255,255,.3); color: var(--weiss); }
.tief .knopf.sekundaer:hover { background: var(--weiss); color: var(--ink); border-color: var(--weiss); }
.ziel { display: inline-flex; gap: .4em; font-weight: 700; text-decoration: none; color: var(--akzent); }
.ziel:hover { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.tief .ziel { color: var(--akzent-hell); }
.handlungen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2.4rem; }

/* Hero */
.hero { padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3.5rem, 8vw, 6.5rem); position: relative; overflow: hidden; background: radial-gradient(60rem 30rem at 85% 10%, rgba(74,209,176,.38), transparent 70%), radial-gradient(40rem 24rem at 0% 100%, rgba(225,255,124,.12), transparent 70%), var(--ink); }
.hero h1 { max-width: 13ch; }
.hero .lead { color: var(--muted); margin-top: 1.6rem; }
.hero .lead strong { color: var(--weiss); font-weight: 600; }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
@media (max-width: 1000px) { .hero-raster { grid-template-columns: 1fr; } }
.brotkrume { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; padding-block: 1rem; border-bottom: 1px solid var(--hair); color: var(--text2); }
.brotkrume a { text-decoration: none; }
.brotkrume a:hover { color: var(--ink); }

/* Raster und Bausteine */
.raster { display: grid; gap: var(--gap); }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .r3, .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .r2, .r3, .r4 { grid-template-columns: 1fr; } }
.kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kopfzeile p:not(.etikett) { margin: 0; }
@media (max-width: 900px) { .kopfzeile { grid-template-columns: 1fr; } }

.karte { background: var(--weiss); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(1.3rem, 2vw, 1.8rem); }
.tief .karte { background: rgba(255,255,255,.04); }
.tint .karte { border-color: transparent; box-shadow: 0 1px 2px rgba(31,42,68,.04), 0 12px 32px rgba(31,42,68,.08); }
.karte h3 { margin-bottom: .6rem; }
.karte p { color: var(--muted); margin: 0; hyphens: manual; }
.nummer { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; margin-bottom: 1.2rem; font-family: var(--mono); font-weight: 500; font-size: .8rem; background: var(--tint); color: var(--akzent-dunkel); }
.tief .nummer { background: rgba(225,255,124,.12); color: var(--gruen); }
.nummer.wort { width: auto; padding-inline: .8rem; height: 2rem; border-radius: 100px; font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; }

/* Gegenüberstellung */
.vergleich-rahmen { background: var(--weiss); border: 1px solid var(--hair); border-radius: var(--radius); padding: .4rem clamp(1rem, 2.4vw, 2rem); }
.vergleich { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--hair); }
.vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }
.vergleich thead th { font-family: var(--mono); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.vergleich thead th:last-child { color: var(--ok); }
.vergleich tbody th { font-weight: 700; width: 24%; }
.vergleich td:last-child { font-weight: 600; color: var(--ink); }
.vergleich td:nth-child(2) { color: var(--text2); }
@media (max-width: 760px) {
  .vergleich thead { display: none; }
  .vergleich tr { display: block; padding-block: 1rem; border-bottom: 1px solid var(--hair); }
  .vergleich tr:last-child { border-bottom: 0; }
  .vergleich th, .vergleich td { display: block; border: 0; padding: .2rem 0; width: auto !important; }
  .vergleich td::before { content: attr(data-l) " "; font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: block; margin-top: .5rem; }
}

/* Modul-Erkunder */
.erkunder { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .erkunder { grid-template-columns: 1fr; } }
.reiter { display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 96px; }
.reiter-gruppe { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding: 1rem .8rem .3rem; margin: 0; }
.reiter-gruppe:first-child { padding-top: 0; }
.reiter button { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .8rem; border-radius: var(--radius-klein); font-weight: 600; color: var(--text2); transition: background 200ms var(--ease), color 200ms var(--ease); }
.reiter button:hover { background: var(--grau); color: var(--ink); }
.reiter button[aria-selected="true"] { background: rgba(74,209,176,.18); color: var(--ink); }
.reiter button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.reiter button span { font-family: var(--mono); font-size: var(--fs-eyebrow); opacity: .7; }
@media (max-width: 1000px) {
  .reiter { position: static; flex-direction: row; overflow-x: auto; gap: .4rem; padding-bottom: .5rem; scrollbar-width: thin; }
  .reiter-gruppe { display: none; }
  .reiter button { flex: none; border: 1px solid var(--hair); border-radius: 100px; padding: .45rem .9rem; font-size: var(--fs-sm); background: var(--weiss); }
  .reiter button span { display: none; }
  .reiter button[aria-selected="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
}
.feld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
.feld-text h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.feld-text .liste { columns: 2; column-gap: var(--gap); }
@media (max-width: 620px) { .feld-text .liste { columns: 1; } }
.individuell { margin-top: 1.4rem; padding: 1.3rem 1.5rem; background: var(--tint); border-radius: var(--radius); }
.individuell b { font-family: var(--mono); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: var(--akzent-dunkel); display: block; margin-bottom: .4rem; }
.individuell p { margin: 0; }

.liste { list-style: none; padding: 0; margin: 0; }
.liste li { position: relative; padding: .45rem 0 .45rem 1.6rem; border-bottom: 1px solid var(--hair); break-inside: avoid; }
.liste li::before { content: ""; position: absolute; left: .2rem; top: .95rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mint); }
.tief .liste li::before { background: var(--akzent-hell); }

/* Nachgebaute Oberfläche — im Stil von ONOS */
.bildschirm { border-radius: 20px; padding: 8px; background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.04)); box-shadow: 0 30px 80px rgba(20,27,44,.45); }
section:not(.tief) .bildschirm { background: var(--weiss); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(31,42,68,.04), 0 24px 60px rgba(31,42,68,.10); }
.ui { background: #F6F7F9; color: var(--ink); font-size: .78rem; line-height: 1.35; display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 380px; overflow: hidden; border-radius: 14px; --hair: rgba(31,42,68,.10); --muted: #5A616E; text-align: left; }
.ui-seite { background: var(--weiss); border-right: 1px solid var(--hair); padding: .8rem .5rem; display: flex; flex-direction: column; gap: .1rem; }
.ui-seite .ui-logo { display: flex; align-items: center; gap: .4rem; font-weight: 800; letter-spacing: -.03em; font-size: .9rem; margin: 0 0 .8rem .3rem; }
.ui-seite .ui-logo i { font-style: normal; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 6px; background: var(--ink); color: var(--weiss); font-size: .5rem; }
.ui-seite span { padding: .28rem .5rem; color: var(--text2); border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-seite span.an { color: var(--akzent-dunkel); background: var(--tint); font-weight: 700; }
@media (max-width: 620px) { .ui { grid-template-columns: minmax(0, 1fr); min-height: 0; } .ui-seite { display: none; } }
.ui-haupt { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.ui-titel { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.ui-titel strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.03em; }
.ui-pille { background: var(--akzent); color: var(--weiss); border-radius: 8px; padding: .3rem .7rem; font-weight: 700; font-size: .7rem; white-space: nowrap; }
.ui-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.ui-chips span { border: 1px solid var(--hair); background: var(--weiss); border-radius: 100px; padding: .15rem .6rem; font-size: .7rem; color: var(--text2); }
.ui-chips span.an { background: var(--akzent); color: var(--weiss); border-color: var(--akzent); }
.ui-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 760px) { .ui-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-kachel { background: var(--weiss); border: 1px solid var(--hair); border-radius: 10px; padding: .55rem .65rem; }
.ui-kachel small { display: block; color: var(--muted); font-size: .66rem; }
.ui-kachel b { font-size: 1.05rem; letter-spacing: -.02em; }
.ui-kachel b.plus { color: var(--ok); }
.ui-box { background: var(--weiss); border: 1px solid var(--hair); border-radius: 10px; padding: .55rem .75rem; }
.ui-box h4 { margin: 0 0 .35rem; font-family: var(--mono); font-weight: 500; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ui-zeile { display: flex; justify-content: space-between; gap: .6rem; padding: .32rem 0; border-top: 1px solid var(--hair); align-items: center; }
.ui-zeile:first-of-type { border-top: 0; }
.ui-zeile em { font-style: normal; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.ui-zeile em.rot { color: var(--rot); font-weight: 700; }
.ui-tab { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--weiss); border: 1px solid var(--hair); border-radius: 10px; font-size: .72rem; overflow: hidden; }
.ui-tab th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: .45rem .55rem; border-bottom: 1px solid var(--hair); }
.ui-tab td { padding: .4rem .55rem; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.ui-tab tr:last-child td { border-bottom: 0; }
.ui-tab td.r, .ui-tab th.r { text-align: right; }
.ui-status { display: inline-block; border-radius: 100px; padding: .08rem .5rem; font-size: .64rem; font-weight: 700; background: var(--ok-hell); color: #0F6B55; }
.ui-status.warn { background: var(--rot-hell); color: #B4182B; }
.ui-status.info { background: var(--tint); color: var(--akzent-dunkel); }
.ui-zwei { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .6rem; }
@media (max-width: 760px) { .ui-zwei { grid-template-columns: 1fr; } }
.ui-gantt { display: grid; grid-template-columns: 88px repeat(10, minmax(0, 1fr)); gap: 3px; background: var(--weiss); border: 1px solid var(--hair); border-radius: 10px; padding: .5rem; font-size: .66rem; }
.ui-gantt .k { color: var(--muted); text-align: center; font-family: var(--mono); font-size: .56rem; }
.ui-gantt .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; align-self: center; }
.ui-gantt .z { height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: .6rem; font-weight: 700; }
.z0 { background: var(--grau); } .z1 { background: #BBF7D0; color: #0F6B55; } .z2 { background: var(--ok); color: var(--weiss); } .z3 { background: #FDA4AF; color: #8A1020; } .zf { background: repeating-linear-gradient(45deg, var(--grau-tief), var(--grau-tief) 3px, transparent 3px, transparent 6px); }
.ui-kal { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); background: var(--weiss); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; font-size: .64rem; position: relative; }
.ui-kal > div { border-left: 1px solid var(--hair); min-height: 22px; border-top: 1px solid var(--hair); position: relative; }
.ui-kal .h { border: 0; text-align: center; padding: .3rem 0; font-weight: 700; }
.ui-kal .h.heute span { display: inline-grid; place-items: center; min-width: 1.4rem; padding: .05rem .3rem; border-radius: 100px; background: var(--akzent); color: var(--weiss); }
.ui-kal .u { border-left: 0; color: var(--muted); font-family: var(--mono); font-size: .56rem; padding: 1px 2px; }
.ui-ev { position: absolute; left: 3px; right: 3px; background: var(--ok-hell); border-radius: 4px; padding: 2px 4px; font-size: .6rem; font-weight: 600; overflow: hidden; z-index: 1; }
.ui-ev.gruen { background: var(--ok-hell); }
.ui-balken { display: flex; align-items: flex-end; gap: 6px; height: 150px; background: var(--weiss); border: 1px solid var(--hair); border-radius: 10px; padding: .6rem .6rem .3rem; }
.ui-balken div { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.ui-balken i { flex: 1; background: var(--grau-tief); border-radius: 3px 3px 0 0; }
.ui-balken i + i { background: var(--mint); }
.ui-chat { display: flex; flex-direction: column; gap: .5rem; flex: 1; justify-content: flex-end; }
.ui-msg { max-width: 82%; padding: .55rem .75rem; background: var(--weiss); border: 1px solid var(--hair); border-radius: 12px 12px 12px 4px; }
.ui-msg.ich { align-self: flex-end; background: var(--akzent); color: var(--weiss); border-color: var(--akzent); border-radius: 12px 12px 4px 12px; }
.ui-eingabe { border: 1px solid var(--hair); background: var(--weiss); border-radius: 10px; padding: .5rem .8rem; color: var(--muted); display: flex; justify-content: space-between; }
.ui-eingabe b { color: var(--akzent); }
.ui-feld { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ui-feld label { display: block; font-size: .64rem; color: var(--muted); }
.ui-feld div > span { display: block; border: 1px solid var(--hair); border-radius: 8px; background: var(--weiss); padding: .35rem .55rem; margin-top: .15rem; }
.ui-zettel { background: var(--gelb-hell); padding: .6rem; border-radius: 8px; transform: rotate(-1.2deg); box-shadow: 0 2px 5px rgba(31,42,68,.08), 0 12px 24px rgba(31,42,68,.10); font-weight: 700; }

/* Ablauf */
.ablauf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: 0; margin: 0; }
@media (max-width: 1000px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ablauf { grid-template-columns: 1fr; } }
.ablauf li { list-style: none; }
.ablauf h3 { margin-bottom: .6rem; }
.ablauf p { color: var(--muted); margin: 0; }

/* Fragen */
.fragen { background: var(--weiss); border: 1px solid var(--hair); border-radius: var(--radius); padding: 0 clamp(1rem, 2.4vw, 2rem); }
.fragen details + details { border-top: 1px solid var(--hair); }
.fragen summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.026em; line-height: 1.2; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(74,209,176,.18); color: var(--ink); font-weight: 500; transition: transform 200ms var(--ease); flex: none; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { padding-bottom: 1.2rem; color: var(--muted); }

/* Bausteinwahl */
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl label { cursor: pointer; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl span { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--hair); background: var(--weiss); border-radius: 100px; padding: .5rem 1rem; font-weight: 600; font-size: var(--fs-sm); transition: background 200ms var(--ease), color 200ms var(--ease); }
.wahl span::before { content: "+"; color: var(--mint); font-weight: 700; }
.wahl input:checked + span { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.wahl input:checked + span::before { content: "✓"; color: var(--gruen); }
.wahl input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.wahl-ergebnis { margin-top: 2rem; padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--ink); color: var(--weiss); border-radius: var(--radius); }
.wahl-ergebnis h3 { margin-bottom: .6rem; }
.wahl-ergebnis p { color: rgba(255,255,255,.75); }
.wahl-ergebnis .ziel { color: var(--akzent-hell); }

/* Kontakt und Fuss */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap); align-items: end; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }
.kontaktdaten { font-size: var(--fs-lead); line-height: 1.5; }
.kontaktdaten a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.kontaktdaten a:hover { text-decoration: underline; }
.fuss { --bg: var(--ink-tiefer); position: relative; overflow: hidden; padding-block: 4rem 3rem; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); position: relative; z-index: 1; align-items: start; }
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss .marke { margin-bottom: 1rem; color: var(--weiss); }
.fuss a { text-decoration: none; color: var(--weiss); }
.fuss a:hover { color: var(--gruen); }
.fuss p { color: rgba(255,255,255,.66); }
.fuss .gross { font-weight: 800; font-size: clamp(6rem, 26vw, 24rem); line-height: .78; letter-spacing: -.07em; margin: 3rem 0 0; color: transparent; background: linear-gradient(180deg, rgba(74,209,176,.3), rgba(74,209,176,0) 85%); -webkit-background-clip: text; background-clip: text; user-select: none; white-space: nowrap; }

/* Erscheinen */
.zeigen { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.zeigen.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeigen { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}

/* Fotos und echte Screenshots */
.screen { margin: 0; border-radius: 14px; overflow: hidden; background: var(--weiss); border: 1px solid var(--hair); box-shadow: 0 1px 2px rgba(31,42,68,.05), 0 24px 60px rgba(31,42,68,.14); }
.screen .leiste { display: flex; gap: 6px; align-items: center; padding: 10px 12px; background: #F3F6FA; border-bottom: 1px solid var(--hair); }
.screen .leiste i { width: 9px; height: 9px; border-radius: 50%; background: #D5DCE6; }
.screen .leiste span { margin-left: 10px; font-family: var(--mono); font-size: .66rem; color: var(--text2); background: var(--weiss); border: 1px solid var(--hair); border-radius: 100px; padding: 2px 10px; }
.screen img { width: 100%; height: auto; }
.tief .screen { border-color: rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.beschriftung { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .9rem; }

/* Bühne im Hero: Foto mit schwebendem Screenshot */
.buehne { position: relative; padding-bottom: 12%; }
.buehne .foto { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; }
.buehne .foto img { width: 100%; height: 100%; object-fit: cover; }
.buehne .screen { position: absolute; left: 0; bottom: 0; width: 80%; }
@media (max-width: 1340px) { .buehne .screen { left: 4%; width: 84%; } }
.buehne .marke-punkt { position: absolute; right: 6%; top: -18px; width: 64px; height: 64px; }
@media (max-width: 1000px) { .buehne .screen { left: 4%; width: 86%; } }

/* Bildband: Foto mit Aussage in der unscharfen Fläche */
.bildband { position: relative; min-height: clamp(420px, 56vw, 720px); display: flex; align-items: flex-end; overflow: hidden; color: var(--weiss); background: var(--ink); }
.bildband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; }
.bildband::after { content: ""; position: absolute; inset: 0 0 -2px 0; background: linear-gradient(180deg, rgba(31,42,68,0) 52%, rgba(31,42,68,.06) 58%, rgba(31,42,68,.18) 64%, rgba(31,42,68,.36) 70%, rgba(31,42,68,.56) 76%, rgba(31,42,68,.74) 82%, rgba(31,42,68,.88) 88%, rgba(31,42,68,.97) 94%, #1F2A44 100%), linear-gradient(90deg, rgba(31,42,68,.8) 0%, rgba(31,42,68,.5) 32%, rgba(31,42,68,.15) 55%, rgba(31,42,68,0) 72%); }
.bildband + .tief { padding-top: clamp(2rem, 4vw, 3.5rem); margin-top: -1px; position: relative; }
.bildband .wrap { position: relative; z-index: 1; padding-block: clamp(3rem, 7vw, 6rem); width: 100%; }
.bildband h2 { max-width: 14ch; color: var(--weiss); }
.bildband h2 .hl { color: var(--gruen); }
.bildband p { color: rgba(255,255,255,.82); max-width: 40ch; margin-top: 1.2rem; }
@media (max-width: 700px) { .bildband::after { background: linear-gradient(0deg, #1F2A44 0%, rgba(31,42,68,.92) 18%, rgba(31,42,68,.7) 40%, rgba(31,42,68,.35) 65%, rgba(31,42,68,.1) 100%); } }

.foto-karte { border-radius: var(--radius); overflow: hidden; margin: 0; }
.foto-karte img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.zweispalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
@media (max-width: 900px) { .zweispalter { grid-template-columns: 1fr; } }

/* Hero mit Foto als Grund (Unterseiten) */
.hero.mit-foto { background: var(--ink); }
.hero.mit-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.mit-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,42,68,.95) 0%, rgba(31,42,68,.75) 45%, rgba(31,42,68,.25) 100%); }
.hero.mit-foto > :not(img) { position: relative; z-index: 1; }

/* Screenshot-Galerie */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 900px) { .galerie { grid-template-columns: 1fr; } }
.galerie figure { margin: 0; }
.galerie h3 { margin: 1.2rem 0 .4rem; }
.galerie p { color: var(--muted); margin: 0; }

/* Startseite: Kopf mit Komposition, die über den dunklen Bereich hinausragt */
:root { --ueberstand: clamp(7rem, 15vw, 13rem); }
.hero-start { border-top: 0; overflow: visible; z-index: 2; padding-bottom: 0; background: radial-gradient(70rem 34rem at 90% -10%, rgba(74,209,176,.38), transparent 70%), radial-gradient(36rem 22rem at -5% 60%, rgba(225,255,124,.10), transparent 70%), var(--ink); }
.hero-deko { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-deko img { position: absolute; width: clamp(420px, 52vw, 820px); right: -10vw; top: -14%; opacity: .09; transform: rotate(-8deg); }
.start-kopf { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap); align-items: end; }
.start-kopf { --h1-start: clamp(3rem, 8.4vw, 7.6rem); }
.start-kopf h1 { font-size: var(--h1-start); max-width: 11ch; }
/* Buttons unten bündig zur Grundlinie von «Betrieb bauen» (Abstand Grundlinie–Unterkante = .134em) */
@media (min-width: 1001px) { .start-kopf > div { padding-bottom: calc(var(--h1-start) * .134); } .start-kopf .handlungen { margin-bottom: 0; } }
.start-kopf .lead { margin-top: 0; }
@media (max-width: 1000px) { .start-kopf { grid-template-columns: 1fr; } }

.komposition { position: relative; margin-top: clamp(3rem, 6vw, 5rem); margin-bottom: calc(-1 * var(--ueberstand)); height: clamp(340px, 42vw, 640px); }
.k-foto { position: absolute; right: 0; top: 30%; width: 40%; height: 78%; margin: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.35); }
.k-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 35%; }
.k-screen { position: absolute; left: 0; top: 0; width: 62%; }
.k-screen .screen { border-radius: 16px; box-shadow: 0 40px 100px rgba(20,27,44,.45); }
.k-karte { position: absolute; display: flex; align-items: center; gap: .7rem; border-radius: 16px; font-weight: 700; box-shadow: 0 18px 40px rgba(20,27,44,.25); z-index: 2; }
.k-gruen { right: 28%; top: 33%; background: var(--gruen); color: var(--ink); padding: .8rem 1.1rem; font-size: var(--fs-sm); }
.k-haken { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: var(--gruen); font-size: .8rem; }
.k-weiss { right: 47%; bottom: -4%; background: var(--weiss); color: var(--ink); padding: 1rem 1.3rem; font-size: var(--fs-sm); line-height: 1.25; }
.k-weiss b { font-size: 2.4rem; letter-spacing: -.04em; color: var(--akzent); line-height: 1; }
.k-weiss span { font-weight: 600; color: var(--text2); }
.nach-hero { padding-top: calc(var(--luft) + var(--ueberstand)); }
@media (max-width: 760px) {
  .komposition { height: auto; display: grid; gap: 0; }
  .k-foto, .k-screen, .k-karte { position: relative; inset: auto; width: auto; }
  .k-foto { height: auto; aspect-ratio: 4 / 3; }
  .k-screen { width: 100%; order: 1; }
  .k-foto { width: 70%; margin: -14% 0 0 auto; z-index: 1; order: 2; }
  .k-gruen { left: 4%; right: auto; top: auto; bottom: 8%; }
  .k-gruen { position: absolute; width: auto; }
  .k-weiss { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .k-karte { animation: schweben 6s ease-in-out infinite; }
  .k-weiss { animation-delay: -3s; }
  @keyframes schweben { 50% { transform: translateY(-8px); } }
}

.fuss .markenzeile { font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.02em; color: var(--weiss); margin: 0 0 .8rem; }

/* Fuss: Spalten mit Titel, auf einer Linie */
.fuss-marke p:last-child { font-size: var(--fs-sm); max-width: 38ch; }
.fuss-titel { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .22em; text-transform: uppercase; color: var(--mint) !important; margin: .55rem 0 1rem; }
.fuss address, .fuss .fuss-zeilen { font-style: normal; font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,.85); margin: 0; }
.fuss-raster > div:not(.fuss-marke) { padding-left: clamp(0rem, 2vw, 1.6rem); border-left: 1px solid rgba(255,255,255,.12); }
@media (max-width: 760px) { .fuss-raster > div:not(.fuss-marke) { padding-left: 0; border-left: 0; } }

/* Kontaktseite */
.anfrage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .anfrage { grid-template-columns: 1fr; } }
.formular { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.4rem); }
.formular-titel { font-size: var(--fs-h3); max-width: none; }
.formular label { display: grid; gap: .4rem; font-weight: 600; font-size: var(--fs-sm); }
.formular label span { font-weight: 400; color: var(--text2); }
.formular input, .formular textarea { font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink); background: var(--weiss); border: 1px solid var(--kante); border-radius: 12px; padding: .8rem .95rem; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(74,209,176,.35); }
.formular [aria-invalid] { border-color: var(--rot); }
.formular textarea { resize: vertical; min-height: 6rem; }
.formular .knopf { justify-self: start; margin-top: .4rem; }
.formular-hinweis { margin: 0; }
.personen .lead { margin-bottom: 1.6rem; }
.personen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-bottom: 1.8rem; }
.person { margin: 0; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.person figcaption { display: grid; margin-top: .8rem; }
.person b { font-size: var(--fs-h3); letter-spacing: -.02em; }
.person span { color: var(--text2); font-size: var(--fs-sm); }

/* Das ONOS-Zeichen als wiederkehrendes Gestaltungselement */
.hero-deko { z-index: 0; }
.hero.mit-foto > .hero-deko { position: absolute; z-index: 1; }
.mit-deko { position: relative; overflow: hidden; }
.mit-deko > :not(.hero-deko), .hero > :not(.hero-deko):not(img), .fuss > .wrap { position: relative; z-index: 2; }
.hero-deko.oben-rechts img { right: -8vw; top: -22%; left: auto; bottom: auto; transform: rotate(-8deg); }
.hero-deko.unten-rechts img { right: -6vw; bottom: -38%; top: auto; left: auto; transform: rotate(6deg); }
.hero-deko.unten-links img { left: -10vw; bottom: -30%; top: auto; right: auto; transform: rotate(-12deg); opacity: .07; }
.hero-deko.fuss img { right: 0; bottom: -18%; top: auto; left: auto; width: clamp(300px, 34vw, 520px); transform: translateX(22%) rotate(-6deg); opacity: .07; }
.fuss { position: relative; }

/* Wechselnde Hinweise */
.k-screen { isolation: isolate; }
.k-tags { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; border-radius: 16px; }
.k-tag { max-width: 84%; opacity: 0; transform: translateY(12px) scale(.94); transition: opacity 500ms var(--ease), transform 600ms var(--ease); white-space: nowrap; animation: none !important; }
.k-tag.an { opacity: 1; transform: none; }
@media (max-width: 760px) { .k-screen { position: relative; } .k-tag { font-size: .74rem; padding: .5rem .75rem; white-space: normal; } }

/* Erkunder: Gruppentitel als ruhige Balken über die ganze Breite */
.reiter-gruppe { display: block; align-self: stretch; margin: 1.1rem 0 .3rem; padding: .5rem .8rem; border-radius: 8px; color: var(--ink); background: #EFF1F4; }
.reiter-gruppe:first-child { margin-top: 0; padding-top: .5rem; }
@media (max-width: 1000px) { .reiter button::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--g, var(--mint)); flex: none; } .reiter button { justify-content: flex-start; } }

/* Screenshot-Animation: mehrere Bilder überblenden */
.screen.frames { position: relative; }
.screen.frames .bilder { position: relative; aspect-ratio: 1496 / 812; overflow: hidden; background: #F6F7F9; }
.screen.frames .bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity 700ms var(--ease); }
.screen.frames .bilder img.an { opacity: 1; }
.screen .bilder:not(.mehr) img { position: static; opacity: 1; }
.screen-punkte { display: flex; gap: .4rem; justify-content: center; margin-top: .8rem; }
.screen-punkte i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--hair); transition: background 300ms; }
.screen-punkte i.an { background: var(--mint); }

/* Ablauf: springender Punkt, kostenlos */
.ablauf { position: relative; padding-top: 2.4rem !important; }
.ablauf li { position: relative; }
.ablauf .gratis { display: inline-block; margin-left: .6rem; vertical-align: top; margin-top: .62rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; background: var(--gruen); color: var(--ink); padding: .25rem .55rem; border-radius: 100px; }
.ablauf-spur { position: absolute; left: 0; right: 0; top: .7rem; height: 2px; pointer-events: none; z-index: 2; }
.ablauf-spur::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--hair) 0 8px, transparent 8px 14px); }
.ablauf-punkt { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(74,209,176,.25); transition: left 700ms var(--ease); }
.tief .ablauf-punkt { background: var(--gruen); box-shadow: 0 0 0 6px rgba(225,255,124,.2); }
.ablauf li.karte { z-index: 1; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), border-color 500ms; }
.ablauf li.karte.aktiv { transform: translateY(-6px); border-color: var(--mint); box-shadow: 0 18px 40px rgba(31,42,68,.12); }
.tief .ablauf li.karte.aktiv { border-color: var(--gruen); }
@media (max-width: 1000px) { .ablauf-spur { display: none; } .ablauf { padding-top: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .ablauf-spur { display: none; } }

/* ONFLOW-Verweise */
a.onflow { color: inherit; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a.onflow:hover { text-decoration-thickness: 3px; }
.tief a.onflow { text-decoration-color: var(--gruen); }
.fuss address a { text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: .18em; }

/* Kleineres Foto bei Vorgehen */
.foto-klein { max-width: 640px; }

.ablauf li.karte::before { content: ""; position: absolute; left: 50%; top: -1.7rem; width: 2px; height: 1.7rem; background: var(--hair); }
@media (max-width: 1000px) { .ablauf li.karte::before { display: none; } }

/* Vorgehen: «Wir gehen auf jeden Kunden ein» als überlappende Komposition */
.versprechen .kopfzeile { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.v-buehne { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; padding-right: var(--rand); }
.v-foto { position: relative; margin: 0; border-radius: 0 28px 28px 0; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 40px 90px rgba(0,0,0,.35); }
.v-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; transform: scale(1.04); transition: transform 1600ms var(--ease); }
.v-foto.da img { transform: scale(1); }
.v-foto .k-tags { border-radius: 0; }
.v-karten { position: relative; z-index: 2; display: grid; gap: var(--gap); margin-left: -14%; }
.v-karte { background: var(--weiss) !important; color: var(--ink); --muted: var(--text2); --hair: rgba(31,42,68,.12); box-shadow: 0 30px 70px rgba(0,0,0,.3); border: 0; }
.v-karte .liste li { border-color: rgba(31,42,68,.1); }
.v-karte .liste li::before { background: var(--mint) !important; }
.v-geben { transform: translateX(-4%); }
.v-brauchen { background: var(--gruen) !important; margin-left: 18%; }
.v-brauchen .liste li::before { background: var(--ink) !important; }
.v-karte.zeigen { opacity: 0; transform: translateX(60px); transition: opacity 700ms var(--ease), transform 900ms var(--ease); }
.v-geben.zeigen.da { opacity: 1; transform: translateX(-4%); }
.v-brauchen.zeigen { transition-delay: 220ms; }
.v-brauchen.zeigen.da { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .v-buehne { grid-template-columns: 1fr; padding: 0 var(--rand); }
  .v-foto { border-radius: 22px; }
  .v-karten { margin: -12% 0 0; padding: 0 4%; }
  .v-geben, .v-geben.zeigen.da { transform: none; }
  .v-brauchen { margin-left: 8%; }
}
@media (prefers-reduced-motion: reduce) { .v-karte.zeigen { opacity: 1; transform: none; } .v-foto img { transform: none; } }

/* Geführter Rundgang durch die Screenshots */
.screen.frames .bilder img { object-fit: fill; transform-origin: 50% 50%; transition: opacity 700ms var(--ease), transform 1200ms cubic-bezier(.45,.05,.2,1); will-change: transform; }
.tour-marke { position: absolute; z-index: 3; width: 0; height: 0; opacity: 0; transition: opacity 400ms var(--ease); pointer-events: none; }
.tour-marke.an { opacity: 1; transition-delay: 900ms; }
.tour-marke i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 0 rgba(225,255,124,.7); animation: puls 1.6s infinite; border: 2px solid var(--ink); }
.tour-marke span { position: absolute; left: 18px; top: -16px; white-space: nowrap; background: var(--ink); color: var(--weiss); font: 700 .78rem/1 var(--sans); padding: .55rem .8rem; border-radius: 100px; box-shadow: 0 10px 24px rgba(20,27,44,.3); }
.tour-marke.links span { left: auto; right: 18px; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(225,255,124,.7); } 70% { box-shadow: 0 0 0 16px rgba(225,255,124,0); } 100% { box-shadow: 0 0 0 0 rgba(225,255,124,0); } }
@media (max-width: 620px) { .tour-marke span { font-size: .68rem; padding: .45rem .65rem; } }

@media (max-width: 1000px) { .reiter-gruppe { display: none !important; } }

/* Vergrösserbare Screenshots */
.screen { cursor: zoom-in; position: relative; }
.screen::after { content: "⤢ Vergrössern"; position: absolute; right: 12px; bottom: 12px; z-index: 4; font: 700 .72rem/1 var(--sans); color: var(--weiss); background: rgba(31,42,68,.82); padding: .5rem .7rem; border-radius: 100px; opacity: 0; transform: translateY(4px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; }
.screen:hover::after, .screen:focus-within::after { opacity: 1; transform: none; }
@media (hover: none) { .screen::after { opacity: 1; transform: none; } }
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(20,27,44,.9); backdrop-filter: blur(6px); padding: clamp(.5rem, 3vw, 2.5rem); }
.lightbox.offen { display: grid; }
.lb-bild { max-width: 100%; max-height: calc(100vh - 6rem); overflow: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); cursor: zoom-in; background: var(--weiss); }
.lb-bild img { display: block; max-width: min(92vw, 1600px); max-height: calc(100vh - 6rem); width: auto; height: auto; }
.lightbox.zoom .lb-bild { cursor: zoom-out; }
.lightbox.zoom .lb-bild img { max-width: none; max-height: none; width: auto; }
.lb-zu { position: absolute; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; background: var(--gruen); color: var(--ink); font: 400 1.8rem/1 var(--sans); cursor: pointer; }
.lb-hinweis { position: absolute; bottom: .8rem; left: 0; right: 0; margin: 0 auto; text-align: center; color: rgba(255,255,255,.7); font-size: var(--fs-sm); max-width: none; }

/* Bildnachweis im Fuss: unscheinbar */
.fuss .bildnachweis { margin: 2.4rem 0 0; font-size: .72rem; color: rgba(255,255,255,.38) !important; max-width: none; }
.fuss .markenzeile a { color: inherit; text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: .18em; }