/* obs-mk2.css -- die laute Ebene des Marketingauftritts.
   25.08.2026. Gehoert zu der Rolle openbistudio-marketing, geladen NACH
   openbi-studio.css.

   WARUM EINE ZWEITE DATEI. openbi-studio.css traegt zwei Dinge gleichzeitig: das
   Aussehen der Anwendung und den Marketingsatz .obs-mk-*. Was hier dazukommt, ist
   ausschliesslich Marketing und soll die Anwendung nicht anfassen koennen. Eine
   eigene Datei ist die einzige Trennung, die auch dann noch haelt, wenn jemand
   spaeter sucht und ersetzt.

   KEINE ZWEITE PALETTE. Alle Farben kommen aus den Variablen der Grunddatei
   (--color-accent, --color-neutral-*, --shell-dark). Wer hier ein neues Blau
   einfuehrt, hat ab morgen zwei Blaus, die niemand mehr zusammenbringt. Die
   einzigen eigenen Werte sind die drei Zielgruppentoene, und die stehen als
   Variable an genau einer Stelle.

   DIE BREITE. Die Baender der Grunddatei sind randlos und rechnen ihren
   Innenabstand aus der Fensterbreite: Inhalt hoechstens 1360 px, der Rest wird
   Luft. Dieselbe Formel steht hier in --mk2-rand. Wer sie aendert, aendert sie
   an einer Stelle. */

:root {
    --mk2-inhalt: 1360px;
    --mk2-rand: max(24px, calc((100% - var(--mk2-inhalt)) / 2));
    --mk2-ton: var(--color-accent);
    --mk2-ton-weich: var(--color-accent-100);
    --mk2-ton-tief: var(--color-accent-700);
}

/* ---------------------------------------------------------------- Grundformen */

.mk2-band {
    padding: 76px var(--mk2-rand) 80px;
    background: var(--color-bg);
}

.mk2-band.ist-hell { background: var(--color-surface); }
.mk2-band.ist-still { background: var(--color-neutral-200); }

/* Der dunkle Block. Sparsam einsetzen -- drei davon auf einer Seite, und keiner
   faellt mehr auf. */
.mk2-band.ist-nacht {
    background: var(--shell-dark);
    color: #fff;
}

.mk2-band.ist-nacht h2,
.mk2-band.ist-nacht h3,
.mk2-band.ist-nacht strong { color: #fff; }

.mk2-band.ist-nacht p { color: rgba(255, 255, 255, .82); }

.mk2-eng { max-width: 820px; }
.mk2-mitte { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------------- Riesenschrift

   clamp statt Medienabfragen: die Groesse waechst mit dem Fenster, statt an drei
   Stellen zu springen. Der Zeilenabstand muss dabei mitwandern, sonst reisst die
   Zeile bei 96 px auseinander. */

.mk2-riese {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 6.2vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 0 0 .35em;
    text-wrap: balance;
}

.mk2-riese .mk2-strich {
    /* Der Unterstrich sitzt hinter dem Wort und nicht darunter: ein
       text-decoration waere eine duenne Linie, das hier ist ein Balken. */
    background: linear-gradient(to top, var(--mk2-ton-weich) 0 .34em, transparent .34em);
    padding: 0 .08em;
}

.mk2-riese .mk2-ton { color: var(--mk2-ton); }

.mk2-gross {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3.2vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-weight: 750;
    margin: 0 0 .4em;
    text-wrap: balance;
}

.mk2-vor {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: 62ch;
    margin: 0 0 28px;
}

.mk2-band.ist-nacht .mk2-vor { color: rgba(255, 255, 255, .78); }

/* ---------------------------------------------------------------- Laufband

   Der Streifen mit den Kernsaetzen. Der Inhalt steht zweimal im Markup, weil
   eine Schleife ohne Kopie an ihrem Ende eine Luecke zeigt.

   Und er steht still, sobald das Betriebssystem weniger Bewegung verlangt --
   eine Dauerschleife ist genau die Art Animation, die Menschen mit
   vestibulaeren Beschwerden aus der Seite wirft. */

.mk2-laufband {
    overflow: hidden;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    background: var(--shell-dark);
    padding: 14px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mk2-laufband-spur {
    display: flex;
    width: max-content;
    gap: 0;
    animation: mk2-lauf 42s linear infinite;
}

.mk2-laufband-spur span {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 650;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
}

.mk2-laufband-spur span::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent-2-500);
    flex: none;
}

@keyframes mk2-lauf {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .mk2-laufband-spur { animation: none; }
    .mk2-laufband { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------- Gegenueber

   Vier Spalten: drei Wege, die es schon gibt, und einer daneben. Die letzte
   Spalte ist hervorgehoben -- das ist der ganze Zweck der Anordnung. */

.mk2-gegen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 36px;
}

.mk2-gegen-spalte {
    border: 1px solid var(--color-line);
    border-radius: 14px;
    background: var(--color-surface);
    padding: 24px 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mk2-gegen-spalte.ist-wir {
    border-color: var(--mk2-ton);
    border-width: 2px;
    box-shadow: 0 18px 40px -28px rgba(22, 33, 43, .45);
}

.mk2-gegen-kopf {
    font-family: var(--font-heading);
    font-weight: 750;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

.mk2-gegen-spalte.ist-wir .mk2-gegen-kopf { color: var(--mk2-ton); }

.mk2-gegen-satz {
    font-size: .93rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

.mk2-gegen-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }

.mk2-gegen-liste li {
    font-size: .9rem;
    line-height: 1.45;
    padding-left: 22px;
    position: relative;
    color: var(--color-text);
}

/* Minus und Plus als Zeichen und nicht als Bild: sie muessen sich mit der
   Schrift skalieren, und ein Bild waere eine Datei mehr im Container. */
.mk2-gegen-liste li::before {
    content: "–";
    position: absolute;
    left: 0;
    top: -.05em;
    font-weight: 700;
    color: var(--color-still);
}

.mk2-gegen-spalte.ist-wir .mk2-gegen-liste li::before {
    content: "+";
    color: var(--color-accent-2-700);
}

/* ---------------------------------------------------------------- Der Nachbau

   Ein Gespraech, wie es im Assistenten wirklich aussieht. Nachgebaut und nicht
   fotografiert: ein Bildschirmfoto dieser Groesse waere unlesbar, und der Text
   soll sich mit der Seite uebersetzen und durchsuchen lassen. */

.mk2-chat {
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: 0 24px 60px -40px rgba(22, 33, 43, .55);
}

.mk2-chat-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-neutral-200);
    font-size: .82rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
}

.mk2-chat-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--color-neutral-300); flex: none; }
.mk2-chat-punkt.ist-an { background: var(--color-accent-2-500); }

.mk2-chat-lauf { padding: 20px 18px 22px; display: grid; gap: 14px; }

.mk2-blase {
    max-width: 78%;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: .95rem;
    line-height: 1.5;
}

.mk2-blase.ist-du {
    margin-left: auto;
    background: var(--mk2-ton);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.mk2-blase.ist-er {
    background: var(--color-neutral-200);
    border-bottom-left-radius: 5px;
}

.mk2-blase p { margin: 0 0 .5em; }
.mk2-blase p:last-child { margin-bottom: 0; }

/* Die Werkzeugzeilen. Sie sind der Beweis, dass da nicht bloss geredet wird --
   deshalb stehen sie in Festbreite und nicht im Fliesstext. */
.mk2-werkzeug {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .8rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 4px;
}

.mk2-werkzeug::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent-2-500);
    flex: none;
}

.mk2-werkzeug b { color: var(--color-text); font-weight: 600; }

/* ---------------------------------------------------------------- Zitat */

.mk2-zitat {
    border-left: 4px solid var(--mk2-ton);
    padding: 4px 0 4px 26px;
    margin: 0;
    max-width: 40ch;
}

.mk2-zitat p {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    line-height: 1.22;
    letter-spacing: -.02em;
    font-weight: 700;
    margin: 0 0 .5em;
    text-wrap: balance;
}

.mk2-zitat footer { font-size: .88rem; color: var(--color-text-muted); }

/* ---------------------------------------------------------------- Zielgruppen

   Drei Toene, an genau einer Stelle definiert. Alles darunter benutzt --mk2-ton
   und weiss nichts von der Zielgruppe -- so bleibt eine vierte Seite eine Zeile
   Arbeit und keine Kopie des ganzen Satzes. */

.ist-agentur { --mk2-ton: #1f8fce; --mk2-ton-weich: #dcedf7; --mk2-ton-tief: #0e5f8f; }
.ist-it      { --mk2-ton: #5c8a2e; --mk2-ton-weich: #e6f0d9; --mk2-ton-tief: #3f6120; }
.ist-konzern { --mk2-ton: #0b3a51; --mk2-ton-weich: #dfe7ec; --mk2-ton-tief: #07242f; }

.mk2-ziel-kopf {
    padding: 72px var(--mk2-rand) 64px;
    background:
        radial-gradient(1100px 420px at 12% -12%, var(--mk2-ton-weich), transparent 62%),
        var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}

.mk2-schild {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--mk2-ton);
    color: #fff;
    font-family: var(--font-heading);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

/* ---------------------------------------------------------------- Schere

   Zwei Saetze nebeneinander: was man heute hoert, und was hier passiert. Die
   Gegenueberstellung traegt die Aussage -- ohne die linke Spalte ist die rechte
   nur eine Behauptung. */

.mk2-schere {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-surface);
    margin-top: 16px;
}

.mk2-schere-seite { padding: 22px 24px; }
.mk2-schere-seite.ist-alt { background: var(--color-neutral-200); color: var(--color-text-muted); }
.mk2-schere-seite.ist-neu { border-left: 1px solid var(--color-line); }

.mk2-schere-marke {
    font-family: var(--font-heading);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-still);
    margin: 0 0 8px;
}

.mk2-schere-seite.ist-neu .mk2-schere-marke { color: var(--mk2-ton); }

.mk2-schere-seite p { margin: 0; font-size: 1rem; line-height: 1.5; }

.mk2-schere-pfeil {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--color-still);
    font-size: 1.2rem;
    background: var(--color-neutral-200);
}

/* ---------------------------------------------------------------- Matrix */

.mk2-matrix-huelle { overflow-x: auto; margin-top: 30px; }

.mk2-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    min-width: 680px;
}

.mk2-matrix th,
.mk2-matrix td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: top;
}

.mk2-matrix thead th {
    font-family: var(--font-heading);
    font-weight: 750;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-neutral-300);
}

.mk2-matrix tbody th { font-weight: 650; width: 30%; }
.mk2-matrix td { color: var(--color-text-muted); }
.mk2-matrix tbody tr:hover { background: var(--color-neutral-200); }

/* ---------------------------------------------------------------- Ehrlichkeit

   Der Kasten, in dem steht, was fehlt. Er sieht bewusst nicht aus wie eine
   Warnung: das hier ist kein Fehler, sondern eine Auskunft, die man sonst erst
   nach der Buchung bekommt. */

.mk2-ehrlich {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.mk2-ehrlich-zeile {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: start;
    padding: 18px 20px;
    border-left: 3px solid var(--color-accent-2-500);
    background: var(--color-neutral-200);
    border-radius: 0 12px 12px 0;
}

.mk2-ehrlich-zeile b {
    font-family: var(--font-heading);
    font-size: .95rem;
    letter-spacing: -.01em;
}

.mk2-ehrlich-zeile p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--color-text-muted); }

/* ---------------------------------------------------------------- Sprungleiste */

.mk2-sprung {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px var(--mk2-rand);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
            backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-line);
    scrollbar-width: none;
}

.mk2-sprung::-webkit-scrollbar { display: none; }

.mk2-sprung a {
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .87rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.mk2-sprung a:hover { background: var(--color-neutral-200); color: var(--color-text); }

/* ---------------------------------------------------------------- Kacheln mit Nummer */

.mk2-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.mk2-raster.ist-zwei { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

.mk2-kachel {
    border: 1px solid var(--color-line);
    border-radius: 14px;
    background: var(--color-surface);
    padding: 26px 24px 28px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mk2-kachel:hover {
    transform: translateY(-3px);
    border-color: var(--mk2-ton);
    box-shadow: 0 20px 44px -32px rgba(22, 33, 43, .5);
}

@media (prefers-reduced-motion: reduce) {
    .mk2-kachel { transition: none; }
    .mk2-kachel:hover { transform: none; }
}

.mk2-kachel-nr {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .8rem;
    font-weight: 600;
    color: var(--mk2-ton);
    margin: 0 0 10px;
    letter-spacing: .1em;
}

.mk2-kachel h3 {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    line-height: 1.25;
    letter-spacing: -.015em;
    margin: 0 0 10px;
}

.mk2-kachel p { margin: 0 0 10px; font-size: .96rem; line-height: 1.55; color: var(--color-text-muted); }
.mk2-kachel p:last-child { margin-bottom: 0; }

.mk2-kachel ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.mk2-kachel li { font-size: .92rem; line-height: 1.45; color: var(--color-text-muted); }

/* ---------------------------------------------------------------- Grosse Zahlen */

.mk2-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 26px;
    margin-top: 34px;
}

.mk2-zahl-wert {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    margin: 0 0 8px;
    color: var(--mk2-ton);
}

.mk2-band.ist-nacht .mk2-zahl-wert { color: #fff; }

.mk2-zahl-text { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--color-text-muted); }

/* ---------------------------------------------------------------- Schluss */

.mk2-schluss {
    padding: 88px var(--mk2-rand) 92px;
    background:
        radial-gradient(900px 420px at 85% 0%, rgba(31, 143, 206, .28), transparent 60%),
        var(--shell-dark);
    color: #fff;
    text-align: center;
}

.mk2-schluss h2 { color: #fff; }
.mk2-schluss p { color: rgba(255, 255, 255, .82); }
.mk2-schluss .mk2-vor { margin-left: auto; margin-right: auto; }

.mk2-schluss-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.mk2-fein { font-size: .84rem; margin-top: 22px; color: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------- Schmale Fenster

   Eine Bruchstelle und nicht fuenf: alles, was mehrspaltig ist, wird einspaltig.
   Die Schriftgroessen regelt clamp schon selbst. */

@media (max-width: 900px) {
    .mk2-gegen { grid-template-columns: 1fr; }
    .mk2-schere { grid-template-columns: 1fr; }
    .mk2-schere-seite.ist-neu { border-left: 0; border-top: 1px solid var(--color-line); }
    .mk2-schere-pfeil { display: none; }
    .mk2-ehrlich-zeile { grid-template-columns: 1fr; gap: 8px; }
    .mk2-blase { max-width: 92%; }
    .mk2-raster.ist-zwei { grid-template-columns: 1fr; }
    .mk2-band { padding: 56px var(--mk2-rand) 58px; }
    .mk2-ziel-kopf { padding: 52px var(--mk2-rand) 46px; }
    .mk2-schluss { padding: 64px var(--mk2-rand) 68px; }
}

/* ---------------------------------------------------------------- Nachrang

   openbi-studio.css setzt Ueberschriftsgroessen ueber zusammengesetzte
   Selektoren (.obs-hero-main h1, .obs-mk-seitenkopf h1). Eine einzelne Klasse
   verliert dagegen -- gemessen am 25.08.2026: derselbe .mk2-riese kam auf der
   Startseite mit 46 px an und auf einer Zielgruppenseite mit 89 px. Das ist
   kein Geschmacksfall, sondern waeren zwei verschiedene Auftritte. Deshalb hier
   einmal mit genug Gewicht -- und fuer alle vier Stellen derselbe Wert. */

.obs-hero .obs-hero-main h1.mk2-riese,
.obs-mk-seitenkopf h1.mk2-riese,
.mk2-ziel-kopf h1.mk2-riese,
.mk2-schluss h2.mk2-riese,
.mk2-band h2.mk2-riese {
    font-family: var(--font-heading);
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    line-height: 1.03;
    letter-spacing: -.03em;
    font-weight: 800;
    text-wrap: balance;
}

.obs-mk-seitenkopf .mk2-vor,
.mk2-ziel-kopf .mk2-vor { max-width: 68ch; }

/* ---------------------------------------------------------------- Schaustueck

   Ein Bildschirmfoto mitten in einem Band, ohne Textspalte daneben. Ohne Grenze
   waere es 1360 breit und damit rund 720 hoch -- ein Bild, das das ganze Fenster
   fuellt und den Abschnitt darunter aus der Sicht schiebt. */

.mk2-schau {
    max-width: 1040px;
    margin: 38px auto 0;
}

/* Auf dunklem Grund ist die helle Linie des Rahmens die einzige, die man sieht;
   die graue aus --color-divider verschwindet darin. */
.mk2-band.ist-nacht .mk2-schau .obs-mk-shot { border-color: rgba(255, 255, 255, .16); }

/* Zwei Bildschirmfotos nebeneinander. Untereinander waeren es zwei mal 700
   Pixel Hoehe und damit ein Abschnitt, durch den man nur noch scrollt. */

.mk2-paar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .mk2-paar { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Helle Kachel im dunklen Band

   .ist-nacht faerbt Ueberschriften und Absaetze weiss -- richtig fuer Text, der
   direkt auf dem dunklen Grund liegt. Eine .mk2-kachel bringt aber ihren eigenen
   hellen Grund mit, und dort stand Weiss auf Weiss: die Kachel sah leer aus.
   Gemessen auf /agenturen, wo vier Kacheln in einem Nachtband stehen. */

.mk2-band.ist-nacht .mk2-kachel,
.mk2-band.ist-nacht .mk2-kachel h3,
.mk2-band.ist-nacht .mk2-kachel h4,
.mk2-band.ist-nacht .mk2-kachel strong,
.mk2-band.ist-nacht .mk2-kachel b { color: var(--color-text); }

.mk2-band.ist-nacht .mk2-kachel p,
.mk2-band.ist-nacht .mk2-kachel li { color: var(--color-text-muted); }

.mk2-band.ist-nacht .mk2-kachel .mk2-kachel-nr { color: var(--mk2-ton); }

/* Zwei Bilder nebeneinander sind selten gleich hoch. Ohne start streckt das
   Raster die niedrigere Karte und haengt ihre Bildunterschrift ins Leere. */
.mk2-paar { align-items: start; }

/* Dieselbe Falle wie bei der Kachel, eine Ebene weiter: die Ehrlichkeitszeile
   bringt ebenfalls einen hellen Grund mit, und .ist-nacht faerbt b und p weiss.
   Aufgefallen im Dokumentationsband auf /funktionen. */
.mk2-band.ist-nacht .mk2-ehrlich-zeile b { color: var(--color-text); }
.mk2-band.ist-nacht .mk2-ehrlich-zeile p,
.mk2-band.ist-nacht .mk2-ehrlich-zeile em { color: var(--color-text-muted); }