/* ============================================================
   thier.dev — Designsystem „Kobalt Clean“ (gewählt am 10.09.2026)
   Weiß + Hellgrau als Flächen, Kobalt als Marken- und Handlungsfarbe,
   Bernstein nur für Hinweise/Zahlen. Plus Jakarta Sans für Überschriften,
   Inter für Text. Radius 12 px (Karten), 10 px (Knöpfe), 1-px-Ränder,
   keine Schatten, Icons als Linie 2 px. Screenshots vor Fotos.
   ============================================================ */

:root {
  --kobalt: #2563EB;
  --kobalt-tief: #1D4ED8;
  --kobalt-hell: #EFF4FF;
  --bernstein: #F59E0B;
  --tinte: #111827;
  --tinte-weich: #4B5563;
  --grau: #6B7280;
  --flaeche: #F3F4F6;
  --linie: #E5E7EB;
  --grund: #FFFFFF;
  --r-karte: 12px;
  --r-knopf: 10px;
  --mass: 1120px;
  --tabs-hoehe: 64px; /* Filterleiste auf der Leistungsseite; fließt in die Rastposition ein */
  --kopf-hoehe: 68px; /* Handy-Logo-Zeile; fließt in die Rastposition des Heros ein */
  --dock-hoehe: 64px; /* Handy-Leiste unten; jeder Block hält unten so viel Platz frei */
  --uebergang: 200ms cubic-bezier(.22, .61, .36, 1);
  --font-d: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-b: 'Inter', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Abschnittsweises Scrollen auf der Startseite (Thomas): am Ende eines Blocks rastet die Seite am Anfang
   des nächsten ein. Blöcke, die höher als das Fenster sind, lassen sich frei durchscrollen. */
html:has(main[data-abschnitte]) { scroll-snap-type: y mandatory; }
main[data-abschnitte] > section:not(.social-band) { scroll-snap-align: start; }
html:has(main[data-abschnitte]) .fuss { scroll-snap-align: end; }
@media (min-width: 861px) { html:has(main[data-abschnitte]) { scroll-padding-top: 66px; } } /* Platz für das obere Dock */
/* Leistungsseite: die klebende Filterleiste braucht zusätzlich Platz */
html:has(main[data-tabs]) { scroll-padding-top: var(--tabs-hoehe); }
@media (min-width: 861px) { html:has(main[data-tabs]) { scroll-padding-top: calc(66px + var(--tabs-hoehe)); } }
/* Jeder Block der Startseite füllt mindestens den Bildschirm, Inhalt mittig — es ist immer nur ein Block im Blick (Thomas) */
main[data-abschnitte] > section:not(.social-band) { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
main[data-abschnitte] > section > .mass { width: 100%; } /* feste Breite: als Grid-Kind würde .mass sonst nach dem Mindestinhalt des Karussells bemessen (Handy → Viewport 1120 px) */
@media (max-width: 860px) {
  /* Block füllt den Bildschirm, hält aber unten den Platz der Dock-Leiste frei — sonst verdeckt die Leiste das Ende
     eines bildschirmhohen Blocks, z. B. den Knopf „Alle Leistungen & Projekte“ (Thomas, 11.09.) */
  main[data-abschnitte] > section:not(.social-band) { min-height: 100dvh; padding-bottom: calc(var(--dock-hoehe) + 12px); }
  /* Erster Block (Hero) rastet inklusive Logo-Zeile darüber ein, sonst ist das Logo am Handy nie erreichbar (Thomas);
     dafür ist er um die Logo-Zeile niedriger — gilt für Start- UND Leistungsseite */
  main[data-abschnitte] > section:first-child { scroll-margin-top: var(--kopf-hoehe); min-height: calc(100dvh - var(--kopf-hoehe)); }
  /* Blöcke kompakter, damit der Projektblock samt Knopf „Alle Leistungen & Projekte“ auf einen Handy-Bildschirm passt
     (Selektoren mit main-Vorspann, weil die Grundregeln weiter unten stehen und sonst gewinnen) */
  main[data-abschnitte] > section.abschnitt { padding-top: 32px; }
  main[data-abschnitte] .abschnitt-kopfzeile { margin-bottom: 16px; }
  main[data-abschnitte] .abschnitt-kopfzeile .eyebrow { margin-top: 0; }
  main[data-abschnitte] .karussell-hinweis { margin-top: 4px; }
  main[data-abschnitte] .karussell-fuss { margin-top: 10px; }
}
body { font-family: var(--font-b); color: var(--tinte); background: var(--grund); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--kobalt-hell); color: var(--tinte); }
.mass { max-width: var(--mass); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }

/* ---------- Typo ---------- */
h1, h2, h3 { font-family: var(--font-d); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
p { color: var(--tinte-weich); max-width: 60ch; }
.akzent { color: var(--kobalt); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-knopf); border: 1px solid transparent; font: 600 15px/1 var(--font-b); cursor: pointer; white-space: nowrap;
  transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang), transform var(--uebergang); }
.knopf:active { transform: scale(.98); }
.knopf-voll { background: var(--kobalt); color: #fff; }
.knopf-voll:hover { background: var(--kobalt-tief); }
.knopf-rand { background: #fff; color: var(--tinte); border-color: var(--linie); }
.knopf-rand:hover { border-color: var(--tinte); }

/* ---------- Logo (per Maske in Kobalt eingefärbt, Form unverändert) ---------- */
.logo { display: inline-block; height: 26px; aspect-ratio: 1426 / 402; background: var(--kobalt);
  -webkit-mask: url("logo.png") center / contain no-repeat; mask: url("logo.png") center / contain no-repeat; }

/* ---------- (alte Kopfzeile, ungenutzt) ---------- */
.kopf { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.kopf-nav { display: flex; gap: 26px; align-items: center; }
.kopf-nav a { font-weight: 600; font-size: 15px; color: var(--tinte-weich); transition: color var(--uebergang); }
.kopf-nav a:hover { color: var(--tinte); }
.kopf-nav a.aktiv { color: var(--kobalt); }
.kopf-nav .knopf { padding: 10px 18px; font-size: 14.5px; }
.kopf-nav a.knopf-voll, .kopf-nav a.knopf-voll:hover { color: #fff; }
.kopf-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.kopf-burger span { display: block; width: 22px; height: 2px; background: var(--tinte); margin: 5px 0; border-radius: 2px; }
@media (max-width: 860px) {
  .kopf-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: flex-start; padding: 18px clamp(20px, 4vw, 40px) 24px; gap: 16px; border-bottom: 1px solid var(--linie); }
  .kopf-nav.offen { display: flex; }
  .kopf-burger { display: block; }
}

/* ---------- Hintergrund / Flächen ---------- */
.abschnitt { padding-block: clamp(56px, 8vw, 96px); }
.abschnitt-grau { background: var(--flaeche); }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); }

/* ---------- Hero (vorerst leer) ---------- */
.held { min-height: min(72vh, 640px); display: grid; align-items: center; padding-block: clamp(40px, 6vw, 72px); }
.held > .mass { width: 100%; }
.held-leer { min-height: min(56vh, 480px); border: 1.5px dashed var(--linie); border-radius: var(--r-karte); display: grid; place-items: center; color: var(--grau); font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

/* ============================================================
   Bausteine der Seite (10.09.2026) — Reihenfolge wie auf der Startseite
   ============================================================ */
.abschnitt-kopfzeile { max-width: 680px; margin-bottom: clamp(28px, 4vw, 44px); }
.abschnitt-kopfzeile p { margin-top: 12px; font-size: 17px; }
.gross { font-size: clamp(28px, 3.6vw, 42px); }
.riesig { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.025em; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kobalt); margin-bottom: 16px; }
.kopfzeile-reihe { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; max-width: none; }
.kopfzeile-reihe > div { max-width: 680px; }
.knopf-gross { padding: 15px 24px; font-size: 16px; }
.pfeil { font-weight: 600; color: var(--kobalt); display: inline-block; padding: 6px 0; }
.pfeil:hover { color: var(--kobalt-tief); }

/* Hero: Text links, Produkt + Vertrauenskarte rechts */
.held { min-height: 0; padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(28px, 4vw, 48px); }
.held-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(30px, 6vw, 72px); align-items: center; }
.held-sub { margin-top: 22px; font-size: clamp(17px, 1.5vw, 19px); }
.held-ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
.held-hinweis { margin-top: 14px; font-size: 14px; color: var(--grau); }
.buehne { position: relative; min-height: 460px; display: grid; place-items: center; }
.buehne::before { content: ""; position: absolute; inset: 6% 0 0 0; background: var(--flaeche); border-radius: 20px; }
.buehne-produkt { position: relative; width: min(330px, 78%); animation: schweben 7s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(17, 24, 39, .18)); }
.buehne-karte { position: absolute; left: 4%; bottom: 6%; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 12px 14px; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; max-width: 260px; }
.buehne-karte img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; object-position: top; background: var(--flaeche); }
.buehne-karte b { display: block; font-size: 14px; }
.buehne-karte small { display: block; font-size: 12px; color: var(--grau); line-height: 1.3; }
.buehne-karte .tag { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--kobalt); background: var(--kobalt-hell); padding: 3px 8px; border-radius: 6px; }
.buehne-zahl { position: absolute; right: 4%; top: 10%; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 10px 14px; font-size: 12.5px; color: var(--tinte-weich); animation: schweben 9s ease-in-out infinite reverse; }
.buehne-zahl b { display: block; font-family: var(--font-d); font-size: 22px; font-weight: 800; color: var(--bernstein); letter-spacing: -.02em; }
@keyframes schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 860px) { .held-raster { grid-template-columns: 1fr; } .buehne { min-height: 380px; } }

/* Vertrauensleiste */
.vertrauen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 22px 0; }
.vertrauen div { display: flex; gap: 12px; align-items: center; font-size: 15px; font-weight: 600; color: var(--tinte); }
.icon { width: 40px; height: 40px; border-radius: 10px; background: var(--kobalt-hell); color: var(--kobalt); display: grid; place-items: center; flex: 0 0 auto; }
.icon-infinia { background: url(infinia-icon.png) center / 100% no-repeat; border-radius: 10px; }
.icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .vertrauen { grid-template-columns: 1fr; gap: 12px; } }

/* Leistungen: vier Karten */
.karten-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.karte-leistung { padding: 24px; display: grid; gap: 10px; align-content: start; transition: border-color var(--uebergang); }
.karte-leistung:hover { border-color: var(--kobalt); }
.karte-leistung h3 { font-size: 18px; margin-top: 6px; }
.karte-leistung p { font-size: 14.5px; }
.karte-leistung .pfeil { margin-top: auto; padding-top: 8px; font-size: 14.5px; }
@media (max-width: 960px) { .karten-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .karten-raster { grid-template-columns: 1fr; } }

/* Klartext: drei Aussagen */
.klartext { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.aussage { padding: 0; display: grid; gap: 14px; align-content: start; }
.aussage h3 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; }
.aussage h3 b { color: var(--kobalt); font-weight: inherit; }
.aussage h3 .zahl { color: var(--bernstein); }
.aussage p { font-size: 14.5px; }
.mini-liste { display: grid; gap: 8px; }
.mini-liste li { list-style: none; display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 14.5px; color: var(--tinte-weich); }
.mini-liste li::before { content: ""; width: 18px; height: 18px; border-radius: 999px; background: var(--kobalt-hell); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>"); background-size: 11px; background-repeat: no-repeat; background-position: center; margin-top: 2px; }
@media (max-width: 900px) { .klartext { grid-template-columns: 1fr; } }

/* Projekt-Karussell + Geräterahmen */
.karussell-nav { display: flex; gap: 8px; }
.karussell-nav button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--linie); background: #fff; cursor: pointer; font-size: 17px; color: var(--tinte); display: grid; place-items: center; transition: border-color var(--uebergang); }
.karussell-nav button:hover { border-color: var(--tinte); }
.karussell-spur { display: grid; grid-auto-flow: column; grid-auto-columns: 78vw; gap: 16px; /* Handy: eine Karte plus deutlicher Anschnitt der nächsten */ overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 12px; margin: -4px -4px 0; scrollbar-width: none; }
.karussell-spur::-webkit-scrollbar { display: none; }
@media (min-width: 861px) { .karussell-spur { grid-auto-columns: calc((100% - 32px) / 3.35); } } /* Desktop: 3 Karten + Anschnitt der vierten, damit das Karussell als solches erkennbar ist (Thomas); Handy bleibt 82vw */
.karussell .projekt-karte.zeig { transition-duration: .35s; } /* Karten blenden schneller, aber gestaffelt ein */
.projekt-karte { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; overflow: hidden; transition: border-color var(--uebergang); }
.projekt-karte:hover { border-color: var(--kobalt); }
.schau-bild { position: relative; background: transparent; padding: 20px 20px 0; display: grid; place-items: end center; height: 210px; overflow: hidden; transition: background var(--uebergang); }
.projekt-karte:hover .schau-bild { background: var(--flaeche); } /* grauer Grund nur beim Überfahren (Thomas) */
.projekt-text { padding: 16px 18px 20px; display: grid; gap: 6px; }
.projekt-text small { color: var(--grau); font-weight: 600; font-size: 12px; }
.projekt-text h3 { font-size: 17px; }
.projekt-text p { font-size: 14px; }
.projekt-text .nutzen { margin-top: 8px; font-weight: 700; font-size: 14px; color: var(--kobalt); }
.projekt-text .mehr { color: var(--kobalt); font-weight: 600; white-space: nowrap; }
/* Kontaktkarte: letzte Karte in jedem Karussell */
.kontakt-karte .schau-bild { background: var(--kobalt-hell); place-items: center; padding: 20px; }
.kontakt-karte .schau-bild .icon { width: 64px; height: 64px; border-radius: 18px; background: var(--kobalt); color: #fff; }
.kontakt-karte .schau-bild .icon svg { width: 30px; height: 30px; }
.rahmen { position: relative; width: 100%; max-width: 300px; }
/* Versetzter Kartenschatten nach rechts oben, hell in der Projektfarbe (Thomas) — NUR wo --glow gesetzt ist (Websites); infinia ohne Schatten */
[style*="--glow"] .rahmen { box-shadow: 12px -12px 0 0 color-mix(in srgb, var(--glow) 26%, #fff); }
.rahmen-browser { border-radius: 10px 10px 0 0; background: #fff; border: 1px solid var(--linie); border-bottom: 0; overflow: hidden; }
.rahmen-browser img, .rahmen-browser .rahmen-leer { aspect-ratio: 16 / 9.6; width: 100%; object-fit: cover; object-position: top; }
.rahmen-phone { max-width: 140px; border-radius: 24px 24px 0 0; background: var(--tinte); padding: 4px 4px 0; } /* dünner Rand, modernes Handy (Thomas, 14.09.) */
.rahmen-phone img, .rahmen-phone .rahmen-leer { border-radius: 20px 20px 0 0; aspect-ratio: 9 / 13; width: 100%; object-fit: cover; object-position: top; background: #fff; }
.rahmen-leer { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #FFFFFF 0 10px, #F3F4F6 10px 20px); color: var(--grau); font-weight: 600; font-size: 13px; }
/* ---------- Nachgebaute infinia-Bildschirme mit Beispieldaten (Navy #14285C, Pink #E83FAA) ---------- */
.mock-wrap { position: relative; overflow: hidden; background: #F6F7FB; }
.rahmen-browser .mock-wrap { aspect-ratio: 16 / 9.6; }
.rahmen-phone .mock-wrap { aspect-ratio: 9 / 13; border-radius: 20px 20px 0 0; background: #fff; }
/* Kira-Chat (Persönlicher Assistent) am Handy: Kopf mit KI-Kreis, Blasen erscheinen nacheinander */
.mock-phone.mock-kira { grid-template-rows: auto 1fr auto; background: #F6F7FB; }
.mock header.kc-kopf { display: flex; justify-content: flex-start; align-items: center; gap: 12px; padding: 26px 18px 14px; background: #fff; border-bottom: 1px solid #E3E7F0; }
.kc-avatar { width: 46px; height: 46px; border-radius: 50%; background: #7C3AED; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 16px; letter-spacing: .5px; }
.kc-kopf b { display: block; font-size: 17px; font-weight: 700; color: #14285C; } .kc-kopf small { font-size: 12px; color: #6B7A99; }
.kc-verlauf { padding: 18px 16px; display: grid; gap: 10px; align-content: start; }
.kc-stapel { display: grid; justify-items: start; } .kc-stapel > p { grid-area: 1 / 1; }
.kc-verlauf p { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; opacity: 0; animation: kc-blase 11s ease-out infinite; }
.kc-ich { justify-self: end; background: #2A52BE; color: #fff; border-bottom-right-radius: 4px; animation-delay: .4s !important; }
.kc-kira { justify-self: start; background: #fff; color: #14285C; border: 1px solid #E3E7F0; border-bottom-left-radius: 4px; animation-name: kc-blase-spaet !important; }
.kc-tippt { justify-self: start; background: #fff; border: 1px solid #E3E7F0; border-bottom-left-radius: 4px; display: flex; gap: 5px; align-items: center; padding: 12px 14px !important; animation-name: kc-tippt !important; }
.kc-tippt span { width: 7px; height: 7px; border-radius: 50%; background: #7C3AED; opacity: .4; animation: tippen 1.1s infinite ease-in-out; } .kc-tippt span:nth-child(2) { animation-delay: .18s; } .kc-tippt span:nth-child(3) { animation-delay: .36s; }
@keyframes kc-blase { 0% { opacity: 0; transform: translateY(6px); } 6%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes kc-tippt { 0%, 16% { opacity: 0; } 20%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes kc-blase-spaet { 0%, 46% { opacity: 0; transform: translateY(6px); } 52%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.kc-kira2 { animation-name: kc-blase-spaet2 !important; }
@keyframes kc-blase-spaet2 { 0%, 64% { opacity: 0; transform: translateY(6px); } 70%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.kc-eingabe { display: flex; align-items: center; gap: 10px; padding: 12px 16px 22px; background: #fff; border-top: 1px solid #E3E7F0; }
.kc-eingabe span { flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid #E3E7F0; color: #9AA5BC; font-size: 13px; }
.kc-eingabe i { width: 38px; height: 38px; border-radius: 50%; background: #E83FAA; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 14px; }
/* Terminal-Nachbau (Zeiterfassung): heller Grund, Logo + Uhr, Anwenderzeilen mit Status-Ring wie im Original */
.mock-desk.mock-terminal { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; background: #EEF1F7; } /* kein Seitenmenü wie beim Dashboard */
.tm-kopf { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 22px 6px; }
.tm-logo { background: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: 14px; color: #14285C; }
.tm-uhr { display: grid; gap: 4px; justify-items: end; }
.tm-uhr b { background: #fff; border-radius: 10px; padding: 6px 14px; font-family: var(--font-d); font-size: 26px; font-weight: 800; color: #14285C; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tm-uhr small { background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 11px; color: #4B5A78; }
.tm-grid { padding: 8px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.tm-row { display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 12px; background: rgba(255, 255, 255, .8); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); overflow: hidden; }
.tm-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--f); color: #fff; font-style: normal; font-weight: 700; font-size: 15px; display: grid; place-items: center; letter-spacing: .5px; box-shadow: 0 0 0 3px #B0BEC5; }
.tm-row.in .tm-avatar { box-shadow: 0 0 0 3px #4CAF50; } .tm-row.out .tm-avatar { box-shadow: 0 0 0 3px #E53935; }
.tm-row > div { flex: 1; min-width: 0; } .tm-row b { display: block; font-size: 14.5px; font-weight: 600; color: #14285C; white-space: nowrap; } .tm-row small { font-size: 12px; color: #4B5A78; }
.tm-row em { flex: 0 0 auto; width: 44px; align-self: stretch; display: grid; place-items: center; border-left: 1px solid #E3E7F0; color: #6B7A99; font-style: normal; font-size: 20px; letter-spacing: -1px; }
.tm-fuss { background: #55C1FF; color: #fff; font-size: 11px; display: flex; justify-content: space-between; align-items: center; padding: 6px 22px; } .tm-fuss b { font-weight: 700; }
/* Rechnungsblatt: A4 im Querformat-Ausschnitt (oberer Teil), wie ein Papier auf der Karte */
.rahmen-blatt { max-width: 176px; }
.rahmen-blatt .mock-wrap { aspect-ratio: 176 / 190; background: #fff; border: 1px solid var(--linie); border-radius: 6px 6px 0 0; box-shadow: 0 8px 24px -12px rgba(17, 24, 39, .25); }
.gross-rahmen .rahmen-blatt .mock-wrap { aspect-ratio: 595 / 842; border-radius: 6px; } /* Projektseite: ganzes Blatt */
.mock-blatt { width: 595px; height: 842px; zoom: .2958; padding: 40px 62px 0; background: #fff; color: #1E2A5A; font-size: 11px; line-height: 1.45; position: relative; }
.gross-rahmen .mock-blatt { zoom: .8739; } /* 595 × .8739 = 520 px = großer Rahmen */
.rg-kopf { display: flex; justify-content: flex-end; margin-bottom: 64px; }
.rg-firma { font-family: var(--font-d); font-size: 22px; font-weight: 800; color: #2A52BE; letter-spacing: -.02em; }
.rg-anschrift { font-size: 12px; margin-bottom: 8px; }
.rg-meta { display: grid; grid-template-columns: auto auto; gap: 3px 22px; justify-content: end; font-size: 10.5px; margin-bottom: 26px; } .rg-meta dt { color: #6B7A99; }
.mock-blatt h4 { font-size: 18px; font-weight: 700; color: #2A52BE; margin: 0; } .rg-sub { display: block; color: #6B7A99; font-size: 11px; margin-bottom: 18px; }
.mock-blatt table { border: 0; background: transparent; border-radius: 0; font-size: 10.5px; }
.mock-blatt th { background: transparent; color: #2A52BE; border: 0; padding: 4px 6px; } .mock-blatt table { table-layout: fixed; }
.mock-blatt th:nth-child(1) { width: 45%; text-align: left; } .mock-blatt th:nth-child(2) { width: 15%; } .mock-blatt th:nth-child(3) { width: 8%; } .mock-blatt th:nth-child(4) { width: 15%; } .mock-blatt th:nth-child(5) { width: 17%; } .mock-blatt th:not(:first-child), .mock-blatt td:not(:first-child) { text-align: right; white-space: nowrap; }
.mock-blatt td { border: 0; padding: 6px; vertical-align: top; } .mock-blatt td b { display: block; font-weight: 600; color: #1E2A5A; } .mock-blatt td span { display: block; color: #6B7A99; }
.rg-summen { display: grid; grid-template-columns: auto auto; gap: 3px 24px; justify-content: end; font-size: 10.5px; margin: 10px 6px 26px; } .rg-summen dt { color: #6B7A99; text-align: right; } .rg-summen dd { text-align: right; } .rg-summen .fett { color: #1E2A5A; font-weight: 700; }
.rg-text { font-size: 10.5px; }
.rg-fuss { position: absolute; left: 0; right: 0; bottom: 0; background: #2A52BE; color: #fff; text-align: center; font-size: 9.5px; line-height: 1.5; padding: 12px 20px; } .rg-fuss b { display: block; font-weight: 700; }
/* ---------- Thumbnails 14.09.: Zertifikat, ÖNORM-Angebot, Gutscheine, Standorte, Wiki, Agentur-Chat, Prüfbericht, Systeme ---------- */
.mock-zert { --zt: #2F9E44; color: #222; font-family: 'DejaVu Sans', Verdana, var(--font-b); padding: 46px 50px 0; }
.zt-kopf { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2.2px solid var(--zt); padding-bottom: 12px; margin-bottom: 22px; }
.zt-kopf b { display: block; font-size: 19px; font-weight: 700; color: var(--zt); line-height: 1.2; }
.zt-kopf span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #222; }
.zt-logo { font-style: normal; font-family: var(--font-d); font-weight: 800; font-size: 20px; color: var(--zt); letter-spacing: -.02em; padding-top: 4px; }
.zt-intro { font-size: 10.5px; line-height: 1.45; margin: 0 0 18px; }
.mock-blatt table.zt-tabelle { table-layout: auto; border: .7px solid #DDD; font-size: 10.5px; }
.zt-tabelle th, .zt-tabelle td { padding: 8px 12px; border: 0; text-align: left; color: #222; }
.zt-tabelle th { width: 178px; font-weight: 700; background: transparent; }
.zt-tabelle tr:nth-child(odd) th, .zt-tabelle tr:nth-child(odd) td { background: #F3F4F6; }
.zt-h { margin: 24px 0 8px; font-size: 12px; font-weight: 700; color: var(--zt); }
.zt-bedingungen { margin: 0; padding-left: 16px; font-size: 10px; line-height: 1.4; display: grid; gap: 4px; }
.zt-qr { position: absolute; left: 0; right: 0; bottom: 150px; display: grid; justify-items: center; gap: 3px; }
.zt-qr .qr { width: 140px; height: 140px; fill: #111; margin-bottom: 6px; } /* im Thumbnail größer als im echten PDF, damit der QR-Code als Kern des Projekts sichtbar bleibt */
.zt-qr b { font-size: 9.5px; font-weight: 700; } .zt-qr small { font-size: 8.5px; color: #666; }
.zt-fuss { position: absolute; left: 50px; right: 50px; bottom: 62px; border-top: .6px solid #DDD; padding-top: 6px; font-size: 8px; color: #666; }
.on-ki { font-size: 9.5px; font-weight: 700; color: #6D28D9; background: #F1EBFF; border: 1px solid #DDD1FB; border-radius: 999px; padding: 4px 10px; align-self: center; margin-right: auto; }
.mock-oenorm .rg-kopf { justify-content: space-between; }
.mock-oenorm th:nth-child(1) { width: 12%; text-align: left; } .mock-oenorm th:nth-child(2) { width: 44%; } .mock-oenorm th:nth-child(3) { width: 14%; } .mock-oenorm th:nth-child(4) { width: 14%; } .mock-oenorm th:nth-child(5) { width: 16%; }
.mock-oenorm td:first-child { color: #6B7A99; font-variant-numeric: tabular-nums; }
.mock-oenorm .on-lg td { background: #F0F3FA; color: #2A52BE; font-weight: 700; padding: 5px 6px; }
.mock-desk.mock-gs { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: #F6F7FB; }
.gs-kopf { padding: 18px 22px 8px; } .gs-kopf b { font-size: 20px; }
.gs-body { display: grid; grid-template-columns: 250px 1fr; gap: 16px; padding: 8px 22px 20px; align-items: start; }
.gs-karte { position: relative; overflow: hidden; border-radius: 16px; padding: 18px; background: linear-gradient(135deg, #2A52BE, #E83FAA); color: #fff; display: grid; gap: 6px; }
.gs-karte small { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .08em; }
.gs-karte b { font-family: var(--font-d); font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.gs-code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; letter-spacing: .12em; background: rgba(255, 255, 255, .18); padding: 6px 10px; border-radius: 8px; justify-self: start; }
.gs-karte em { font-style: normal; font-size: 12px; opacity: .9; background: none; color: #fff; padding: 0; font-weight: 500; }
.gs-streifen { position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.mock-desk.mock-karte { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: #F6F7FB; }
.ka-kopf { padding: 18px 22px 10px; } .ka-kopf b { font-size: 20px; }
.ka-map { position: relative; margin: 0 22px 20px; border-radius: 14px; background-color: #E6EFDF; background-image: linear-gradient(160deg, transparent 30%, #BFD9F5 30%, #BFD9F5 33.5%, transparent 33.5%), linear-gradient(115deg, transparent 44%, #fff 44%, #fff 46.5%, transparent 46.5%), linear-gradient(20deg, transparent 60%, #fff 60%, #fff 62%, transparent 62%), linear-gradient(0deg, rgba(255, 255, 255, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px; }
.ka-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: flex; align-items: center; gap: 7px; font-style: normal; font-size: 12.5px; font-weight: 600; color: #14285C; background: #fff; padding: 6px 10px 6px 7px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(20, 40, 92, .35); white-space: nowrap; }
.ka-pin b { width: 10px; height: 10px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .25); animation: ka-puls 2.2s ease-in-out infinite; }
@keyframes ka-puls { 0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, .25); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, .12); } }
.mock-wiki aside { background: #F0F3FA; color: #4B5A78; border-right: 1px solid #E3E7F0; }
.mock-wiki aside span.aktiv { background: #fff; color: #14285C; box-shadow: 0 2px 8px -4px rgba(20, 40, 92, .3); }
.wk-titel { display: block; font-size: 13px; font-weight: 700; color: #14285C; margin-bottom: 14px; padding: 0 12px; }
.wk-text { font-size: 13.5px; color: #4B5A78; margin: -4px 0 0; }
.wk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wk-liste li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid #E3E7F0; border-radius: 10px; font-size: 14px; }
.wk-liste li::before { content: ""; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #C7D2EA; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.wk-liste li.ok { color: #6B7A99; text-decoration: line-through; text-decoration-color: #C7D2EA; }
.wk-liste li.ok::before { content: "✓"; background: #16A34A; border-color: #16A34A; }
.wk-fortschritt { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #6B7A99; }
.wk-fortschritt i { flex: 1; height: 8px; border-radius: 999px; background: #E3E7F0; position: relative; overflow: hidden; }
.wk-fortschritt i::after { content: ""; position: absolute; inset: 0; width: var(--p); background: #2A52BE; border-radius: 999px; }
.mock-desk.mock-agentur { grid-template-columns: 1fr; background: #EEF1F7; place-items: center; }
.ag-chat { width: 560px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(20, 40, 92, .35); display: grid; grid-template-rows: auto 1fr auto; }
.mock header.ag-kopf { justify-content: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #E3E7F0; }
.ag-kopf i { width: 40px; height: 40px; border-radius: 50%; background: #14285C; color: #fff; font-style: normal; font-weight: 700; font-size: 14px; display: grid; place-items: center; flex: 0 0 auto; }
.ag-kopf b { display: block; font-size: 16px; } .ag-kopf small { font-size: 12px; color: #6B7A99; }
.ag-verlauf { padding: 16px 18px; display: grid; gap: 10px; }
.ag-verlauf p { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; margin: 0; }
.ag-sie { justify-self: start; background: #F0F3FA; color: #14285C; border-bottom-left-radius: 4px; }
.ag-ich { justify-self: end; background: #2A52BE; color: #fff; border-bottom-right-radius: 4px; }
.ag-eingabe { display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid #E3E7F0; }
.ag-eingabe span { flex: 1; padding: 9px 14px; border-radius: 999px; border: 1px solid #E3E7F0; color: #9AA5BC; font-size: 13px; }
.ag-eingabe i { width: 36px; height: 36px; border-radius: 50%; background: #E83FAA; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 14px; }
.pb-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.pb-liste li { display: grid; grid-template-columns: 14px 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 1px solid #E3E7F0; border-radius: 8px; font-size: 10.5px; }
.pb-liste i { width: 12px; height: 12px; border-radius: 50%; grid-row: span 2; }
.pb-liste b { font-size: 11.5px; font-weight: 700; color: #1E2A5A; } .pb-liste span { color: #6B7A99; }
.pb-liste .gruen { background: #16A34A; } .pb-liste .gelb { background: #F59E0B; } .pb-liste .rot { background: #DC2626; }
.pb-fazit { background: #EEF3FF; border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; font-size: 10.5px; }
.pb-fazit b { color: #2A52BE; font-size: 12px; }
.mock-desk.mock-systeme { grid-template-columns: 1fr; background: #F6F7FB; place-items: center; }
.sy-buehne { display: grid; grid-template-columns: 200px 1fr 200px 1fr 200px; align-items: center; width: 740px; }
.sy-box { background: #fff; border: 1px solid #E3E7F0; border-radius: 22px; padding: 28px 16px 26px; text-align: center; display: grid; gap: 4px; justify-items: center; box-shadow: 0 16px 34px -24px rgba(20, 40, 92, .4); }
.sy-box i { width: 72px; height: 72px; border-radius: 18px; background: #E8EEFF; color: #2A52BE; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 22px; margin-bottom: 8px; }
.sy-box b { font-size: 22px; } .sy-box small { color: #6B7A99; font-size: 15px; }
.sy-linie { position: relative; height: 4px; background: #D5DCEA; border-radius: 999px; margin: 0 -2px; }
.sy-linie span { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #E83FAA; box-shadow: 0 0 0 5px rgba(232, 63, 170, .2); animation: sy-lauf 2.6s linear infinite; animation-delay: var(--d, 0s); }
.sy-linie span:nth-child(2) { background: #2A52BE; box-shadow: 0 0 0 5px rgba(42, 82, 190, .2); animation-name: sy-zurueck; }
.sy-linie em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; background: #fff; border: 1px solid #E3E7F0; font-size: 14px; padding: 5px 12px; }
@keyframes sy-lauf { from { left: 0; } to { left: calc(100% - 14px); } }
@keyframes sy-zurueck { from { left: calc(100% - 14px); } to { left: 0; } }
@media (prefers-reduced-motion: reduce) { .ka-pin b, .sy-linie span { animation: none; } }
/* Terminal-Dialoge (Projektseite Zeiterfassung, 14.09.) — nach dem echten infinia-Frontend nachgebaut: Terminal gedimmt,
   davor TerminalUserDialog (Übersicht) bzw. AbsenceDialog („Abwesenheit beantragen“) */
.mock-td { position: relative; }
.mock-td::before { content: ""; position: absolute; inset: 0; background: rgba(20, 40, 92, .35); z-index: 1; }
.mock-td > .tm-grid, .mock-td > .tm-kopf { filter: blur(1.2px); }
.tu-dialog { position: absolute; inset: 18px 40px; z-index: 2; background: #fff; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(20, 40, 92, .45); display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; }
.mock header.tu-kopf { justify-content: flex-start; gap: 14px; padding: 12px 18px; background: #F6F7FB; border-bottom: 1px solid #E3E7F0; }
.tu-kopf .tm-avatar { width: 40px; height: 40px; font-size: 13px; }
.tu-kopf > div { flex: 1; } .tu-kopf b { display: block; font-size: 17px; } .tu-kopf small { color: #6B7A99; font-size: 12px; }
.tu-x { font-style: normal; color: #6B7A99; font-size: 15px; background: none; padding: 0 4px; }
.tu-tabs { display: flex; gap: 4px; padding: 0 12px; background: #F6F7FB; border-bottom: 1px solid #E3E7F0; }
.tu-tabs span { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: #6B7A99; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid transparent; }
.tu-tabs span.aktiv { color: #2A52BE; border-bottom-color: #2A52BE; }
.tu-panel { padding: 10px 14px 12px; display: grid; gap: 8px; align-content: start; min-height: 0; overflow: hidden; }
.tu-konten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tu-karte { border: 1px solid #E3E7F0; padding: 8px 12px; display: grid; gap: 2px; font-size: 11.5px; }
.tu-karte > b { font-size: 12px; margin-bottom: 3px; }
.tu-karte > div { display: flex; justify-content: space-between; } .tu-karte > div span:first-child { color: #4B5A78; }
.tu-karte .summe { border-top: 1px solid #E3E7F0; margin-top: 3px; padding-top: 4px; font-weight: 700; }
.tu-karte .gruen, .tu-tabelle .gruen { color: #15803D; } .tu-tabelle .rot { color: #B91C1C; }
.tu-zeitraum { font-size: 11px; color: #6B7A99; }
.tu-leiste { display: flex; align-items: center; gap: 4px; }
.tu-leiste i { font-style: normal; font-size: 11px; font-weight: 700; color: #14285C; padding: 4px 8px; text-transform: uppercase; }
.tu-leiste b { width: 1px; height: 16px; background: #E3E7F0; margin: 0 4px; }
.tu-leiste .hell { color: #0EA5E9; }
.mock table.tu-tabelle { border-radius: 0; font-size: 11px; border: 1px solid #E3E7F0; }
.tu-tabelle th { padding: 5px 8px; font-size: 10.5px; } .tu-tabelle td { padding: 5px 8px; white-space: nowrap; }
.tu-tabelle .r { text-align: right; }
.tu-tabelle .summe td { font-weight: 700; background: #F3F4F6; }
.tu-tabelle i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.tu-tabelle .ein { background: #4CAF50; } .tu-tabelle .aus { background: #E53935; } .tu-tabelle s { text-decoration: none; color: #B7C0D3; }
.ab-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 500px; background: #fff; border-radius: 0; box-shadow: 0 30px 60px -20px rgba(20, 40, 92, .45); padding: 14px 18px 12px; display: grid; gap: 14px; }
.mock header.ab-kopf { justify-content: space-between; } .ab-kopf b { font-size: 18px; font-weight: 600; }
.ab-feld { position: relative; border: 1px solid #C7D2EA; padding: 14px 12px 8px; min-height: 42px; }
.ab-feld small { position: absolute; left: 10px; top: -7px; padding: 0 4px; background: #fff; font-size: 10.5px; color: #6B7A99; }
.ab-feld b { font-size: 13.5px; font-weight: 500; } .ab-feld i { position: absolute; right: 10px; top: 12px; font-style: normal; color: #6B7A99; }
.ab-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab-text { min-height: 58px; }
.ab-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #14285C; }
.ab-toggle i { width: 34px; height: 14px; border-radius: 999px; background: #C7D2EA; position: relative; }
.ab-toggle i::after { content: ""; position: absolute; left: -2px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.ab-aktionen { display: flex; justify-content: flex-end; gap: 8px; }
.ab-aktionen span { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; padding: 8px 12px; }
.ab-aktionen .orange { color: #F57C00; } .ab-aktionen .gruen { color: #2E7D32; }
/* Zeiterfassung, weitere Ansichten (14.09.) nach infinia: AppHomeModule am Handy (KOMMT/GEHT-Knopf, Arbeitsdauer, App-Kacheln)
   und TimeModule „Übersicht“ mit den Export-FABs (PDF rot, Excel grün) der WorkdayTable */
.mock-phone.mock-app { grid-template-rows: auto auto auto auto 1fr; background: #fff; }
.ap-toolbar { padding: 24px 20px 6px; display: flex; align-items: center; gap: 8px; }
.ap-toolbar i { width: 22px; height: 22px; border-radius: 6px; background: url(infinia-icon.png) center / 100% no-repeat; }
.ap-toolbar b { font-size: 20px; font-weight: 800; color: #2A52BE; letter-spacing: -.02em; }
.ap-titel { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 4px; font-weight: 700; font-size: 16px; }
.ap-badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #DFF5E6; color: #15803D; display: flex; gap: 6px; align-items: center; }
.ap-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.ap-knopf { margin: 8px 20px 4px; border-radius: 999px; background: #E53935; color: #fff; padding: 16px 24px; display: grid; gap: 2px; box-shadow: 0 10px 22px -12px rgba(229, 57, 53, .7); }
.ap-knopf b { font-size: 18px; font-weight: 700; letter-spacing: .06em; display: flex; align-items: center; gap: 10px; }
.ap-knopf b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.ap-knopf small { font-size: 12px; opacity: .92; }
.ap-dauer { padding: 6px 22px; font-size: 13px; color: #4B5A78; display: flex; align-items: center; gap: 8px; }
.ap-dauer::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #6B7A99; box-sizing: border-box; }
.ap-apps { padding: 8px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.ap-apps > b { grid-column: 1 / -1; font-size: 15px; font-weight: 700; margin-bottom: -4px; }
.ap-tile { background: #F6F7FB; border-radius: 14px; padding: 14px 10px; display: grid; gap: 8px; justify-items: center; font-size: 12.5px; font-weight: 600; text-align: center; }
.ap-tile i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.ap-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mock-desk.mock-zeit { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: #fff; position: relative; }
.tz-tabs { display: flex; gap: 2px; padding: 14px 18px 0; border-bottom: 1px solid #E3E7F0; }
.tz-tabs span { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: #6B7A99; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid transparent; }
.tz-tabs span.aktiv { color: #2A52BE; border-bottom-color: #2A52BE; }
.tz-panel { padding: 12px 18px; display: grid; gap: 8px; align-content: start; overflow: hidden; }
.tz-fabs { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 12px; align-items: center; z-index: 2; }
.tz-fab { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .28); }
.tz-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tz-fab.rot { background: #E53935; } .tz-fab.gruen { background: #43A047; }
.tz-tip { background: #424242; color: #fff; font-size: 11px; padding: 5px 9px; border-radius: 4px; white-space: nowrap; }
/* Verkaufsmodul (Projektseite Angebot→Rechnung, 14.09.) nach infinia SellModule: Reiter Offert/Auftrag/Lieferschein/Fakturierung,
   flache Toolbar-Knöpfe in Quasar-Farben, eckige Felder mit Beschriftung, Positionsreiter, Positionstabelle, Dialoge, Meldung */
.mock-desk.mock-vk { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; background: #fff; position: relative; }
.vk-tabs { display: flex; gap: 2px; padding: 12px 18px 0; border-bottom: 1px solid #E3E7F0; }
.vk-tabs span { padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: #6B7A99; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid transparent; }
.vk-tabs span.aktiv { color: #2A52BE; border-bottom-color: #2A52BE; }
.vk-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 14px 4px; }
.vk-btn { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 6px 8px; border-radius: 0; display: inline-flex; align-items: center; gap: 5px; }
.vk-btn::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: .55; }
.vk-btn.lila { color: #7B1FA2; } .vk-btn.gruen { color: #21BA45; } .vk-btn.orange { color: #F57C00; } .vk-btn.rot { color: #C10015; }
.vk-btn.blau { color: #1976D2; } .vk-btn.grau { color: #757575; } .vk-btn.pink { color: #E91E63; }
.vk-btn.gedrueckt { background: #F3E5F5; }
.vk-body { padding: 4px 18px 12px; display: grid; gap: 8px; align-content: start; overflow: hidden; }
.vk-felder { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.vk-feld { grid-column: span var(--sp, 3); position: relative; border: 1px solid #C7D2EA; padding: 11px 10px 6px; min-height: 36px; }
.vk-feld small { position: absolute; left: 8px; top: -7px; padding: 0 4px; background: #fff; font-size: 9.5px; color: #6B7A99; }
.vk-feld b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.vk-feld.leer b { color: #B7C0D3; }
.vk-subtabs { display: flex; gap: 2px; border-bottom: 1px solid #E3E7F0; }
.vk-subtabs span { padding: 5px 10px; font-size: 11px; font-weight: 600; color: #6B7A99; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid transparent; }
.vk-subtabs span.aktiv { color: #2A52BE; border-bottom-color: #2A52BE; }
.mock table.vk-tabelle { border-radius: 0; font-size: 11px; border: 1px solid #E3E7F0; table-layout: fixed; }
.vk-tabelle th { padding: 5px 8px; font-size: 10.5px; } .vk-tabelle td { padding: 5px 8px; vertical-align: top; }
.vk-tabelle th:nth-child(1), .vk-tabelle td:nth-child(1) { width: 9%; } .vk-tabelle th:nth-child(2), .vk-tabelle td:nth-child(2) { width: 7%; }
.vk-tabelle th:nth-child(4), .vk-tabelle td:nth-child(4), .vk-tabelle th:nth-child(5), .vk-tabelle td:nth-child(5) { width: 13%; } .vk-tabelle th:nth-child(6), .vk-tabelle td:nth-child(6) { width: 14%; }
.vk-tabelle .r { text-align: right; }
.vk-tabelle td b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vk-tabelle td span { display: block; color: #6B7A99; font-size: 10px; }
.vk-tabelle .summe td { font-weight: 700; background: #F3F4F6; }
.vk-status { display: inline-flex; align-items: center; gap: 6px; }
.vk-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f, #2A52BE); }
.vk-dim::before { content: ""; position: absolute; inset: 0; background: rgba(20, 40, 92, .35); z-index: 1; }
.vk-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 520px; background: #fff; border-radius: 0; box-shadow: 0 30px 60px -20px rgba(20, 40, 92, .45); padding: 14px 18px 12px; display: grid; gap: 12px; }
.mock header.vk-dkopf { justify-content: space-between; } .vk-dkopf b { font-size: 15px; font-weight: 700; color: #2A52BE; } .vk-dkopf em { font-style: normal; color: #6B7A99; background: none; padding: 0; }
.vk-filter { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.mock table.vk-liste { border-radius: 0; font-size: 11px; border: 1px solid #E3E7F0; } .vk-liste th, .vk-liste td { padding: 6px 8px; }
.vk-liste tr.gewaehlt td { background: #EEF3FF; }
.vk-toast { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; background: #323232; color: #fff; padding: 9px 14px; border-radius: 4px; font-size: 12px; display: flex; gap: 10px; align-items: baseline; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); white-space: nowrap; }
.vk-toast b { font-weight: 700; } .vk-toast span { opacity: .85; }
.vk-unterschrift { border: 1px solid #C7D2EA; background: #FAFBFE; height: 120px; display: grid; place-items: center; position: relative; }
.vk-unterschrift svg { width: 220px; height: 80px; fill: none; stroke: #14285C; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vk-unterschrift small { position: absolute; right: 8px; bottom: 6px; font-size: 9.5px; color: #9AA5BC; }
.vk-daktionen { display: flex; justify-content: space-between; align-items: center; }
.vk-daktionen div { display: flex; gap: 4px; }
.mock-desk.mock-vk2 { grid-template-columns: 1fr 1fr; gap: 28px; padding: 34px 36px; background: #F6F7FB; align-items: stretch; }
.vk-mini { background: #fff; border: 1px solid #E3E7F0; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px -22px rgba(20, 40, 92, .4); display: grid; grid-template-rows: auto auto 1fr; }
.vk-mini .vk-tabs { padding: 10px 12px 0; gap: 0; } .vk-mini .vk-tabs span { font-size: 10.5px; padding: 7px 7px; letter-spacing: .02em; }
.vk-mini-body { padding: 16px; display: grid; gap: 12px; align-content: start; }
.vk-mini-body i { display: block; height: 10px; border-radius: 999px; background: #E3E7F0; } .vk-mini-body i.kurz { width: 55%; } .vk-mini-body i.mittel { width: 78%; }
.vk-mini-body .vk-block { height: 110px; border-radius: 8px; background: #F0F3FA; border: 1px solid #E3E7F0; }
.vk-mini-body .vk-block + .vk-block { height: 70px; }
.vk-tabelle .summe td { padding: 6px 8px; } .vk-tabelle .summe b { display: inline; margin-left: 6px; }
.vk-mini-titel { padding: 12px 14px 0; font-size: 12.5px; font-weight: 700; color: #14285C; }
.vk-mini-titel small { display: block; font-weight: 500; color: #6B7A99; font-size: 11px; margin-top: 2px; }
/* Lager/QR/Inventur (Projektseite, 14.09.): eine Sache je Folie, nach infinia Etiketten-Druck, Scanner.vue, ProductinfoApp,
   InventorytransactionDialog, StockcountDialog, Stockcockpit — auf das jeweilige Element reduziert (Thomas) */
.rahmen-etikett { max-width: none; width: 100%; } .rahmen-etikett .mock-wrap { background: transparent; overflow: visible; }
.gross-rahmen:has(.lg-etikett) { place-items: center !important; padding: 40px !important; }
.lg-etikett { display: grid; place-items: center; padding: 10px 0; }
.lg-label { width: 360px; background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; box-shadow: 0 18px 36px -22px rgba(20, 40, 92, .45); padding: 18px 20px; display: grid; grid-template-columns: 1fr 96px; gap: 16px; align-items: center; }
.lg-label b { font-family: var(--font-d); font-size: 30px; font-weight: 800; letter-spacing: -.02em; display: block; }
.lg-label span { display: block; font-size: 15px; font-weight: 600; margin-top: 4px; }
.lg-label small { display: block; color: #6B7A99; font-size: 11px; margin-top: 8px; }
.lg-label .qr { width: 96px; height: 96px; fill: #111; }
.lg-label.klein { width: 230px; padding: 12px 14px; grid-template-columns: 1fr 64px; gap: 10px; box-shadow: none; }
.lg-label.klein b { font-size: 18px; } .lg-label.klein span { font-size: 11px; } .lg-label.klein small { display: none; } .lg-label.klein .qr { width: 64px; height: 64px; }
.mock-phone.lg-scan { grid-template-rows: auto 1fr; background: #1B1F2A; }
.lg-topbar { display: flex; align-items: center; justify-content: space-between; padding: 26px 18px 12px; color: #fff; font-weight: 600; font-size: 16px; }
.lg-topbar i { font-style: normal; width: 32px; text-align: left; }
.lg-kamera { position: relative; background: radial-gradient(circle at 50% 42%, #3A4152, #1B1F2A 72%); display: grid; place-items: center; }
.lg-reticle { width: 290px; height: 210px; border: 3px solid #fff; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.mock-phone.lg-info { grid-template-rows: auto auto auto auto 1fr; }
.lg-key { display: flex; gap: 6px; padding: 24px 16px 8px; }
.lg-key i { width: 36px; height: 36px; display: grid; place-items: center; font-style: normal; color: #14285C; }
.lg-key svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-el { padding: 14px 22px; border-bottom: 1px solid #EEF1F6; }
.lg-el small { display: block; font-size: 12px; color: #6B7A99; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.lg-el b { font-size: 20px; font-weight: 700; } .lg-el b.gross { font-family: var(--font-d); font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.mock-phone.lg-buchen, .mock-phone.lg-zaehlen { grid-template-rows: auto 1fr; background: #F6F7FB; }
.lg-dialog { margin: 22px 16px; background: #fff; border-radius: 0; box-shadow: 0 20px 40px -24px rgba(20, 40, 92, .4); padding: 18px; display: grid; gap: 14px; }
.lg-dkopf { display: flex; justify-content: space-between; align-items: flex-start; }
.lg-dkopf b { display: block; font-size: 18px; } .lg-dkopf span { display: block; font-size: 13px; color: #6B7A99; margin-top: 2px; } .lg-dkopf i { font-style: normal; color: #6B7A99; }
.lg-feld { position: relative; border: 1px solid #C7D2EA; padding: 14px 12px 8px; }
.lg-feld small { position: absolute; left: 10px; top: -7px; padding: 0 4px; background: #fff; font-size: 11px; color: #6B7A99; }
.lg-feld b { font-size: 16px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.lg-feld b em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #FDE2E2; color: #B91C1C; }
.lg-ok { justify-self: end; background: #21BA45; color: #fff; font-weight: 700; padding: 10px 28px; font-size: 14px; letter-spacing: .04em; }
.lg-menge { display: flex; align-items: center; gap: 12px; }
.lg-menge b { flex: 1; border: 1px solid #C7D2EA; padding: 12px 16px; font-family: var(--font-d); font-size: 44px; font-weight: 800; letter-spacing: -.02em; text-align: right; line-height: 1; }
.lg-menge span { font-size: 18px; color: #6B7A99; font-weight: 600; }
.lg-pm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lg-pm i { display: grid; place-items: center; height: 56px; font-style: normal; font-size: 30px; font-weight: 700; color: #fff; }
.lg-pm .plus { background: #21BA45; } .lg-pm .minus { background: #C10015; }
.lg-speichern { background: #21BA45; color: #fff; font-weight: 700; text-align: center; padding: 14px; font-size: 15px; letter-spacing: .04em; }
.mock-desk.lg-buero { grid-template-columns: 1fr; place-items: center; background: #F6F7FB; }
.lg-buero-innen { display: grid; gap: 26px; justify-items: center; }
.lg-chips { display: flex; gap: 10px; }
.lg-chips span { font-size: 15px; font-weight: 700; letter-spacing: .04em; padding: 9px 16px; color: #6B7A99; border-bottom: 3px solid #E3E7F0; }
.lg-chips span.aktiv { color: #2A52BE; border-bottom-color: #2A52BE; }
.lg-hauptknopf { background: #2A52BE; color: #fff; font-weight: 700; font-size: 20px; letter-spacing: .06em; padding: 20px 40px; box-shadow: 0 16px 34px -18px rgba(42, 82, 190, .6); }
/* Lager, Folien 7+8 (14.09.): Bestellliste aus der Artikelinfo-App (FAB „Buchung“ / „Zur Bestellliste“) und die
   Lagerstandsmeldung (Export-Variante STOCK_REPORT: Artikel, Bezeichnung, Lager, Dispo, Gruppe, Lieferant) */
.lg-info { position: relative; }
.lg-fab { position: absolute; right: 18px; bottom: 26px; display: grid; justify-items: end; gap: 12px; }
.lg-fab-aktion { display: flex; align-items: center; gap: 10px; }
.lg-fab-aktion span { font-size: 13.5px; font-weight: 600; color: #14285C; background: #fff; padding: 6px 10px; box-shadow: 0 2px 8px rgba(20, 40, 92, .15); }
.lg-fab-aktion i, .lg-fab-haupt { width: 48px; height: 48px; display: grid; place-items: center; background: #14285C; color: #fff; font-style: normal; }
.lg-fab-aktion i svg, .lg-fab-haupt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-fab-haupt { background: #E83FAA; }
.lg-fab-aktion.aktiv span { background: #E83FAA; color: #fff; }
.lg-el b.leer { color: #B91C1C; }
.mock-desk.lg-meldung { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: #fff; }
.lg-meldung-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 26px 8px; }
.lg-meldung-kopf b { font-size: 22px; font-weight: 700; } .lg-meldung-kopf small { color: #6B7A99; font-size: 13px; }
.lg-meldung-body { padding: 8px 26px 20px; display: grid; gap: 12px; align-content: start; }
.mock table.lg-tabelle { border-radius: 0; font-size: 13px; border: 1px solid #E3E7F0; }
.lg-tabelle th { padding: 8px 12px; } .lg-tabelle td { padding: 9px 12px; }
.lg-tabelle .r { text-align: right; font-variant-numeric: tabular-nums; }
.lg-tabelle td.rot { color: #B91C1C; font-weight: 700; } .lg-tabelle td.gelb { color: #B45309; font-weight: 700; }
.lg-meldung-hinweis { font-size: 12.5px; color: #6B7A99; }
/* Team (Projektseite „Das Team weiß, was heute dran ist“, 14.09.) nach infinia CalendarModule (Team-Ansicht), AppointmentForm,
   AppHomeCalendar, TodoEditDialog und ChatModule/ChatMessageInput — je Folie ein Element */
.mock-desk.mock-tm { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: #fff; position: relative; }
.tm-cal-kopf { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 10px; }
.tm-cal-nav { display: flex; align-items: center; gap: 8px; font-size: 14px; } .tm-cal-nav b { font-weight: 700; margin-left: 6px; }
.tm-cal-nav i { font-style: normal; font-size: 12px; font-weight: 700; color: #14285C; padding: 4px 8px; }
.tm-cal-views { display: flex; } .tm-cal-views span { padding: 6px 12px; font-size: 13px; color: #6B7A99; } .tm-cal-views span.aktiv { color: #2A52BE; font-weight: 700; border-bottom: 2px solid #2A52BE; }
.tm-grid { margin: 0 20px 18px; display: grid; grid-template-columns: 150px repeat(5, minmax(0, 1fr)); border: 1px solid #E3E7F0; background: #E3E7F0; gap: 1px; }
.tm-cell { background: #fff; min-height: 62px; padding: 6px; min-width: 0; }
.tm-head { text-align: center; padding: 8px 4px; min-height: 0; } .tm-head small { display: block; font-size: 11px; color: #6B7A99; } .tm-head b { font-size: 16px; }
.tm-head.heute b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2A52BE; color: #fff; font-size: 14px; }
.tm-cell.heute { background: #F3F7FF; }
.tm-user { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tm-user i { width: 28px; height: 28px; border-radius: 50%; background: var(--f); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.tm-appt { border-left: 3px solid var(--g); background: color-mix(in srgb, var(--g) 14%, #fff); border-radius: 4px; padding: 4px 6px; font-size: 11px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-appt b { font-weight: 700; margin-right: 4px; }
.tm-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 540px; background: #fff; border-radius: 0; box-shadow: 0 30px 60px -20px rgba(20, 40, 92, .45); padding: 16px 20px 14px; display: grid; gap: 12px; }
.tm-dialog .vk-feld b { white-space: normal; }
.tm-avatare { display: flex; gap: 6px; } .tm-avatare i { width: 28px; height: 28px; border-radius: 50%; background: var(--f); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tm-dialog .ab-aktionen { margin-top: 2px; }
.mock-phone.mock-tmh { grid-template-rows: auto auto auto 1fr; background: #fff; }
.tm-h-titel { padding: 8px 20px 6px; font-size: 16px; font-weight: 700; }
.tm-h-karten { display: flex; gap: 12px; padding: 4px 0 8px 20px; overflow: hidden; }
.tm-h-karte { flex: 0 0 210px; border: 1px solid #E3E7F0; border-radius: 14px; padding: 14px 14px 14px 18px; position: relative; overflow: hidden; background: color-mix(in srgb, var(--g) 8%, #fff); }
.tm-h-karte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--g); }
.tm-h-karte b { display: block; font-size: 15px; margin-bottom: 6px; } .tm-h-karte small { color: #4B5A78; font-size: 12.5px; }
.tm-todo { display: grid; gap: 10px; }
.tm-todo-kopf { display: flex; justify-content: space-between; align-items: center; } .tm-todo-kopf b { font-size: 18px; }
.tm-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #E8EEFF; color: #2A52BE; }
.tm-todo-text { font-size: 13px; color: #4B5A78; border: 1px solid #C7D2EA; padding: 10px 12px; min-height: 54px; }
.tm-todo-zeile { display: flex; align-items: center; gap: 10px; font-size: 13px; } .tm-todo-zeile small { color: #6B7A99; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; width: 110px; }
.tm-tabs { display: flex; gap: 14px; border-bottom: 1px solid #E3E7F0; } .tm-tabs span { padding: 6px 2px; font-size: 12px; font-weight: 600; color: #6B7A99; text-transform: uppercase; letter-spacing: .04em; display: flex; gap: 6px; align-items: center; }
.tm-tabs em { font-style: normal; background: #E8EEFF; color: #2A52BE; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.tm-tabs span.aktiv { color: #2A52BE; border-bottom: 2px solid #2A52BE; }
.tm-kommentar { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; } .tm-kommentar i { width: 26px; height: 26px; border-radius: 50%; background: var(--f); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.tm-kommentar b { display: block; font-size: 12px; } .tm-kommentar span { color: #4B5A78; }
.tm-plus { color: #2A52BE; font-weight: 700; font-size: 12.5px; }
.mock-desk.mock-chat { grid-template-columns: 230px 1fr; background: #fff; }
.mock-chat aside.ch-seite { background: #fff; color: #14285C; padding: 0; gap: 0; font-size: inherit; border-right: 1px solid #E3E7F0; display: grid; grid-template-rows: auto 1fr; align-content: stretch; } /* nicht die Navy-Seitenleiste des Dashboards */
.mock-chat aside span { padding: 0; border-radius: 0; }
.ch-seite-kopf { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px; font-weight: 700; font-size: 15px; border-bottom: 1px solid #E3E7F0; }
.ch-seite-kopf span { display: flex; gap: 6px; } .ch-seite-kopf i { width: 24px; height: 24px; border-radius: 50%; background: #F0F3FA; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #14285C; }
.ch-liste { display: grid; align-content: start; }
.ch-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #F0F3FA; }
.ch-item.aktiv { background: #F3F7FF; }
.ch-item i { width: 34px; height: 34px; border-radius: 50%; background: var(--f, #FB8C00); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.ch-item b { display: block; font-size: 13px; } .ch-item small { display: block; color: #6B7A99; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-item em { font-style: normal; background: #C10015; color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; padding: 0 6px; }
.ch-konv { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.ch-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #E3E7F0; }
.ch-kopf i { width: 32px; height: 32px; border-radius: 50%; background: #FB8C00; color: #fff; font-style: normal; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ch-kopf b { display: block; font-size: 15px; } .ch-kopf small { color: #6B7A99; font-size: 12px; }
.ch-msgs { padding: 14px 18px; display: grid; gap: 10px; align-content: start; overflow: hidden; }
.ch-row { display: flex; gap: 8px; align-items: flex-end; } .ch-row.mine { justify-content: flex-end; }
.ch-row > i { width: 28px; height: 28px; border-radius: 50%; background: var(--f); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.ch-msg { max-width: 72%; background: #F0F3FA; border-radius: 12px; padding: 8px 12px; font-size: 13px; }
.ch-row.mine .ch-msg { background: #2A52BE; color: #fff; }
.ch-meta { display: flex; gap: 8px; font-size: 11px; margin-bottom: 3px; } .ch-meta b { font-weight: 700; } .ch-meta span { opacity: .7; }
.ch-quote { border-left: 3px solid #2A52BE; background: rgba(42, 82, 190, .08); padding: 4px 8px; border-radius: 4px; font-size: 11.5px; margin-bottom: 6px; } .ch-quote b { display: block; font-size: 11px; color: #2A52BE; }
.ch-msg .mention { font-weight: 700; color: #2A52BE; } .ch-row.mine .ch-msg .mention { color: #fff; text-decoration: underline; }
.ch-msg .task { font-weight: 700; color: #E83FAA; } .ch-row.mine .ch-msg .task { color: #FFD6EA; }
.ch-reaktion { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; background: #fff; border: 1px solid #E3E7F0; border-radius: 999px; padding: 2px 8px; }
.ch-eingabe { display: flex; gap: 10px; align-items: center; padding: 12px 18px 14px; border-top: 1px solid #E3E7F0; }
.ch-eingabe span { flex: 1; border: 1px solid #C7D2EA; padding: 10px 12px; font-size: 12.5px; color: #9AA5BC; }
.ch-eingabe i { width: 38px; height: 38px; background: #2A52BE; color: #fff; display: grid; place-items: center; font-style: normal; }
/* Fahrtenbuch (Projektseite, 14.09.) nach infinia MileageApp (Fahrzeugleiste, Formular, „Letzte Fahrten“) und
   MileagereportModule (Filter, EXCEL/PDF); Folie 2 = geplanter QR-Aufkleber im Auto (Thomas baut das bald ein) */
.mock-phone.mock-fb { grid-template-rows: auto auto 1fr; background: #fff; }
.fb-nav { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 20px; background: #F0F3FA; }
.fb-nav i { font-style: normal; font-size: 22px; color: #6B7A99; }
.fb-nav div { text-align: center; } .fb-nav b { display: block; font-size: 18px; color: #2A52BE; } .fb-nav small { color: #6B7A99; font-size: 12.5px; }
.fb-form { padding: 18px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; align-content: start; }
.fb-form .vk-feld { grid-column: span 1; } .fb-form .vk-feld.breit { grid-column: span 2; } .fb-form .vk-feld b { font-size: 14px; }
.fb-form .vk-feld.grau { background: #F6F7FB; } .fb-form .vk-feld.grau b { color: #6B7A99; }
.fb-form .vk-feld b em { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #E8EEFF; color: #2A52BE; }
.fb-liste { padding: 12px 16px; display: grid; gap: 8px; align-content: start; }
.fb-liste > b { font-size: 14px; color: #2A52BE; margin-bottom: 2px; }
.fb-fahrt { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid #E3E7F0; border-radius: 10px; font-size: 13px; }
.fb-fahrt small { color: #6B7A99; font-size: 11.5px; grid-column: 1 / -1; }
.fb-fahrt b { font-weight: 600; } .fb-fahrt em { font-style: normal; font-weight: 700; color: #14285C; font-variant-numeric: tabular-nums; }
.fb-sticker { background: #fff; border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; width: 230px; }
.fb-sticker .qr { width: 64px; height: 64px; fill: #111; } .fb-sticker b { display: block; font-size: 13px; } .fb-sticker small { color: #6B7A99; font-size: 11px; }
.fb-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0; padding: 18px 20px 26px; box-shadow: 0 -12px 30px rgba(0, 0, 0, .35); display: grid; gap: 4px; z-index: 3; }
.fb-sheet::before { content: ""; width: 44px; height: 4px; border-radius: 999px; background: #C7D2EA; margin: 0 auto 10px; }
.fb-sheet b { font-size: 16px; color: #2A52BE; } .fb-sheet small { color: #6B7A99; font-size: 12.5px; }
.mock-phone.lg-scan.mock-fbqr { position: relative; }
.mock-desk.mock-fbr { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; background: #fff; }
.fb-r-kopf { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 6px; } .fb-r-kopf b { font-size: 20px; }
.fb-r-filter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 8px 22px; }
.fb-r-filter .vk-feld { grid-column: auto; }
.fb-r-body { padding: 6px 22px 18px; display: grid; gap: 10px; align-content: start; }
.mock table.fb-tabelle { border-radius: 0; font-size: 12px; border: 1px solid #E3E7F0; } .fb-tabelle th { padding: 7px 10px; } .fb-tabelle td { padding: 8px 10px; }
.fb-tabelle .r { text-align: right; font-variant-numeric: tabular-nums; } .fb-tabelle .summe td { font-weight: 700; background: #F3F4F6; }
/* Persönlicher Assistent (Projektseite, 14.09.): sieben Chat-Beispiele als ruhende Kira-Chats (keine Blasen-Animation),
   dazu Sprachnachricht- und Foto-Blasen */
.kc-still .kc-verlauf p { animation: none !important; opacity: 1; }
.kc-still .kc-verlauf { gap: 12px; padding-top: 22px; }
.kc-sprache { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.kc-sprache i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-style: normal; font-size: 12px; flex: 0 0 auto; }
.kc-sprache span { display: flex; align-items: center; gap: 2px; height: 22px; flex: 1; }
.kc-sprache span b { width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .85); height: var(--h); }
.kc-sprache small { font-size: 11px; opacity: .85; }
.kc-foto { padding: 6px !important; max-width: 62% !important; }
.kc-foto .beleg { background: #fff; border-radius: 10px; padding: 10px 12px; color: #14285C; display: grid; gap: 4px; font-size: 11px; }
.kc-foto .beleg b { font-size: 13px; } .kc-foto .beleg i { display: block; height: 6px; border-radius: 3px; background: #E3E7F0; font-style: normal; } .kc-foto .beleg i.kurz { width: 60%; }
.kc-foto .beleg em { font-style: normal; font-weight: 700; display: flex; justify-content: space-between; border-top: 1px dashed #C7D2EA; padding-top: 4px; margin-top: 2px; }
/* Eingangsrechnungen (Projektseite, 15.09.): Foto an den Assistenten, Belegadresse per Mail, Ordner mit Dateien, Weitergabe
   an den Steuerberater — je Folie ein Element (Thomas' Vorgaben) */
.kc-foto .rechnung { background: #fff; border-radius: 10px; padding: 10px 12px; color: #14285C; display: grid; gap: 4px; font-size: 11px; }
.kc-foto .rechnung b { font-size: 12px; } .kc-foto .rechnung i { display: block; height: 5px; border-radius: 3px; background: #E3E7F0; font-style: normal; } .kc-foto .rechnung i.kurz { width: 55%; }
.kc-foto .rechnung em { font-style: normal; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed #C7D2EA; padding-top: 4px; margin-top: 2px; white-space: nowrap; }
.kc-still .kc-foto { max-width: 74% !important; }
.mock-desk.mock-er { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: #fff; }
.er-adresse { display: flex; align-items: center; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid #E3E7F0; }
.er-adresse i { width: 40px; height: 40px; border-radius: 10px; background: #E8EEFF; color: #2A52BE; display: grid; place-items: center; font-style: normal; }
.er-adresse i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.er-adresse b { display: block; font-size: 17px; } .er-adresse small { color: #6B7A99; font-size: 12.5px; }
.er-mails { display: grid; align-content: start; }
.er-mail { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 22px; border-bottom: 1px solid #F0F3FA; }
.er-mail i { width: 34px; height: 34px; border-radius: 50%; background: var(--f, #6B7A99); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.er-mail b { display: block; font-size: 13.5px; } .er-mail small { display: block; color: #6B7A99; font-size: 12px; }
.er-mail em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #DFF5E6; color: #15803D; white-space: nowrap; }
.er-mail em::before { content: "✓ "; }
.mock-desk.mock-ordner { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; background: #fff; }
.od-titel { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #F0F3FA; border-bottom: 1px solid #E3E7F0; }
.od-titel span { display: flex; gap: 6px; } .od-titel span i { width: 12px; height: 12px; border-radius: 50%; font-style: normal; }
.od-titel span i:nth-child(1) { background: #FF5F57; } .od-titel span i:nth-child(2) { background: #FEBC2E; } .od-titel span i:nth-child(3) { background: #28C840; }
.od-pfad { flex: 1; background: #fff; border: 1px solid #C7D2EA; padding: 6px 10px; font-size: 13px; font-family: ui-monospace, Menlo, monospace; color: #14285C; }
.od-kopf { display: grid; grid-template-columns: 1fr 120px 90px; gap: 10px; padding: 8px 22px; font-size: 11.5px; color: #6B7A99; border-bottom: 1px solid #E3E7F0; }
.od-liste { display: grid; align-content: start; padding: 4px 0; }
.od-datei { display: grid; grid-template-columns: 1fr 120px 90px; gap: 10px; align-items: center; padding: 8px 22px; font-size: 13px; }
.od-datei:nth-child(even) { background: #FAFBFE; }
.od-datei > span:first-child { display: flex; align-items: center; gap: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.od-datei i { width: 26px; height: 32px; border-radius: 4px; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.od-datei i.pdf { background: #E53935; } .od-datei i.jpg { background: #2A52BE; } .od-datei i.xlsx { background: #21BA45; }
.od-datei small { color: #6B7A99; font-size: 12px; }
.mock-desk.mock-stb { grid-template-columns: 1fr; place-items: center; background: #F6F7FB; }
.stb-karte { width: 560px; background: #fff; border-radius: 16px; box-shadow: 0 20px 44px -26px rgba(20, 40, 92, .4); padding: 22px 24px; display: grid; gap: 14px; }
.stb-karte > b { font-size: 18px; }
.stb-zeile { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; font-size: 14px; }
.stb-zeile small { color: #6B7A99; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.stb-zeile em { font-style: normal; font-weight: 600; }
.stb-anhang { display: flex; gap: 8px; flex-wrap: wrap; }
.stb-anhang span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border: 1px solid #E3E7F0; border-radius: 8px; }
.stb-anhang i { width: 18px; height: 22px; border-radius: 3px; font-style: normal; font-size: 7px; font-weight: 800; color: #fff; display: grid; place-items: center; }
.stb-anhang i.zip { background: #6B7A99; } .stb-anhang i.xlsx { background: #21BA45; }
.stb-oder { font-size: 12.5px; color: #6B7A99; border-top: 1px dashed #E3E7F0; padding-top: 12px; }
/* Produktfotos als eigener Service (15.09., Thomas): gemeinsamer Bildstandard, Vorher/Nachher, einheitlicher Shop, Ablauf.
   Platzhalter, bis Thomas echte Fotos liefert */
.mock-desk.mock-pf { grid-template-columns: 1fr; place-items: center; background: #F6F7FB; }
.pf-standard { display: grid; grid-template-columns: 1fr 250px; gap: 26px; width: 700px; background: #fff; border-radius: 16px; box-shadow: 0 20px 44px -26px rgba(20, 40, 92, .4); padding: 24px 26px; align-items: center; }
.pf-standard > div > b { display: block; font-size: 18px; margin-bottom: 12px; }
.pf-regel { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #E3E7F0; font-size: 13.5px; }
.pf-regel small { color: #6B7A99; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; align-self: center; }
.pf-regel:last-child { border-bottom: 0; }
.pf-vorschau { aspect-ratio: 1; background: linear-gradient(160deg, #E9DCCB 0%, #C9A883 55%, #9C7352 100%); border: 1px solid #E3E7F0; border-radius: 12px; position: relative; display: grid; place-items: center; overflow: hidden; } /* erdiger Braunverlauf hinter dem Shop-Foto (Thomas) */
.rahmen-browser .mock-pf .pf-foto { width: 74%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: center; margin-top: 5%; --tint: brightness(1); filter: var(--tint) drop-shadow(0 8px 10px rgba(60, 35, 15, .3)); } /* freigestellte Vase, Schatten leicht unter dem Produkt; Vorspann schlägt die allgemeine .rahmen-browser img-Regel (cover/top) */
/* Vorher/Nachher-Schieber: beide Bilder liegen übereinander, das Vorher-Bild wird bei --teil abgeschnitten (kobalt.js setzt --teil aus dem Regler) */
.pf-vn { width: 520px; height: 400px; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 20px 44px -26px rgba(20, 40, 92, .4); --teil: 50%; }
.pf-vn > div { position: absolute; inset: 0; display: grid; place-items: center; }
.pf-vn .vorher { background: #3B4658; clip-path: inset(0 calc(100% - var(--teil)) 0 0); }
.rahmen-browser .mock-pf .pf-roh { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; display: block; } /* absolut, sonst bleibt height:100% im Grid unbestimmt und das Foto läuft über */
.pf-vn .nachher { background: linear-gradient(160deg, #E9DCCB 0%, #C9A883 55%, #9C7352 100%); }
.rahmen-browser .mock-pf .pf-vn .nachher .pf-foto { width: 62%; margin-top: 6%; }
.pf-regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; z-index: 2; }
.pf-vn:has(.pf-regler:focus-visible) .pf-griff::after { outline: 3px solid var(--kobalt); outline-offset: 2px; }
.pf-etikett { position: absolute; top: 14px; left: 14px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #14285C; }
.pf-etikett.rechts { left: auto; right: 14px; }
.pf-griff { position: absolute; left: var(--teil); top: 0; bottom: 0; width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(20, 40, 92, .15); }
.pf-griff::after { content: "‹ ›"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #14285C; font-weight: 800; font-size: 16px; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(20, 40, 92, .3); letter-spacing: -.05em; }
.pf-shop { display: flex; gap: 16px; } .pf-kachel { width: 150px; flex: none; }
/* Social-Media-Beiträge (Projektseite ki-social-media): Beitrags-Cover in der CI von pfeifersfenster (Dunkelbraun #271d13, Amber #d99a3e, Creme #efe7d8, Michroma), Werkzeug-Panels in Kobalt */
.mock-desk.mock-sm { grid-template-columns: 1fr; place-items: center; background: #F6F7FB; }
.sm-cover { width: 236px; aspect-ratio: 4 / 5; flex: none; background: #271d13; color: #efe7d8; position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 14px 30px -18px rgba(39, 29, 19, .6); }
.rahmen-browser .mock-sm img.sm-cover { width: 236px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; display: block; }
.sm-cover::after { content: ""; position: absolute; inset: 0; background: url("pf-icon-hell.png") 0 0 / 40px repeat; opacity: .05; pointer-events: none; }
.rahmen-browser .mock-sm img.sm-foto { position: absolute; left: 0; top: 0; width: 100%; height: 56%; aspect-ratio: auto; object-fit: cover; object-position: center; display: block; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.mock-sm .sm-text em { background: none; padding: 0; border-radius: 0; font: inherit; font-style: normal; color: #d99a3e; } /* gegen die Pillen-Optik der allgemeinen em-Regel in Mocks */
.rahmen-browser .mock-sm .sm-logo { position: absolute; top: 12px; left: 12px; width: 78px; height: auto; aspect-ratio: auto; object-fit: contain; }
.sm-tag { position: absolute; top: 15px; right: 12px; font: 400 6.5px/1 Michroma, sans-serif; letter-spacing: .22em; color: #efe7d8; }
.sm-text { position: absolute; left: 14px; right: 14px; bottom: 34px; }
.sm-nurtext .sm-text { bottom: auto; top: 50%; transform: translateY(-50%); }
.sm-text small { display: block; font: 400 6.5px/1 Michroma, sans-serif; letter-spacing: .22em; color: #d99a3e; margin-bottom: 9px; padding-left: 26px; position: relative; }
.sm-text small::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 2px; background: #d99a3e; }
.sm-text b { display: block; font: 400 19px/1.1 Michroma, sans-serif; letter-spacing: -.01em; } .sm-text em { font-style: normal; color: #d99a3e; }
.sm-text p { margin: 7px 0 0; font-size: 8.5px; line-height: 1.45; color: rgba(239, 231, 216, .85); }
.sm-fuss { position: absolute; left: 14px; right: 14px; bottom: 11px; display: flex; justify-content: space-between; font-size: 7px; color: rgba(239, 231, 216, .7); }
.sm-tool { width: 720px; background: #fff; border-radius: 14px; box-shadow: 0 20px 44px -26px rgba(20, 40, 92, .4); overflow: hidden; color: #1E2A5A; font-size: 13px; }
.sm-tool > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #EEF1F7; }
.sm-tool > header b { display: block; font-size: 16px; } .sm-tool > header small { color: #6B7A99; font-size: 12px; }
.sm-chip { background: #EEF3FF; color: var(--kobalt); font-weight: 700; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .sm-chip.gruen { background: #E6F7EE; color: #15803D; }
.sm-liste { padding: 4px 22px; }
.sm-thema { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F0F3FA; } .sm-thema:last-child { border-bottom: 0; }
.sm-thema i, .sm-hookzeile i { width: 18px; height: 18px; border: 2px solid #C7CEDD; border-radius: 5px; position: relative; }
.sm-thema.aktiv i, .sm-hookzeile.aktiv i { background: var(--kobalt); border-color: var(--kobalt); }
.sm-thema.aktiv i::after, .sm-hookzeile.aktiv i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sm-thema b { font-weight: 600; } .sm-thema span { font-size: 11px; color: #6B7A99; background: #F4F6FB; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.sm-tool > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 22px; border-top: 1px solid #EEF1F7; color: #6B7A99; font-size: 12px; }
.sm-knopf { background: var(--kobalt); color: #fff; font-weight: 700; padding: 8px 14px; border-radius: 9px; font-size: 12.5px; white-space: nowrap; } .sm-knopf.rand { background: #fff; color: var(--kobalt); border: 1.5px solid var(--kobalt); margin-left: auto; }
.sm-hook { display: flex; gap: 26px; align-items: center; } .sm-hookliste { width: 450px; }
.sm-hookzeile { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #F0F3FA; } .sm-hookzeile:last-child { border-bottom: 0; }
.sm-hookzeile b { display: block; font-weight: 600; font-size: 13.5px; } .sm-hookzeile small { color: #6B7A99; font-size: 11px; } .sm-hookzeile.aktiv b { color: var(--kobalt); }
.mock-phone.mock-ig { grid-template-rows: auto auto auto 1fr; background: #fff; color: #111; }
.ig-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px; } .ig-kopf i { width: 30px; height: 30px; border-radius: 50%; background: #271d13 url("pf-icon-hell.png") center / 42% no-repeat; } .ig-kopf b { font-weight: 600; } .ig-kopf span { margin-left: auto; letter-spacing: .1em; font-weight: 700; }
.rahmen-phone .mock-ig .ig-bild { width: 372px; height: 300px; aspect-ratio: auto; object-fit: cover; object-position: top; display: block; }
.ig-aktionen { display: flex; gap: 14px; padding: 10px 14px; } .ig-aktionen svg { width: 24px; height: 24px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .ig-aktionen svg.rechts { margin-left: auto; }
.ig-text { margin: 0; padding: 0 14px 12px; font-size: 13px; line-height: 1.4; } .ig-text b { font-weight: 600; } .ig-tags { display: block; color: #00376B; margin-top: 4px; }
.sm-ci { display: grid; gap: 14px; justify-items: center; } .sm-reihe { display: flex; gap: 20px; }
.sm-ci-leiste { display: flex; align-items: center; gap: 18px; background: #271d13; color: #efe7d8; border-radius: 999px; padding: 8px 18px; font-size: 11px; }
.sm-ci-leiste span { display: flex; align-items: center; gap: 6px; } .sm-ci-leiste i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(239, 231, 216, .4); } .sm-schrift { font-family: Michroma, sans-serif; font-size: 9px; letter-spacing: .1em; }
.rahmen-browser .mock-sm .sm-ci-logo { width: 96px; height: auto; aspect-ratio: auto; object-fit: contain; }
.sm-paket .sm-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; padding: 12px 22px; }
.sm-kachel { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid #EEF1F7; border-radius: 10px; padding: 8px; }
.sm-kachel .sm-cover { zoom: .34; } .sm-kachel b { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; } .sm-kachel small { color: #6B7A99; font-size: 10px; }
.sm-haken { width: 16px; height: 16px; border-radius: 50%; background: #15803D; position: relative; } .sm-haken::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sm-legende { display: flex; gap: 12px; align-items: center; font-size: 11px; color: #6B7A99; white-space: nowrap; } .sm-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; } .sm-legende i.war { background: #15803D; } .sm-legende i.plan { border: 2px solid var(--kobalt); }
.sm-wochentage, .sm-kalender { display: grid; grid-template-columns: repeat(7, 1fr); }
.sm-wochentage { padding: 8px 22px 0; font-size: 10.5px; color: #6B7A99; text-align: center; }
.sm-kalender { padding: 4px 22px 14px; gap: 4px; }
.sm-kalender > span { min-height: 60px; border: 1px solid #F0F3FA; border-radius: 8px; padding: 4px 6px; font-size: 10.5px; } .sm-kalender > span.leer { border-color: transparent; } .sm-kalender > span.heute em { background: var(--kobalt); color: #fff; }
.sm-kalender em { font-style: normal; font-weight: 600; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; background: none; padding: 0; }
.sm-termin { display: flex; align-items: center; gap: 5px; margin-top: 3px; padding: 3px 4px; border-radius: 6px; font-size: 9px; color: #1E2A5A; border: 1.5px solid var(--kobalt); background: #EEF3FF; }
.sm-termin.war { border-color: #DDEFE3; background: #F1FAF4; color: #15803D; } .sm-termin.heute { background: var(--kobalt); border-color: var(--kobalt); color: #fff; }
.rahmen-browser .mock-sm .sm-mini { width: 18px; height: 22px; border-radius: 3px; background: #271d13; flex: none; display: block; aspect-ratio: auto; object-fit: cover; object-position: top; }
/* Unterstützung für Neugründer: Startplan (Blatt) + Erstgespräch (Desk) */
.mock-blatt.mock-sp { padding: 44px 56px 0; color: #1E2A5A; }
.sp-kopf { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--kobalt); padding-bottom: 14px; margin-bottom: 18px; }
.sp-kopf b { display: block; font-family: var(--font-d); font-size: 26px; } .sp-kopf span { color: #6B7A99; font-size: 12px; }
.sp-logo { width: 34px; height: 34px; background: var(--kobalt); -webkit-mask: url("logo-t.png") center / contain no-repeat; mask: url("logo-t.png") center / contain no-repeat; }
.sp-block { margin-bottom: 16px; } .sp-block h5 { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--kobalt); }
.sp-zeile { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #EEF1F7; font-size: 13px; }
.sp-zeile i { width: 14px; height: 14px; border: 2px solid #C7CEDD; border-radius: 4px; position: relative; } .sp-zeile i.fertig { background: #15803D; border-color: #15803D; }
.sp-zeile i.fertig::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sp-zeile em, .gf-kachel em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #F4F6FB; color: #6B7A99; }
.sp-zeile em.fertig { background: #E6F7EE; color: #15803D; } .sp-zeile em.jetzt, .gf-kachel em.jetzt { background: #EEF3FF; color: var(--kobalt); }
.sp-fuss { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; padding-top: 12px; border-top: 1px solid #EEF1F7; font-size: 10.5px; color: #6B7A99; }
.mock-desk.mock-gf { grid-template-columns: 1fr; place-items: center; background: #F6F7FB; }
.gf-innen { width: 720px; } .gf-innen > header { margin-bottom: 14px; } .gf-innen > header b { display: block; font-size: 18px; color: #1E2A5A; } .gf-innen > header small { color: #6B7A99; font-size: 12.5px; }
.gf-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gf-kachel { background: #fff; border-radius: 12px; padding: 14px 16px 12px; box-shadow: 0 12px 30px -22px rgba(20, 40, 92, .4); display: grid; gap: 6px; align-content: start; min-height: 128px; }
.gf-kachel b { font-size: 14px; color: #1E2A5A; } .gf-kachel p { margin: 0; font-size: 12px; line-height: 1.45; color: #4B5563; } .gf-kachel em { justify-self: start; margin-top: auto; }
/* Deine eigene, private Cloud (Nextcloud-Basis): Dateien, Freigabe-Link, Handy */
.mock-desk.mock-nc { background: #fff; color: #222; font-size: 13px; }
.nc-seite { background: #0082C9; color: #fff; padding: 18px 14px; display: grid; align-content: start; gap: 4px; }
.nc-logo { font-size: 14px; margin-bottom: 14px; } .nc-seite span { padding: 7px 10px; border-radius: 8px; font-size: 13px; opacity: .85; } .nc-seite span.aktiv { background: rgba(255, 255, 255, .18); opacity: 1; font-weight: 600; }
.mock-nc main { padding: 16px 22px; position: relative; }
.mock-nc .nc-kopf { display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin-bottom: 12px; color: #555; } .nc-kopf b { color: #222; } .nc-kopf em { font-style: normal; color: #999; } .nc-neu { margin-left: auto; border: 1px solid #0082C9; color: #0082C9; border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: 12px; }
.nc-zeile { display: grid; grid-template-columns: 30px 1fr 72px 70px 110px; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid #EEE; font-size: 12.5px; color: #555; } .nc-zeile b { color: #222; font-weight: 500; } .nc-zeile.nc-titel { color: #999; font-size: 11px; } .nc-zeile.nc-titel b { color: #999; font-weight: 500; }
.nc-icon { width: 22px; height: 18px; border-radius: 3px; background: #2B579A; display: block; } .nc-icon.ordner { background: #0082C9; position: relative; border-radius: 2px 3px 3px 3px; } .nc-icon.ordner::before { content: ""; position: absolute; left: 0; top: -4px; width: 10px; height: 5px; background: #0082C9; border-radius: 2px 2px 0 0; } .nc-icon.pdf { background: #D93025; } .nc-icon.bild { background: #0F9D58; }
.nc-teil { font-size: 11px; color: #0082C9; }
.nc-dimm { opacity: .35; }
.nc-dialog { position: absolute; right: 22px; top: 52px; width: 300px; box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .35); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.nc-dialog > b { font-size: 14px; }
.nc-link { display: flex; align-items: center; gap: 8px; min-width: 0; background: #F5F7FA; border-radius: 8px; padding: 8px 10px; font-size: 11.5px; color: #555; } .nc-link span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nc-link em { font-style: normal; color: #fff; background: #0082C9; border-radius: 999px; padding: 4px 10px; font-weight: 600; font-size: 11px; white-space: nowrap; }
.mock-nc .nc-opt { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; min-width: 0; } .mock-nc .nc-opt i { flex: none; margin: 0; width: 34px; height: 18px; border-radius: 999px; background: #CBD5E1; position: relative; } .nc-opt i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; } .nc-opt i.an { background: #0082C9; } .nc-opt i.an::after { left: 18px; }
.mock-phone.mock-nch { grid-template-rows: auto auto 1fr auto; background: #fff; color: #222; }
.nch-kopf { background: #0082C9; color: #fff; padding: 16px 16px 12px; } .nch-kopf b { display: block; font-size: 18px; } .nch-kopf span { font-size: 12px; opacity: .85; }
.nch-hinweis { display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 8px 10px; background: #E8F3FA; color: #0B5C8E; border-radius: 8px; font-size: 12px; } .nch-hinweis i { width: 8px; height: 8px; border-radius: 50%; background: #0082C9; }
.nch-liste { padding: 6px 14px; overflow: hidden; } .nch-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #EEE; } .nch-zeile b { display: block; font-size: 14px; font-weight: 500; } .nch-zeile small { color: #777; font-size: 11.5px; } .nch-zeile .nc-icon { width: 28px; height: 23px; }
.nch-nav { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #EEE; padding: 10px 0 14px; text-align: center; font-size: 11px; color: #777; } .nch-nav .aktiv { color: #0082C9; font-weight: 700; }
.nc-zeile.nc-b { grid-template-columns: 34px 1fr 90px 110px; } .nc-avatar { width: 26px; height: 26px; border-radius: 50%; background: #0082C9; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.nc-hinweis { margin: 14px 6px 0; font-size: 12px; color: #555; }
/* Desktop-Client: Explorer-artiges Fenster mit Sync-Status */
.mock-desk.mock-ex { grid-template-columns: 190px 1fr; background: #fff; color: #222; font-size: 12.5px; }
.mock-desk.mock-ex aside.ex-seite { background: #F3F5F9; color: #222; border-right: 1px solid #E5E8EF; padding: 14px 10px; display: grid; align-content: start; gap: 2px; } /* Vorspann gegen die dunkle Standard-aside der Mocks */
.mock-desk.mock-ex .ex-seite span { color: #222; font-size: 12.5px; background: none; }
.mock-ex .ex-kopf { justify-content: flex-start; }
.ex-seite small { font-size: 10.5px; color: #888; padding: 6px 8px 2px; letter-spacing: .04em; } .ex-seite small.ex-cloud { margin-top: 10px; color: #0082C9; font-weight: 700; }
.ex-seite span { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; } .ex-seite span.lauft .ex-ordner::after { background: #0082C9; }
.ex-ordner { width: 18px; height: 14px; border-radius: 2px 3px 3px 3px; background: #F2C14E; position: relative; flex: none; display: block; } .ex-ordner::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 4px; background: #F2C14E; border-radius: 2px 2px 0 0; }
.ex-ordner::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; background: #15803D; border: 1.5px solid #fff; } .ex-ordner.lauft::after { background: #0082C9; }
.mock-ex main { padding: 14px 20px; position: relative; }
.ex-kopf { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #E5E8EF; border-radius: 6px; color: #444; margin-bottom: 12px; } .ex-kopf em { font-style: normal; color: #999; }
.ex-titel, .ex-zeile { display: grid; grid-template-columns: 28px 1fr 130px 80px; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid #F0F2F6; }
.ex-titel { color: #999; font-size: 11px; } .ex-zeile b { font-weight: 500; } .ex-zeile span { color: #666; font-size: 12px; }
.ex-status { font-size: 11px !important; } .ex-status.ok { color: #15803D !important; } .ex-status.lauft { color: #0082C9 !important; }
.ex-tray { position: absolute; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E5E8EF; border-radius: 10px; padding: 10px 14px; box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .3); }
.ex-tray i { width: 26px; height: 26px; border-radius: 50%; background: #15803D; position: relative; flex: none; } .ex-tray i::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ex-tray b { display: block; font-size: 12.5px; } .ex-tray small { color: #666; font-size: 11px; }
/* Produktseite eines Beispiel-Shops (Folie 1): weiß, warmes Braun als Shop-Akzent */
.ps-seite { width: 780px; min-height: 468px; background: #fff; color: #1F2937; font-size: 13px; } /* füllt den Browser-Rahmen wie eine echte Shop-Seite */
.ps-kopf { display: flex; align-items: center; gap: 24px; padding: 14px 40px; border-bottom: 1px solid #EEE9E2; }
.ps-kopf b { font-size: 15px; letter-spacing: .01em; } .ps-kopf nav { display: flex; gap: 18px; margin-left: auto; color: #6B7280; font-size: 12.5px; } .ps-korb { font-weight: 600; font-size: 12.5px; }
.ps-inhalt { display: grid; grid-template-columns: 300px 1fr; gap: 34px; padding: 22px 40px 24px; align-items: start; }
.ps-galerie .pf-vorschau { width: 300px; border: 0; }
.ps-minis { display: flex; gap: 8px; margin-top: 10px; }
.ps-minis span { width: 58px; height: 58px; border-radius: 8px; border: 2px solid transparent; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #E9DCCB 0%, #C9A883 55%, #9C7352 100%); }
.ps-minis span.aktiv { border-color: #5C3D2E; }
.rahmen-browser .mock-pf .ps-minis .pf-foto { width: 70%; margin-top: 3%; filter: drop-shadow(0 3px 4px rgba(60, 35, 15, .3)); }
.ps-info small { display: block; color: #6B7280; font-size: 11.5px; }
.ps-info h4 { font-family: var(--font-d); font-size: 22px; line-height: 1.15; margin: 4px 0 8px; }
.ps-preis { display: block; font-size: 18px; margin-bottom: 2px; }
.ps-info p { font-size: 12.5px; line-height: 1.5; color: #4B5563; margin: 14px 0 12px; }
.ps-varianten { display: flex; gap: 8px; margin: 6px 0 16px; } .ps-varianten span { padding: 5px 12px; border: 1px solid #D6D3CE; border-radius: 999px; font-size: 12px; } .ps-varianten span.aktiv { border-color: #5C3D2E; background: #5C3D2E; color: #fff; }
.ps-knopf { display: block; text-align: center; background: #5C3D2E; color: #fff; font-weight: 700; padding: 11px; border-radius: 10px; font-size: 13px; margin-bottom: 8px; }
.pf-kachel { background: #fff; border: 1px solid #E3E7F0; border-radius: 12px; overflow: hidden; }
.pf-kachel .pf-vorschau { border: 0; border-radius: 0; }
.pf-kachel div:last-child { padding: 10px 12px; font-size: 12.5px; } .pf-kachel b { display: block; font-size: 12.5px; } .pf-kachel small { color: #2A52BE; font-weight: 700; }
.pf-ablauf { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; width: 720px; }
.pf-schritt { background: #fff; border: 1px solid #E3E7F0; border-radius: 16px; padding: 20px 16px; display: grid; gap: 8px; justify-items: center; text-align: center; box-shadow: 0 14px 30px -22px rgba(20, 40, 92, .4); }
.pf-schritt i { width: 40px; height: 40px; border-radius: 50%; background: var(--kobalt); color: #fff; font-style: normal; font-weight: 800; display: grid; place-items: center; }
.pf-schritt b { font-size: 15px; } .pf-schritt small { color: #6B7A99; font-size: 12.5px; }
.pf-pfeil { font-size: 26px; color: #C7D2EA; }
.mock { font-family: var(--font-b); color: #14285C; line-height: 1.3; }
.mock-desk { width: 780px; height: 468px; zoom: .3333; display: grid; grid-template-columns: 170px 1fr; } /* 780 × 1/3 = 260 px = Innenbreite der Karte */
.mock-phone { width: 372px; height: 537px; zoom: .3333; display: grid; grid-template-rows: auto auto 1fr auto auto; background: #fff; } /* 372 × 1/3 = 124 px = Innenbreite des Handy-Rahmens */
.gross-rahmen .mock-desk { zoom: .6667; } .gross-rahmen .mock-phone { zoom: .5484; }
.mock aside { background: #14285C; color: #C7D2EA; padding: 20px 14px; display: grid; gap: 3px; align-content: start; font-size: 14px; }
.mock aside span { padding: 9px 12px; border-radius: 8px; }
.mock aside span.aktiv { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.mk-logo { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 800; font-size: 20px; margin-bottom: 18px; }
.mk-logo i { width: 24px; height: 24px; border-radius: 7px; background: url(infinia-icon.png) center / 100% no-repeat; }
.mock main { padding: 20px 22px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.mock header { display: flex; justify-content: space-between; align-items: center; }
.mock header b { font-size: 20px; font-weight: 700; }
.mock header small { color: #6B7A99; font-size: 13px; }
.mk-knopf { background: #E83FAA; color: #fff; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 8px; }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mk-kpis div { background: #fff; border: 1px solid #E3E7F0; border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.mk-kpis small { color: #6B7A99; font-size: 12px; }
.mk-kpis b { font-family: var(--font-d); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.mock table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #E3E7F0; border-radius: 12px; overflow: hidden; font-size: 13px; }
.mock th { text-align: left; color: #6B7A99; font-weight: 600; font-size: 11.5px; padding: 10px 12px; border-bottom: 1px solid #E3E7F0; background: #FAFBFE; }
.mock td { padding: 10px 12px; border-bottom: 1px solid #EEF1F6; }
.mock em, .mk-liste em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #EEF1F6; color: #4B5A78; }
.mock .c-blau { background: #E8EEFF; color: #2A52BE; } .mock .c-gruen { background: #DFF5E6; color: #15803D; } .mock .c-gelb { background: #FFF1D6; color: #B45309; } .mock .c-rot { background: #FDE2E2; color: #B91C1C; }
.mock footer { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; }
.mock footer small { color: #6B7A99; font-size: 12px; } .mock footer b { font-family: var(--font-d); font-size: 20px; font-weight: 800; }
.mk-chips { display: flex; gap: 8px; } .mk-chips span { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid #E3E7F0; color: #4B5A78; } .mk-chips span.aktiv { background: #14285C; color: #fff; border-color: #14285C; }
.mk-bar { background: #E83FAA; color: #fff; font-weight: 700; font-size: 18px; padding: 26px 22px 16px; }
.mk-zeit { text-align: center; padding: 24px 20px 10px; display: grid; gap: 6px; justify-items: center; }
.mk-zeit small, .mk-artikel small, .mk-bestand small { color: #6B7A99; font-size: 13px; }
.mk-zeit b { font-family: var(--font-d); font-size: 64px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-liste { list-style: none; padding: 8px 20px; display: grid; gap: 8px; align-content: start; }
.mk-liste li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; font-size: 15px; padding: 11px 12px; background: #F6F7FB; border-radius: 10px; }
.mk-liste span { color: #6B7A99; font-size: 13px; font-variant-numeric: tabular-nums; }
.mk-liste .leer { background: transparent; color: #9AA5BC; }
.mk-knoepfe { display: flex; gap: 10px; padding: 8px 20px 16px; }
.mk-knoepfe i { flex: 1; text-align: center; font-style: normal; font-weight: 700; font-size: 15px; padding: 13px; border-radius: 10px; border: 1.5px solid #14285C; color: #14285C; }
.mk-knoepfe .voll { background: #14285C; color: #fff; }
.mk-nav { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #E3E7F0; padding: 12px 6px 16px; font-size: 11.5px; color: #6B7A99; text-align: center; }
.mk-nav .aktiv { color: #E83FAA; font-weight: 700; }
.mk-artikel { padding: 20px 20px 6px; display: grid; gap: 4px; }
.mk-artikel > b { font-size: 19px; font-weight: 700; }
.mk-bestand { margin-top: 12px; background: #F6F7FB; border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; }
.mk-bestand b { font-family: var(--font-d); font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: #E83FAA; line-height: 1.1; }
.mk-artikel .mk-knoepfe { padding: 12px 0 0; }

/* ---------- Gebaute Illustrationen (infinia): ein Element je Funktion, Akzent über --akzent ---------- */
.illu { position: relative; width: 250px; height: 170px; display: grid; place-items: center; font-family: var(--font-b); color: var(--tinte); }
.schau-bild:has(.illu) { place-items: center; padding: 20px; }
.gross-rahmen:has(.illu) { padding: 40px 30px !important; place-items: center !important; }
.gross-rahmen .illu { zoom: 1.5; }
.illu i, .illu b, .illu em, .illu u, .illu s { font-style: normal; text-decoration: none; }
/* App: Handy mit vier Modul-Kacheln, die hineinfliegen */
.illu-phone { width: 128px; height: 164px; border: 3px solid var(--tinte); border-radius: 22px; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 10px; align-content: center; overflow: hidden; }
.illu-phone i { display: grid; place-items: center; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--akzent) 14%, #fff); color: var(--akzent); font-size: 8px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; animation: kachel-rein 6s ease-in-out infinite; }
.illu-phone i:nth-child(2) { animation-delay: .15s; } .illu-phone i:nth-child(3) { animation-delay: .3s; } .illu-phone i:nth-child(4) { animation-delay: .45s; }
@keyframes kachel-rein { 0% { transform: translate(var(--dx), var(--dy)); opacity: 0; } 18% { transform: none; opacity: 1; } 85% { transform: none; opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
/* Terminal: Uhrzeit läuft, Kommen-Knopf wird gedrückt */
.illu-term { width: 190px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 14px; background: #fff; display: grid; gap: 6px; text-align: center; }
.illu-term b { font-family: var(--font-d); font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--tinte); font-variant-numeric: tabular-nums; }
.illu-term span { font-size: 11px; color: var(--grau); }
.illu-knoepfe { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.illu-knoepfe i { padding: 7px 14px; border-radius: 8px; font-size: 11px; font-weight: 700; border: 1px solid var(--linie); color: var(--tinte-weich); }
.illu-knoepfe .kommen { background: var(--akzent); border-color: var(--akzent); color: #fff; animation: druck 4s ease-in-out infinite; }
@keyframes druck { 0%, 40%, 60%, 100% { transform: none; } 50% { transform: scale(.92); } }
/* Belege: Angebot → Auftrag → Rechnung, Zeilen füllen sich, Haken am Ende */
.illu-belege { display: flex; align-items: center; gap: 6px; }
.illu-belege .doc { position: relative; width: 62px; height: 84px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; padding: 8px 7px; display: grid; gap: 5px; align-content: start; }
.illu-belege .doc b { font-size: 8.5px; font-weight: 700; color: var(--tinte); }
.illu-belege .doc span { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--akzent) 35%, #fff); width: 0; animation: zeile 7s ease-out infinite; }
.illu-belege .doc:nth-child(1) span:nth-of-type(1) { animation-delay: .2s; } .illu-belege .doc:nth-child(1) span:nth-of-type(2) { animation-delay: .5s; } .illu-belege .doc:nth-child(1) span:nth-of-type(3) { animation-delay: .8s; }
.illu-belege .doc:nth-child(3) span:nth-of-type(1) { animation-delay: 1.6s; } .illu-belege .doc:nth-child(3) span:nth-of-type(2) { animation-delay: 1.9s; } .illu-belege .doc:nth-child(3) span:nth-of-type(3) { animation-delay: 2.2s; }
.illu-belege .doc:nth-child(5) span:nth-of-type(1) { animation-delay: 3s; } .illu-belege .doc:nth-child(5) span:nth-of-type(2) { animation-delay: 3.3s; }
@keyframes zeile { 0% { width: 0; } 6% { width: 100%; } 90% { width: 100%; } 100% { width: 0; } }
.illu-belege em { color: var(--akzent); font-weight: 700; font-size: 14px; }
.illu-belege u { margin-top: auto; font-size: 8px; font-weight: 700; color: #16A34A; opacity: 0; animation: haken 7s ease-out infinite; animation-delay: 3.9s; }
@keyframes haken { 0% { opacity: 0; transform: scale(.6); } 6% { opacity: 1; transform: scale(1.08); } 10% { transform: none; } 88% { opacity: 1; } 100% { opacity: 0; } }
/* Lager: QR-Code mit Scan-Linie, Bestand springt */
.illu-lager { display: flex; align-items: center; gap: 16px; }
.illu-qr { position: relative; width: 96px; height: 96px; padding: 6px; background: #fff; border: 1px solid var(--linie); border-radius: 8px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; overflow: hidden; }
.illu-qr i.an { background: var(--tinte); border-radius: 1px; }
.illu-qr s { position: absolute; left: 0; right: 0; height: 3px; background: var(--akzent); box-shadow: 0 0 8px var(--akzent); animation: scan 3.6s ease-in-out infinite; }
@keyframes scan { 0% { top: 4px; opacity: 0; } 8% { opacity: 1; } 50% { top: 90px; } 92% { opacity: 1; } 100% { top: 4px; opacity: 0; } }
.illu-chip { padding: 10px 14px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; display: grid; gap: 3px; }
.illu-chip b { font-family: var(--font-d); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--akzent); line-height: 1; display: flex; align-items: baseline; gap: 4px; }
.illu-chip small { font-size: 10.5px; color: var(--grau); white-space: nowrap; }
.illu-chip .zahl { display: inline-block; animation: zahl-alt 3.6s ease-in-out infinite; }
.illu-chip .zahl.zwei { position: absolute; animation-name: zahl-neu; }
.illu-chip b { position: relative; }
@keyframes zahl-alt { 0%, 48% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes zahl-neu { 0%, 48% { opacity: 0; } 56%, 100% { opacity: 1; } }
/* Loomi: Glühwürmchen mit Glow auf violettem Grund, füllt die ganze Kartenfläche */
.schau-bild:has(.illu-loomi) { padding: 0; place-items: stretch; }
.illu-loomi { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 45%, #5B3FA6 0%, #2E2352 55%, #1E1738 100%); overflow: hidden; }
.gross-rahmen:has(.illu-loomi) { padding: 0 !important; overflow: hidden; }
.gross-rahmen .illu-loomi { zoom: 1; height: 360px; }
.loomi { width: 150px; height: 150px; filter: drop-shadow(0 0 16px rgba(255, 209, 102, .5)); animation: lo-float 3.2s ease-in-out infinite; }
.gross-rahmen .loomi { width: 240px; height: 240px; }
.lo-halo { transform-origin: 100px 116px; animation: lo-glow 2.8s ease-in-out infinite; }
.lo-bauch { animation: lo-bauch 2.8s ease-in-out infinite; }
.lo-tip { animation: lo-glow 2s ease-in-out infinite; } .lo-tip2 { animation-delay: .6s; }
.lo-wing { animation: lo-wing .5s ease-in-out infinite alternate; } .lo-wing-l { transform-origin: 86px 96px; } .lo-wing-r { transform-origin: 114px 96px; animation-direction: alternate-reverse; }
.lo-augen { transform-origin: 100px 74px; animation: lo-blink 4.6s ease-in-out infinite; }
.lo-stern { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .35; animation: lo-funkel 3s ease-in-out infinite; animation-delay: var(--v); }
@keyframes lo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lo-glow { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes lo-bauch { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
@keyframes lo-wing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes lo-blink { 0%, 94%, 100% { transform: scaleY(1); } 96%, 98% { transform: scaleY(.1); } }
@keyframes lo-funkel { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
/* Mail: PDF an die Belege-Adresse senden, rechts der grüne Haken */
.illu-mail { display: grid; place-items: center; width: 258px; } .illu-mail > * { grid-area: 1 / 1; }
.mail { width: 100%; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: 9.5px; animation: mail-flug 8s ease-in-out infinite; }
.mail-zeile { display: grid; gap: 1px; min-width: 0; } .mail-zeile span { color: var(--grau); font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; } .mail-zeile b { color: var(--tinte); font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-anhang { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--flaeche); font-weight: 600; color: var(--tinte); white-space: nowrap; overflow: hidden; }
.mail-anhang i { flex: 0 0 auto; background: #DC2626; color: #fff; font-style: normal; font-size: 7px; font-weight: 800; padding: 2px 4px; border-radius: 3px; letter-spacing: .04em; }
.mail-senden { justify-self: end; background: var(--kobalt); color: #fff; padding: 5px 11px; border-radius: 7px; font-weight: 700; animation: senden 8s ease-in-out infinite; }
.mail-ok { display: grid; justify-items: center; gap: 8px; }
.mail-ok svg { width: 64px; height: 64px; border-radius: 50%; background: var(--akzent); padding: 16px; box-sizing: border-box; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: scale(.4); opacity: 0; animation: ok-pop 8s ease-out infinite; }
.mail-ok small { font-size: 10px; font-weight: 700; color: var(--akzent); white-space: nowrap; text-align: center; opacity: 0; animation: ok-text 8s ease-out infinite; }
@keyframes mail-flug { 0% { transform: translateX(-24px); opacity: 0; } 10%, 40% { transform: none; opacity: 1; } 48%, 100% { transform: translateY(-14px) scale(.96); opacity: 0; } }
@keyframes senden { 0%, 34%, 42%, 100% { transform: none; } 38% { transform: scale(.9); } }
@keyframes ok-pop { 0%, 50% { transform: scale(.4); opacity: 0; } 68% { transform: scale(1.06); opacity: 1; } 74%, 94% { transform: scale(1); opacity: 1; } 100% { transform: scale(.4); opacity: 0; } }
@keyframes ok-text { 0%, 62% { opacity: 0; } 74%, 94% { opacity: 1; } 100% { opacity: 0; } }
/* Planer: Wochenraster mit Balken, Aufgabenliste mit Haken */
.illu-planer { display: grid; gap: 10px; justify-items: center; align-content: center; }
.illu-woche { position: relative; width: 236px; height: 92px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 6px 0; gap: 4px; }
.illu-woche i { font-size: 9px; font-weight: 700; color: var(--grau); text-align: center; }
.illu-woche b { position: absolute; height: 12px; border-radius: 6px; left: 8px; }
.illu-woche .b1 { top: 32px; width: 86px; background: var(--akzent); }
.illu-woche .b2 { top: 50px; width: 120px; left: 56px; background: color-mix(in srgb, var(--akzent) 45%, #fff); }
.illu-woche .b3 { top: 68px; width: 40px; background: var(--kobalt); animation: balken 5s ease-in-out infinite; }
@keyframes balken { 0%, 30% { transform: translateX(0); } 45%, 80% { transform: translateX(92px); } 95%, 100% { transform: translateX(0); } }
.illu-aufgaben { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; max-width: 236px; }
.illu-aufgaben li { position: relative; padding-left: 20px; font-size: 10.5px; font-weight: 600; color: var(--tinte); white-space: nowrap; }
.illu-aufgaben li::before { content: ""; position: absolute; left: 0; top: 1px; width: 12px; height: 12px; border: 1.5px solid var(--linie); border-radius: 4px; background: #fff; }
.illu-aufgaben li.haken::before { animation: abhaken 5s ease-in-out infinite; }
@keyframes abhaken { 0%, 35% { background: #fff; border-color: var(--linie); } 45%, 100% { background: var(--akzent); border-color: var(--akzent); } }
/* Route: Strecke mit Punkt, der fährt (SVG animateMotion) */
.illu-route { display: grid; gap: 6px; justify-items: center; }
.illu-route svg { width: 230px; height: 110px; }
@media (prefers-reduced-motion: reduce) { .illu *, .illu *::before { animation: none !important; } }

/* Glut-Funken über dem Screenshot (tom's chili): kleine Lichtpunkte auf ovaler Bahn, reines CSS */
.funken { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.funken i { position: absolute; width: var(--g); height: var(--g); border-radius: 50%; opacity: 0; background: radial-gradient(circle, oklch(85% .18 var(--h)) 0%, oklch(65% .22 var(--h)) 55%, transparent 100%); box-shadow: 0 0 calc(var(--g) * 2) oklch(72% .2 var(--h)), 0 0 calc(var(--g) * 4) oklch(60% .2 var(--h) / .55); animation: funken-bahn var(--d) ease-in-out var(--v) infinite; will-change: transform, opacity; }
@keyframes funken-bahn { 0% { transform: translate(0, 0) scale(.55); opacity: 0; } 10% { opacity: .95; } 25% { transform: translate(var(--a), -20px) scale(1); } 50% { transform: translate(0, -40px) scale(1); } 75% { transform: translate(calc(-1 * var(--a)), -60px) scale(.95); } 100% { transform: translate(0, -85px) scale(.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .funken i { animation: none; opacity: .8; } }
.rahmen-frei { max-width: 220px; }
/* Social-Media-Beitrag (4:5) als Post-Karte: in der Karte unten angedockt, auf der Projektseite ganz */
.rahmen-post { max-width: 152px; }
.rahmen-post img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 10px 10px 0 0; border: 1px solid var(--linie); border-bottom: 0; }
.gross-rahmen .rahmen-post { max-width: 320px; }
.gross-rahmen .rahmen-post img { border-radius: 10px; border-bottom: 1px solid var(--linie); }
/* Ganzseiten-Screenshot auf der Projektseite: Website in voller Höhe, mit Kartenschatten */
.gross-rahmen.mit-seite { padding: 36px; display: block; }
.gross-rahmen.mit-seite .rahmen-seite { max-width: none; border-radius: 10px; border: 1px solid var(--linie); overflow: hidden; background: #fff; }
.rahmen-seite img { display: block; width: 100%; height: auto; }
/* Zuerst nur Hero + ein Stück darunter, „Mehr sehen“ klappt die ganze Startseite auf (Thomas) */
.seite-klapp { max-height: 560px; transition: max-height .7s cubic-bezier(.22, .61, .36, 1); }
.seite-klapp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; transition: opacity .4s; }
.seite-klapp.offen::after { opacity: 0; }
.seite-mehr { display: flex; justify-content: center; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .seite-klapp { transition: none; } }
@media (max-width: 600px) { .gross-rahmen.mit-seite { padding: 16px; } }
.rahmen-frei img { filter: drop-shadow(0 18px 30px rgba(17, 24, 39, .18)); max-height: 190px; width: auto; margin: 0 auto 10px; }
/* infinia-Marke: NUR das App-Icon (Original, pink), ohne Feld, rechts unten in der Bildfläche der infinia-Projekte */
.marke-infinia { position: absolute; right: 14px; bottom: 12px; width: 30px; height: 30px; background: url(infinia-icon.png) center / contain no-repeat; pointer-events: none; }
.gross-rahmen .marke-infinia, .bild-figur .marke-infinia { right: 22px; bottom: 18px; width: 44px; height: 44px; }
@media (max-width: 480px) { .gross-rahmen .marke-infinia, .bild-figur .marke-infinia { right: 14px; bottom: 12px; width: 36px; height: 36px; } }

/* Zitate-Karussell (Beispiel-Stimmen) */
.zitate { position: relative; padding: clamp(20px, 3vw, 32px) 0; text-align: center; }
.zitate-buehne { display: grid; }
.zitat { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.zitat.aktiv { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.zitat blockquote { font-family: var(--font-d); font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.02em; max-width: 26ch; margin-inline: auto; }
.zitat blockquote em { font-style: normal; color: var(--kobalt); }
.zitat p { margin: 14px auto 0; font-size: 14px; color: var(--grau); }
.zitate-punkte { display: flex; justify-content: center; gap: 2px; margin-top: 12px; }
.zitate-punkte button { width: 28px; height: 28px; border-radius: 999px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.zitate-punkte button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--linie); transition: width var(--uebergang), background var(--uebergang); }
.zitate-punkte button.aktiv::before { background: var(--kobalt); width: 22px; }

/* Ablauf */
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.schritt { padding: 22px; }
.schritt-nr { width: 36px; height: 36px; border-radius: 10px; background: var(--kobalt-hell); color: var(--kobalt); font-family: var(--font-d); font-weight: 800; display: grid; place-items: center; margin-bottom: 14px; }
.schritt h3 { font-size: 17px; margin-bottom: 6px; }
.schritt p { font-size: 14.5px; }
@media (max-width: 900px) { .schritte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .schritte { grid-template-columns: 1fr; } }

/* Über mich */
/* Über mich, Steckbrief als Profil-Karte (Thomas' Wahl 14.09.; die Polaroid-Variante ist wieder raus) */
.steckbrief-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: clamp(28px, 5vw, 64px); align-items: center; }
.profil-karte { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 24px; box-shadow: 0 30px 60px -36px rgba(17, 24, 39, .4); } /* gerade, nicht gekippt (Thomas) */
.profil-karte::before { content: ""; position: absolute; right: -50px; bottom: -70px; width: 260px; height: 260px; background: var(--kobalt); opacity: .06; -webkit-mask: url(logo-t.png) center / contain no-repeat; mask: url(logo-t.png) center / contain no-repeat; }
.profil-kopf { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.profil-kopf img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; object-position: top; background: var(--kobalt-hell); flex: 0 0 auto; }
.profil-kopf b { display: block; font-family: var(--font-d); font-size: 20px; letter-spacing: -.01em; }
.profil-kopf small { color: var(--kobalt); font-weight: 600; font-size: 13px; }
.profil-zeilen { margin: 0; position: relative; }
.profil-zeilen > div { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--linie); font-size: 15px; }
.profil-zeilen > div:last-child { border-bottom: 0; padding-bottom: 0; }
.profil-zeilen dt { color: var(--grau); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; align-self: center; }
.profil-zeilen dd { margin: 0; font-weight: 600; }
@media (max-width: 860px) { .steckbrief-raster { grid-template-columns: minmax(0, 1fr); } .profil-zeilen > div { grid-template-columns: 110px 1fr; } }
.ueber { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ueber img { border-radius: var(--r-karte); background: var(--flaeche); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chips span { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; background: var(--flaeche); color: var(--tinte-weich); }
@media (max-width: 760px) { .ueber { grid-template-columns: 1fr; } .ueber img { max-width: min(320px, 100%); } }
/* Handy-Startseite: Café-Foto als Querformat-Anschnitt, damit „Ich bin Thomas“ auf einen Bildschirm passt (Thomas) */
@media (max-width: 860px) { .abschnitt { padding-block: 40px; } #ueber-mich .ueber img { width: 100%; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; } }

/* FAQ als Akkordeon */
.faq { display: grid; gap: 10px; max-width: 760px; }
.faq details { border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5v13M5.5 12h13' fill='none' stroke='%232563EB' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--uebergang); } /* dasselbe runde Plus wie bei „Dein +“ */
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; font-size: 15px; }

/* Kontakt: Text + sichtbares Formular */
.kontakt-raster { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: stretch; } /* beide Karten gleich hoch (Thomas) */
/* Kontakt: Bühne mit dem Hero-Nebel, beide Karten als Glas, Direktwege als ruhige Liste (Thomas, 11.09.) */
.kontakt-buehne { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
.glas-karte { background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .85); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 30px 70px -40px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .9); }
.kontakt-text { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; }
/* Nur die Formularkarte: weicher weißer Glow, der den Blick unbewusst hinzieht; atmet ganz langsam (Thomas, 14.09.) */
.formular-karte.glas-karte { --glow-a: .6; box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 46px 12px rgba(255, 255, 255, var(--glow-a)), 0 30px 70px -40px rgba(37, 99, 235, .35); animation: formular-glow 6s ease-in-out infinite; }
@keyframes formular-glow { 0%, 100% { --glow-a: .55; } 50% { --glow-a: .85; } }
@property --glow-a { syntax: "<number>"; inherits: false; initial-value: .6; }
@media (prefers-reduced-motion: reduce) { .formular-karte.glas-karte { animation: none; } }
.kontakt-text .kontakt-wege { margin-top: auto; padding-top: 24px; } /* Direktwege sitzen unten, die Karte füllt die Höhe des Formulars */
/* Eingabefelder in der Glaskarte: nicht deckend weiß, sondern eine Spur dunkler und leicht Kobalt getönt, damit sie
   zum Glas gehören; beim Fokus hellen sie auf (Thomas: „das Weiß sieht so fremd drinnen aus“) */
.glas-karte { --glas-feld: rgba(37, 99, 235, .06); --glas-rand: rgba(37, 99, 235, .14); }
.glas-karte .feld input, .glas-karte .feld textarea { background: var(--glas-feld); border-color: var(--glas-rand); }
.glas-karte .feld input:focus, .glas-karte .feld textarea:focus { background: rgba(255, 255, 255, .75); border-color: transparent; }
.glas-karte .feld.ungueltig input, .glas-karte .feld.ungueltig textarea { border-color: #B91C1C; }
.kontakt-wege { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.kontakt-wege a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; transition: background var(--uebergang); }
.kontakt-wege a:hover { background: rgba(255, 255, 255, .8); }
.weg-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--kobalt-hell); color: var(--kobalt); display: grid; place-items: center; flex: 0 0 auto; }
.weg-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.weg-text { display: grid; gap: 1px; min-width: 0; }
.weg-text small { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grau); }
.weg-text b { font-size: 16px; font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }
.formular-karte { padding: clamp(20px, 3vw, 30px); }
.feld { display: grid; gap: 6px; margin-bottom: 14px; }
.feld label { font-weight: 600; font-size: 14px; }
.feld label small { font-weight: 400; color: var(--grau); }
.feld input, .feld textarea { border: 1px solid var(--linie); border-radius: var(--r-knopf); padding: 12px 14px; font: 400 15px var(--font-b); background: #fff; }
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--kobalt); outline-offset: 1px; border-color: transparent; }
.feld .fehler { color: #B91C1C; font-size: 13px; display: none; }
.feld.ungueltig .fehler { display: block; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: #B91C1C; }
.form-hinweis { font-size: 13px; color: var(--grau); margin-top: 12px; }
.form-hinweis.fehler { color: #B91C1C; }
.form-hinweis.erfolg { color: var(--kobalt); font-weight: 600; font-size: 15px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Mehrstufiges Kontaktformular (Thomas, 11.09.): Fortschritt, Folien, Chips, Fuß mit Zurück/Weiter, Danke */
.formular-karte[data-wizard] { display: flex; flex-direction: column; }
.wz-fortschritt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.wz-fortschritt span { display: grid; gap: 7px; font-size: 12px; font-weight: 600; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-fortschritt span::before { content: ""; height: 4px; border-radius: 999px; background: var(--linie); transition: background .3s; }
.wz-fortschritt span.aktiv { color: var(--kobalt); }
.wz-fortschritt span.aktiv::before, .wz-fortschritt span.fertig::before { background: var(--kobalt); }
.wz-schritt { display: none; }
.wz-schritt.da { display: flex; flex-direction: column; flex: 1; animation: wz-rein .32s ease-out both; }
@keyframes wz-rein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.wz-titel { font-size: clamp(22px, 2.2vw, 28px); }
.wz-sub { margin-top: 6px; margin-bottom: 18px; color: var(--tinte-weich); font-size: 15px; }
/* Leistungen als Kacheln 3×2 mit Icon (Handy 2×3); angetippt = Kobalt-blau (Thomas) */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kachel { position: relative; }
.kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kachel > span { display: grid; gap: 10px; padding: 14px 12px 13px; border-radius: 14px; border: 1px solid var(--glas-rand); background: var(--glas-feld); cursor: pointer; user-select: none; transition: border-color .18s, background .18s, color .18s, transform .18s; min-height: 100%; }
.kachel b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.kachel .icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .8); color: var(--kobalt); transition: background .18s, color .18s; }
.kachel .icon svg { width: 19px; height: 19px; }
.kachel .icon-infinia { background: url(infinia-icon.png) center / 100% no-repeat; } /* App-Icon statt weißer Box (Spezifität über .kachel .icon) */
.kachel > span:active { transform: scale(.97); }
.kachel input:checked + span { border-color: var(--kobalt); background: var(--kobalt); color: #fff; }
.kachel input:checked + span .icon { background: rgba(255, 255, 255, .2); color: #fff; }
.kachel input:checked + span .icon-infinia { background: rgba(255, 255, 255, .92) url(infinia-icon.png) center / 100% no-repeat; }
.kachel input:focus-visible + span { outline: 2px solid var(--kobalt); outline-offset: 2px; }
@media (max-width: 520px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wz-fehler { color: #B91C1C; font-size: 13px; margin-top: 12px; display: none; }
.wz-fehler.da { display: block; }
.wz-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.wz-zurueck { color: var(--grau); font-weight: 600; background: none; border: 0; cursor: pointer; font: inherit; padding: 10px 0; }
.wz-zurueck:hover { color: var(--tinte); }
.wz-schritt .form-hinweis { margin-top: 14px; }
.wz-danke { text-align: center; padding: 28px 0; margin: auto 0; }
.wz-danke .haken { width: 72px; height: 72px; border-radius: 50%; background: var(--kobalt); display: grid; place-items: center; margin: 0 auto 18px; animation: wz-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.wz-danke .haken svg { width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wz-danke .wz-sub { margin-bottom: 0; font-size: 16px; }
@keyframes wz-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wz-schritt.da, .wz-danke .haken { animation: none; } }
.knopf[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 860px) { .kontakt-raster { grid-template-columns: 1fr; } }

/* Footer: gleiches Kobalt wie das Social-Band darüber */
.fuss { background: var(--kobalt); color: #fff; border-top: 1px solid rgba(255, 255, 255, .22); padding: 30px 0 28px; }
.fuss .logo { background: #fff; }
.fuss-innen { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.fuss nav { display: flex; gap: 18px; flex-wrap: wrap; }
.fuss a { color: rgba(255, 255, 255, .85); font-size: 14px; }
.fuss a:hover { color: #fff; }
.fuss-unten { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .7); }

/* Projektübersicht: Tabs + Karten */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tabs button { border: 1px solid var(--linie); background: #fff; border-radius: 8px; padding: 9px 16px; font: 600 14px var(--font-b); cursor: pointer; color: var(--tinte-weich); transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang); }
.tabs button:hover { border-color: var(--tinte); color: var(--tinte); }
.tabs button.aktiv { background: var(--kobalt); color: #fff; border-color: var(--kobalt); }
.schau-gruppe { display: none; }
.schau-gruppe.aktiv { display: block; }


/* Fallstudie (Projektseiten) */
.fall-fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; margin-top: 32px; }
.fall-fakten div { background: #fff; padding: 16px 18px; }
.fall-fakten small { display: block; color: var(--grau); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.fall-fakten strong { font-size: 16px; }
.fall-fakten-3 { grid-template-columns: repeat(3, 1fr); }
.nutzen-gross { margin-top: 14px; font-family: var(--font-d); font-weight: 800; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.02em; line-height: 1.15; color: var(--kobalt); max-width: 26ch; }
@media (max-width: 760px) { .fall-fakten { grid-template-columns: repeat(2, 1fr); } }
.fall-liste { display: grid; gap: 10px; margin-top: 20px; }
.fall-liste li { list-style: none; display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--tinte-weich); font-size: 15.5px; }
.fall-liste li::before { content: "✓"; color: var(--kobalt); font-weight: 700; }
@media (max-width: 720px) { .zahlenband { grid-template-columns: 1fr; } }
.platzhalterbild { position: relative; border-radius: var(--r-karte); background: var(--flaeche); display: grid; place-items: center; color: var(--grau); font-weight: 600; min-height: 280px; }
/* Ansichten-Slider auf Projektseiten (Thomas, 14.09.): eine Ansicht je Folie mit Untertext, Pfeile, Punkte, Wischen */
.schau-slider { position: relative; }
.slider-spur { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider-spur::-webkit-scrollbar { display: none; }
.slider-folie { margin: 0; scroll-snap-align: start; scroll-snap-stop: always; display: grid; gap: 14px; min-width: 0; } /* stop: ein Wisch = eine Folie, kein Durchrutschen (Handy-Test Loomi 21.09.) */
.slider-folie figcaption { font-size: 15.5px; color: var(--tinte-weich); max-width: 66ch; line-height: 1.5; text-align: center; justify-self: center; } /* zentriert (Thomas) */
.schau-slider .karussell-pfeil { top: 170px; transform: none; }
.slider-punkte { display: flex; gap: 8px; margin-top: 14px; justify-content: center; }
.slider-punkte button { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: var(--linie); cursor: pointer; transition: width .2s, background .2s; }
.slider-punkte button.aktiv { width: 24px; background: var(--kobalt); }
/* Handy: die großen Mocks der Projektseite in den schmalen Rahmen einpassen statt abzuschneiden */
@media (max-width: 700px) { .gross-rahmen .mock-desk { zoom: .55; } .gross-rahmen .mock-blatt { zoom: .7; } .platzhalterbild.gross-rahmen { padding: 18px 14px 0 !important; } .schau-slider .karussell-pfeil { top: 110px; } }
@media (max-width: 520px) { .gross-rahmen .mock-desk { zoom: .41; } .gross-rahmen .mock-blatt { zoom: .53; } }
.leise { color: var(--grau); font-size: 14px; }

/* Über-mich-Kapitel + Textseiten */
/* Mein Anspruch: Statement in drei Zeilen, nacheinander eingeblendet */
.manifest { max-width: 900px; margin-top: 18px; display: grid; gap: clamp(8px, 1.4vw, 16px); }
.manifest p { font-family: var(--font-d); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; font-size: clamp(26px, 3.6vw, 46px); color: var(--grau); }
.manifest p:nth-child(2), .manifest p:nth-child(3) { color: var(--tinte); }
.manifest p em { font-style: normal; color: var(--kobalt); }

/* Selbstcheck „5 Zeichen“: Liste zum Anhaken, Ergebnis mit Balken */
.check-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); grid-template-areas: "intro liste" "ergebnis liste"; gap: 0 clamp(28px, 5vw, 64px); align-items: start; }
.check-intro { grid-area: intro; }
.check-intro h2 { font-size: clamp(30px, 2.8vw, 38px); hyphens: manual; } /* kein „Be-trieb“ am Handy */
.check-intro .akzent { white-space: nowrap; } /* „IT-Unterstützung“ nicht trennen */
.check-liste { grid-area: liste; }
.check-ergebnis { grid-area: ergebnis; }
.check-liste { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; }
.check-liste label { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 10px; cursor: pointer; font-weight: 500; font-size: 16px; line-height: 1.35; transition: background var(--uebergang); }
.check-liste label:hover { background: var(--flaeche); }
.check-liste label:has(input:checked) { background: var(--kobalt-hell); }
.check-liste input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-kasten { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--linie); background: #fff; flex: 0 0 auto; display: grid; place-items: center; transition: background var(--uebergang), border-color var(--uebergang); }
.check-kasten svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.check-liste input:checked + .check-kasten { background: var(--kobalt); border-color: var(--kobalt); }
.check-liste input:checked + .check-kasten svg { opacity: 1; transform: scale(1); }
.check-liste input:focus-visible + .check-kasten { outline: 2px solid var(--kobalt); outline-offset: 2px; }
.check-ergebnis { margin-top: 24px; display: grid; gap: 8px; justify-items: start; align-self: start; }
.check-balken { display: flex; gap: 6px; margin-bottom: 6px; }
.check-balken i { width: 34px; height: 8px; border-radius: 999px; background: var(--linie); transition: background var(--uebergang); }
.check-balken i.voll { background: var(--kobalt); }
.check-ergebnis b { font-family: var(--font-d); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; line-height: 1.1; }
.check-ergebnis > span { color: var(--tinte-weich); font-size: 16px; max-width: 46ch; }
.check-ergebnis .knopf { margin-top: 10px; }
@media (max-width: 860px) { .check-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "liste" "ergebnis"; gap: 20px; } .check-ergebnis { margin-top: 4px; } } /* Handy: erst anhaken, dann Ergebnis */

/* Über-mich-Seite: Kurzfassung statt Lebenslauf */
.klartext-stapel { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 32px); }
.chat-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.chat-reihe .chat-verlauf { min-height: 200px; }
/* Langes Gespräch (Über mich): feste Höhe, innen wird gescrollt wie am Handy (Thomas, 14.09.); neue Nachrichten
   schieben den Verlauf nach unten */
.chat-lang .chat-verlauf { height: min(560px, 68dvh); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linie) transparent; }
@media (max-width: 860px) { .chat-lang .chat-verlauf { height: min(520px, calc(100dvh - var(--dock-hoehe) - 190px)); } }
.chat-lang .nachricht { display: none; transition: none; }
.chat-lang .nachricht.da { display: block; animation: nachricht-rein .35s ease both; }
.chat-lang .nachricht.tippt.da { display: flex; }
@keyframes nachricht-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat-lang .nachricht.da { animation: none; } }
@media (max-width: 1000px) { .chat-reihe { grid-template-columns: minmax(0, 1fr); } }

.textseite { max-width: 720px; }
.textseite h2 { font-size: 22px; margin: 32px 0 10px; }
.textseite p { margin-bottom: 12px; }
.hinweisbox { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; border-radius: var(--r-karte); padding: 14px 16px; font-size: 14px; }

/* Einblenden beim Scrollen, reduzierte Bewegung */
.zeig { opacity: 0; transform: translateY(14px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: var(--verzug, 0ms); }
.zeig.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .zeig { opacity: 1; transform: none; transition: none; } .buehne-produkt, .buehne-zahl { animation: none; } }
h1, h2, h3, p { overflow-wrap: break-word; }

.gross-rahmen .rahmen { max-width: 520px; }
.gross-rahmen .rahmen-phone { max-width: 220px; }

/* ============================================================
   Dock-Navigation (10.09.): Desktop unten im Hero → gleitet nach oben;
   Handy: dauerhafte Leiste unten. Ein Element, zwei Zustände.
   ============================================================ */
.mobil-kopf { display: none; }
.dock { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 32px));
  top: calc(100dvh - 22px - 60px); border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
  border: 1px solid var(--linie); box-shadow: 0 14px 40px -18px rgba(17, 24, 39, .25);
  transition: top .45s cubic-bezier(.22, .61, .36, 1), width .45s cubic-bezier(.22, .61, .36, 1), border-radius .45s, box-shadow .45s; }
.dock-innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 12px 0 20px; max-width: var(--mass); margin-inline: auto; }
.dock-links { display: flex; align-items: center; gap: 4px; }
.dock-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 14.5px; color: var(--tinte-weich); transition: background var(--uebergang), color var(--uebergang); }
.dock-links a:hover { background: var(--flaeche); color: var(--tinte); }
.dock-links a.aktiv { color: var(--kobalt); }
.dock-links svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.dock-links .dock-kontakt { background: var(--kobalt); color: #fff; margin-left: 6px; }
.dock-links .dock-kontakt:hover { background: var(--kobalt-tief); color: #fff; }
.dock.oben { top: 0; width: 100%; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; }
.dock.oben .dock-innen { height: 66px; padding: 0 clamp(20px, 4vw, 40px); }
.dock.oben .dock-links a { border-radius: 8px; }
body.dock-oben { padding-top: 0; }
.bereiche { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(40px, 6vw, 64px); text-align: left; }
.bereich { display: flex; align-items: center; gap: 12px; padding: 16px 18px; transition: border-color var(--uebergang), transform var(--uebergang); }
.bereich:hover { border-color: var(--kobalt); }
.bereich b { display: block; font-size: 15px; }
.bereich small { display: block; font-size: 12.5px; color: var(--grau); line-height: 1.3; }
@media (max-width: 1000px) { .bereiche { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  /* Handy: Leiste dauerhaft unten mit Icons, Logo oben als schmale Zeile */
  .mobil-kopf { display: flex; align-items: center; height: var(--kopf-hoehe); border-bottom: 1px solid var(--linie); }
  .mobil-kopf .mass { width: 100%; }
  .mobil-kopf .logo { height: 24px; }
  body { padding-bottom: 76px; }
  .dock, .dock.oben { top: auto; bottom: 0; left: 0; transform: none; width: 100%; border-radius: 0; border: 0; border-top: 1px solid var(--linie); box-shadow: 0 -8px 30px -20px rgba(17, 24, 39, .3); transition: none; }
  .dock-innen { height: var(--dock-hoehe); padding: 0 6px; gap: 0; }
  .dock-logo { display: none; }
  .dock-links { width: 100%; justify-content: space-around; gap: 0; }
  .dock-links a { flex-direction: column; gap: 4px; padding: 6px 8px; font-size: 11px; border-radius: 10px; }
  .dock-links svg { display: block; width: 22px; height: 22px; }
  .dock-links .dock-kontakt { margin-left: 0; background: var(--kobalt-hell); color: var(--kobalt); }
}
@media (max-width: 560px) { .bereiche { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }


/* ---------- Hero C: Headline + Satz | großes Porträt; unten Bereiche | Knöpfe ---------- */
/* Hero: weiß, dahinter der Nebel (Thomas, 10.09.: Rahmen weg, Nebel deutlich sichtbar) */
.held-c { position: relative; isolation: isolate; background: #fff; padding-top: clamp(56px, 8vw, 96px); padding-bottom: 120px; }
/* Nebel: Canvas direkt hinter dem Inhalt, vom Skript mit animiertem Rauschen in Kobalt gefüllt, weichgezeichnet */
.held-nebel { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; filter: blur(14px); }
.held-c-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); grid-template-areas: "text foto" "bereiche ctas"; gap: clamp(28px, 4vw, 44px) clamp(30px, 6vw, 72px); align-items: end; }
.held-c-text { grid-area: text; align-self: center; }
.held-c h1 { font-size: clamp(34px, 3.7vw, 44px); }
.held-logo { display: block; height: 60px; margin-bottom: 44px; }
/* Hero-Auftritt (Thomas): Zeile 1 wird getippt, Zeile 2 und Knopf poppen auf. Platz ist von Anfang an reserviert,
   weil die Zeichen unsichtbar im Layout stehen. Ohne JS (kein html.js) ist alles sofort sichtbar. */
.js .tipp:not(.bereit) { visibility: hidden; }
.js .tipp > span { visibility: hidden; }
.held-c h1 > .tipp, .held-c h1 > .pop { display: block; } /* jede Zeile ein eigener Block: kein Inline-Umbruch, der beim Auftritt springen könnte (Handy, Thomas) */
.held-c h1 { text-wrap: wrap; }
.tipp > span.da { visibility: visible; }
.tipp > span.letzt { position: relative; }
.tipp > span.letzt::after { content: ""; position: absolute; left: 100%; top: .1em; width: .06em; height: .82em; margin-left: .05em; background: var(--tinte); animation: blinzeln 1s steps(2, start) infinite; } /* Cursor als Pseudo-Element: kein Einfluss auf den Zeilenumbruch */
@keyframes blinzeln { to { visibility: hidden; } }
.js .pop { visibility: hidden; }
.pop { display: inline-block; transform-origin: left center; }
.held-c-ctas .pop { transform-origin: right center; }
.pop.da { visibility: visible; animation: erscheinen .22s ease-out both; } /* wie ein schnelles Verblassen rückwärts, zügig (Thomas) */
.held-c-ctas .pop.da { animation-duration: .45s; } /* der Knopf darf gemütlicher kommen */
.pop.da.sofort { animation: none; }
@keyframes erscheinen { from { opacity: 0; transform: scale(1.05); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .pop.da { animation: none; } .tipp > span.letzt::after { animation: none; } }
.held-c .eyebrow { color: var(--grau); margin-bottom: 8px; } /* grau, eng an der Headline (Thomas) */
@media (max-width: 860px) { .held-logo { display: none; } } /* Handy zeigt das Logo schon in der Kopfzeile */
@media (min-width: 861px) {
  /* Im Hero-Zustand trägt das Dock kein Logo (das Logo steht groß im Hero); oben ist es wieder da */
  .dock:not(.oben) { width: min(480px, calc(100% - 32px)); }
  .dock:not(.oben) .dock-logo { display: none; }
  .dock:not(.oben) .dock-innen { justify-content: center; padding: 0 12px; }
}
.held-c .held-sub { margin-top: 20px; font-size: clamp(17px, 1.5vw, 19px); max-width: 44ch; }
.held-c-foto { grid-area: foto; position: relative; margin: 0; justify-self: end; width: 100%; max-width: 480px; }
/* Hinter dem Porträt steht statt eines Kastens das „t.“ aus dem Logo, hell in Kobalt (Thomas' Idee) */
.held-c-foto::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1 / 1; background: var(--kobalt); opacity: .04; -webkit-mask: url(logo-t.png) center / contain no-repeat; mask: url(logo-t.png) center / contain no-repeat; }
.held-c-foto img { position: relative; filter: drop-shadow(0 26px 34px rgba(17, 24, 39, .18)); }
.held-c-foto figcaption { position: absolute; left: 16px; bottom: 16px; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; }
.held-c-foto figcaption b { display: block; font-size: 14px; }
.held-c-foto figcaption small { display: block; font-size: 12px; color: var(--kobalt); font-weight: 600; }
.held-c-bereiche { grid-area: bereiche; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.held-c-bereiche .bereich { padding: 14px 16px; }
.held-c-bereiche .bereich b { font-size: 15px; }
.held-c-ctas { grid-area: ctas; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
@media (min-width: 861px) { .held-c { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; } .held-c > .mass { width: 100%; } }
@media (min-width: 861px) and (max-height: 840px) {
  .held-c { padding-top: 40px; padding-bottom: 104px; }
  .held-c h1 { font-size: clamp(32px, 4.4vw, 50px); }
  .held-c-foto { max-width: 380px; }
  .held-c-raster { row-gap: 22px; }
}
@media (max-width: 860px) {
  .held-c { padding-top: 40px; padding-bottom: 32px; }
  .held-c-raster { grid-template-columns: 1fr; grid-template-areas: "text" "foto" "bereiche" "ctas"; gap: 24px; }
  .held-c-foto { justify-self: start; max-width: 340px; }
  .held-c-ctas { align-items: stretch; }
  .held-c-ctas .knopf { justify-content: center; }
  .held-c-ctas .pfeil { text-align: center; }
}
@media (max-width: 420px) { .held-c-bereiche { grid-template-columns: 1fr; } }
/* Handy: Headline so groß, dass „Du machst deinen Job.“ in EINE Zeile passt (Thomas, 11.09.) */
@media (max-width: 520px) { .held-c h1 { font-size: clamp(24px, 7.4vw, 32px); } }

/* Bereiche im Hero: ruhige Zeile statt Boxen */
.bereiche-liste { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-self: end; }
.bereiche-liste li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15.5px; color: var(--tinte); }
.bereiche-liste .icon { width: 36px; height: 36px; border-radius: 9px; background: var(--flaeche); color: var(--tinte-weich); } /* grau, ohne Blau (Thomas) */
.held-c-ctas .knopf { min-width: 220px; justify-content: center; }
@media (max-width: 860px) { .bereiche-liste { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- Beispiel-Chat (läuft beim Sichtbarwerden ab) ---------- */
.chat-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (min-width: 861px) { .chat-raster .chat { margin-top: clamp(48px, 14vh, 140px); } } /* Text links oben, Chat rechts und tiefer (Thomas) */
.chat { padding: 0; overflow: hidden; }
.chat-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linie); background: #FAFAFA; }
.chat-kopf img { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; object-position: top; background: var(--flaeche); }
.chat-kopf b { display: block; font-size: 14px; }
.chat-kopf small { display: block; font-size: 12px; color: var(--grau); }
.chat-verlauf { padding: 18px; display: grid; gap: 10px; min-height: 250px; align-content: start; }
.nachricht { max-width: 82%; padding: 11px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.nachricht.da { opacity: 1; transform: none; }
.nachricht.kunde { justify-self: start; background: var(--flaeche); color: var(--tinte); border-bottom-left-radius: 4px; }
.nachricht.thomas { justify-self: end; background: var(--kobalt); color: #fff; border-bottom-right-radius: 4px; }
.nachricht.tippt { justify-self: end; background: var(--kobalt-hell); padding: 12px 14px; display: none; gap: 5px; align-items: center; border-bottom-right-radius: 4px; }
.nachricht.tippt.da { display: flex; }
.nachricht.tippt span { width: 7px; height: 7px; border-radius: 999px; background: var(--kobalt); opacity: .35; animation: tippen 1.1s infinite ease-in-out; }
.nachricht.tippt span:nth-child(2) { animation-delay: .18s; }
.nachricht.tippt span:nth-child(3) { animation-delay: .36s; }
@keyframes tippen { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.chat-nochmal { margin: 0 18px 16px; background: none; border: 0; color: var(--kobalt); font: 600 13.5px var(--font-b); cursor: pointer; padding: 0; }
@media (max-width: 860px) { .chat-raster { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nachricht { transition: none; } .nachricht.tippt span { animation: none; } }

/* ---------- Leistungsseite ---------- */
.leistungsliste { display: grid; gap: 0; }
.leistungsliste .leistung { padding: clamp(28px, 4vw, 40px) 0; border-top: 1px solid var(--linie); display: grid; gap: 14px; max-width: 760px; }
.leistung-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } /* Luft zwischen Überschrift und Text (Thomas, 14.09.) */
.leistung-kopf h2 { font-size: clamp(24px, 3vw, 32px); }
.leistungsliste .leistung p { font-size: 16.5px; max-width: 64ch; }
.leistung-fuerwen { color: var(--tinte-weich); }
.leistung-fuerwen b { color: var(--tinte); }
.bereiche-liste a { display: flex; align-items: center; gap: 12px; color: inherit; }

/* ---------- Social-Band (Kobalt, weiße Logos) ---------- */
.social-band { background: var(--kobalt); color: #fff; padding: clamp(36px, 5vw, 56px) 0; }
.social-innen { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.social-titel { color: #fff; font-family: var(--font-d); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; max-width: none; }
.social-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.social-knoepfe a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-knopf); border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-weight: 600; font-size: 15px; transition: background var(--uebergang), border-color var(--uebergang); }
.social-knoepfe a:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.social-knoepfe svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .social-knoepfe { width: 100%; } .social-knoepfe a { flex: 1 1 auto; justify-content: center; } }

/* Unterseiten: Dock startet oben, Inhalt bekommt den Platz darunter */
@media (min-width: 861px) { body.dock-oben-start { padding-top: 66px; } }

/* Rechtstexte */
.textseite ul { padding-left: 20px; margin-bottom: 12px; color: var(--tinte-weich); }
.textseite li { margin-bottom: 4px; }
.textseite dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 12px 0 16px; }
.textseite dt { font-weight: 600; }
.textseite dd { color: var(--tinte-weich); }
@media (max-width: 560px) { .textseite dl { grid-template-columns: 1fr; gap: 2px 0; } .textseite dd { margin-bottom: 8px; } }

/* Leistungen & Projekte: klebende Filterleiste, Gruppen mit Beschreibung + Projektraster */
.tabs-leiste { position: sticky; top: 0; z-index: 50; height: var(--tabs-hoehe); display: flex; align-items: center; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.tabs-leiste .mass { width: 100%; }
.tabs-leiste .tabs { margin-bottom: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs-leiste .tabs button { flex: 0 0 auto; }
@media (min-width: 861px) { .tabs-leiste { top: 66px; } }
.gruppe { padding: clamp(28px, 4vw, 44px) 0; }
.gruppe + .gruppe { border-top: 1px solid var(--linie); }
.gruppe-kopf { display: grid; gap: 12px; margin-bottom: clamp(20px, 3vw, 28px); } /* volle Spaltenbreite wie das Karussell (Thomas) */
.gruppe-kopf p { max-width: none; }
/* Titelspalte im Hero der Leistungsseite: alle Projekttitel untereinander am linken Rand, gleich groß, blass,
   poppen nacheinander auf (Thomas) */
.held-projekte { position: relative; overflow: hidden; padding-bottom: 12px; --titel-schrift: clamp(17px, 2.1vh, 30px); } /* Spalte wächst mit der Fensterhöhe (4K) */
.held-projekte > .mass { position: relative; z-index: 1; }
.titelwolke { position: absolute; inset: 0; left: 44px; pointer-events: none; display: grid; align-content: center; justify-items: start; gap: clamp(8px, 1.5vh, 22px); }
.titelwolke span { font-family: var(--font-d); font-weight: 700; font-size: var(--titel-schrift); color: #C4CAD5; letter-spacing: -.01em; line-height: 1; white-space: nowrap; transform-origin: left center; opacity: 0; transform: translateX(-10px); animation: titel-pop .8s cubic-bezier(.22, .61, .36, 1) var(--v) forwards, titel-welle 8s ease-in-out calc(7s + var(--i) * .25s) infinite; }
/* Welle: die Hervorhebung wandert Zeile für Zeile nach unten (Thomas: IMMER nur EINE Zeile fett) — 0,25 s je Zeile,
   Fenster exakt ein Schritt (3,125 % von 8 s): 0,08 s einblenden, halten, 0,06 s ausblenden, dann übernimmt die nächste;
   6 s Lauf + 2 s Pause */
@keyframes titel-welle { 0%, 3.125%, 100% { color: #C4CAD5; font-weight: 700; transform: scale(1); } 1%, 2.375% { color: #6B7280; font-weight: 800; transform: scale(1.08); } }
@keyframes titel-pop { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* Ab 1280 px: Hero-Text rückt nach rechts (Textbeginn bei 470 px), damit die Spalte links frei steht */
@media (min-width: 1280px) { .held-projekte > .mass { padding-left: max(clamp(20px, 4vw, 40px), calc(84px + 19.5 * var(--titel-schrift) - (100vw - var(--mass)) / 2)); } } /* Textbeginn = Spaltenbreite + Luft */
/* Unter 1280 px (Tablet/Handy) ist links kein Platz: die Titel stehen als kompakter Block UNTER der Headline
   (Headline zuerst im Blick, Titel laufen nach), gleiche Animationen (Thomas will sie auch am Handy sehen, 11.09.) */
@media (max-width: 1279px) {
  .titelwolke { position: static; inset: auto; order: 2; width: 100%; max-width: var(--mass); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; align-content: start; }
  .titelwolke span { font-size: 14px; white-space: normal; line-height: 1.2; }
}
@media (max-width: 860px) { .titelwolke { display: none; } } /* Handy: ganz weg — der Block unter der Headline sah „schrecklich“ aus (Thomas, 11.09.) */
@media (prefers-reduced-motion: reduce) { .titelwolke span { animation: none; opacity: 1; transform: none; } }
/* Gruppenkopf mit Foto (infinia: Roll-up-Foto rechts neben dem Text, Thomas) */
.gruppe-kopf.mit-foto { grid-template-columns: minmax(0, 1fr) 250px; gap: 36px; align-items: start; }
.gruppe-foto { margin: 0; }
.gruppe-foto img { display: block; width: 100%; border-radius: 14px; box-shadow: 12px -12px 0 0 #FCE4F1; }
@media (max-width: 860px) { .gruppe-kopf.mit-foto { grid-template-columns: minmax(0, 1fr); } .gruppe-foto { max-width: 220px; } }
/* Echtes Foto auf der Projektseite */
.foto-figur img { display: block; width: 100%; border-radius: var(--r-karte); }
mark { background: rgba(37, 99, 235, .18); color: inherit; padding: .04em .2em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Stichworte wie mit der Maus markiert */
.gruppe-kopf p { font-size: 16px; }
.dock-links a .kurz { display: none; }
@media (max-width: 860px) { .dock-links a .lang { display: none; } .dock-links a .kurz { display: inline; } }

/* Warum das bei mir funktioniert: drei Aussagen, ohne Kästen */
.warum { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.warum > div { display: grid; gap: 12px; align-content: start; }
.warum h3 { font-size: 19px; }
.warum p { font-size: 15.5px; }
@media (max-width: 860px) { .warum { grid-template-columns: 1fr; gap: 28px; } }

/* Dein Mehrwert: Treppe aus drei Sätzen */
/* „Dein +“: das Plus ist eine Box im Logo-Stil (Kobalt, Logo-Rundung, weißes +); poppt eine Sekunde nach dem Sichtbarwerden auf */
.plus-logo { display: inline-grid; place-items: center; width: .92em; height: .92em; vertical-align: -.1em; margin-left: .06em; border-radius: 18%; background: var(--kobalt); color: #fff; font-family: var(--font-d); font-weight: 800; font-size: 1em; line-height: 1; transform: scale(0); opacity: 0; }
.plus-logo::before { content: ""; width: 62%; height: 62%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5v13M5.5 12h13' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* Plus als SVG mit runden Strichenden wie im Logo, statt Schriftzeichen */
.zeig.da .plus-logo { animation: aufpoppen .65s cubic-bezier(.34, 1.56, .64, 1) 1s forwards; }
@keyframes aufpoppen { from { transform: scale(0) rotate(-25deg); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plus-logo, .zeig.da .plus-logo { transform: none; opacity: 1; animation: none; } }
.treppe { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(20px, 3vw, 44px); margin-top: clamp(24px, 3vw, 36px); }
.treppe li { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-family: var(--font-d); font-weight: 500; font-size: clamp(20px, 2.1vw, 28px); letter-spacing: -.02em; line-height: 1.15; color: var(--tinte); }
.treppe li .icon { width: 52px; height: 52px; border-radius: 14px; }
.treppe li .icon svg { width: 24px; height: 24px; }
.treppe em { font-style: normal; color: var(--kobalt); }
/* Einflug: die drei Punkte kommen nacheinander von links an ihre Position (Reihenfolge über --verzug) */
.treppe li.zeig { transform: translateX(-72px); transition-duration: .7s; }
.treppe li.zeig.da { transform: none; }
@media (max-width: 860px) { .treppe { grid-template-columns: minmax(0, 1fr); gap: 18px; } .treppe li { flex-direction: row; align-items: flex-start; gap: 12px; } .treppe li .icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; margin-top: 2px; } .treppe li.zeig { transform: translateX(-36px); } }

/* Mobil-Robustheit: keine Elemente, die die Seite breiter machen */
h1, h2, h3 { hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 480px) { .knopf { white-space: normal; text-align: center; line-height: 1.25; } }
@media (max-width: 860px) { .held-c-raster { grid-template-columns: minmax(0, 1fr); } .kontakt-raster, .chat-raster, .ueber { grid-template-columns: minmax(0, 1fr); } }

/* Tippziele: Footer-Links und Logo-Links mindestens 32 px hoch */
.fuss nav a, .fuss-unten a { display: inline-block; padding: 6px 0; }
.fuss .logo, .mobil-kopf .logo { height: 32px; aspect-ratio: auto; width: 116px; -webkit-mask-size: auto 24px; mask-size: auto 24px; -webkit-mask-position: left center; mask-position: left center; }
@media (max-width: 380px) { .fall-fakten { grid-template-columns: 1fr; } .zahlenband { gap: 14px; } }

/* Karussell: Pfeile links/rechts außen, Knopf rechts darunter */
.karussell { position: relative; }
/* Pfeile: schlanke Winkel ‹ ›, Rand und Zeichen in Kobalt, Hintergrund transparent (Thomas) */
.karussell-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--kobalt); background: transparent; color: var(--kobalt); cursor: pointer; display: grid; place-items: center; transition: background var(--uebergang), color var(--uebergang); }
.karussell-pfeil svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.karussell-pfeil:hover { background: var(--kobalt); color: #fff; }
.karussell-pfeil.links { left: -22px; }
.karussell-pfeil.rechts { right: -22px; }
/* Testweise (Thomas): Karten in Karussellen ohne Rahmenlinie, Hover-Rand bleibt als Rückmeldung */
.karussell .projekt-karte { border-color: transparent; }
/* Karten markieren ohne Rahmen und ohne Vollfläche (Thomas, 14.09.): nur das Vorschaubild steht auf einer zart
   getönten Bühne in der Projektfarbe (--akzent aus projekte.py), der Text darunter bleibt frei auf Weiß */
.karussell .projekt-karte:not(.kontakt-karte) .schau-bild { border-radius: 14px 14px 0 0; background: linear-gradient(165deg, color-mix(in srgb, var(--kobalt) 9%, #fff), color-mix(in srgb, var(--kobalt) 4%, #fff)); } /* überall dasselbe helle Kobalt, eine Spur heller als die Platzhalter (Thomas) */
.karussell .projekt-karte:not(.kontakt-karte):hover .schau-bild { background: linear-gradient(165deg, color-mix(in srgb, var(--kobalt) 13%, #fff), color-mix(in srgb, var(--kobalt) 6%, #fff)); }
/* Textbereich darunter im noch helleren Kobalt — Bild und Text ergeben eine zweitönige Kartenform (Thomas, 14.09.) */
.karussell .projekt-karte:not(.kontakt-karte) .projekt-text { border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--kobalt) 2%, #fff); }
.karussell-hinweis { text-align: center; font-size: 12.5px; color: var(--grau); margin-top: 8px; max-width: none; } /* Kleingedrucktes mittig unter dem Karussell (Thomas) */
.karussell-fuss { display: flex; justify-content: flex-end; margin-top: 18px; max-width: none; }
@media (max-width: 1240px) { .karussell-pfeil.links { left: 6px; } .karussell-pfeil.rechts { right: 6px; } }
@media (max-width: 860px) { .karussell-pfeil { display: none; } .karussell-fuss { justify-content: stretch; } .karussell-fuss .knopf { width: 100%; justify-content: center; } }

/* Ablauf: Linie zeichnet sich, Stationen leuchten nacheinander auf */
.ablauf { position: relative; padding-top: 6px; }
.ablauf-linie { position: absolute; left: 14px; right: 14px; top: 19px; height: 2px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.ablauf-linie span { display: block; height: 100%; background: var(--kobalt); transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.22, .61, .36, 1) .2s; }
.ablauf.da .ablauf-linie span { transform: scaleX(1); }
.ablauf-schritte { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.ablauf-schritte li { display: grid; gap: 8px; align-content: start; padding-right: 8px; }
.ablauf-punkt { width: 28px; height: 28px; border-radius: 999px; background: #fff; border: 2px solid var(--linie); display: grid; place-items: center; margin-bottom: 10px; transform: scale(.7); transition: transform .45s cubic-bezier(.22, .61, .36, 1), border-color .45s, background .45s; }
.ablauf-punkt::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--kobalt); opacity: 0; transition: opacity .45s; }
.ablauf-schritte h3 { font-size: 18px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.ablauf-schritte p { font-size: 14.5px; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.ablauf.da li:nth-child(1) .ablauf-punkt { transition-delay: .3s; } .ablauf.da li:nth-child(1) h3, .ablauf.da li:nth-child(1) p { transition-delay: .4s; }
.ablauf.da li:nth-child(2) .ablauf-punkt { transition-delay: .7s; } .ablauf.da li:nth-child(2) h3, .ablauf.da li:nth-child(2) p { transition-delay: .8s; }
.ablauf.da li:nth-child(3) .ablauf-punkt { transition-delay: 1.1s; } .ablauf.da li:nth-child(3) h3, .ablauf.da li:nth-child(3) p { transition-delay: 1.2s; }
.ablauf.da li:nth-child(4) .ablauf-punkt { transition-delay: 1.5s; } .ablauf.da li:nth-child(4) h3, .ablauf.da li:nth-child(4) p { transition-delay: 1.6s; }
.ablauf.da .ablauf-punkt { transform: scale(1); border-color: var(--kobalt); background: var(--kobalt-hell); }
.ablauf.da .ablauf-punkt::after { opacity: 1; }
.ablauf.da .ablauf-schritte h3, .ablauf.da .ablauf-schritte p { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .ablauf-schritte { grid-template-columns: 1fr; gap: 26px; }
  .ablauf-schritte li { grid-template-columns: 28px 1fr; grid-template-areas: "punkt titel" "punkt text"; column-gap: 16px; padding-right: 0; }
  .ablauf-punkt { grid-area: punkt; margin: 0; }
  .ablauf-schritte h3 { grid-area: titel; } .ablauf-schritte p { grid-area: text; }
  .ablauf-linie { left: 13px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
  .ablauf-linie span { transform: scaleY(0); transform-origin: center top; }
  .ablauf.da .ablauf-linie span { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .ablauf-linie span, .ablauf-punkt, .ablauf-schritte h3, .ablauf-schritte p { transition: none; } .ablauf .ablauf-linie span { transform: none; } .ablauf .ablauf-punkt { transform: scale(1); } .ablauf .ablauf-schritte h3, .ablauf .ablauf-schritte p { opacity: 1; transform: none; } }

/* ---------------- SEO und Barrierefreiheit (18.09.): Sprunglink, sichtbarer Tastaturfokus, Footer-Spalten mit Standort, Bildmaße ---------------- */
.sprung { position: absolute; left: 16px; top: -80px; z-index: 200; background: var(--kobalt); color: #fff; font-weight: 700; padding: 10px 14px; border-radius: 8px; transition: top .15s; }
.sprung:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 3px; }
.fuss a:focus-visible, .knopf-voll:focus-visible, .dock-kontakt:focus-visible, .tabs button.aktiv:focus-visible { outline-color: #fff; outline-offset: 2px; }
.kachel input:focus-visible, .check-liste input:focus-visible { outline: none; } /* die Kachel bzw. der Kasten zeigt den Fokus */
.check-liste input:focus-visible + .check-kasten { outline: 3px solid var(--kobalt); outline-offset: 2px; }
.held-c-foto img, .ueber img, .held-raster figure img { width: 100%; height: auto; }
.fuss-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 14px; }
.fuss-spalten nav { display: block; }
.fuss-spalten b { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.fuss-spalten a, .fuss-spalten span, .fuss .fuss-spalten nav a { display: block; padding: 0; color: rgba(255, 255, 255, .88); margin-bottom: 5px; line-height: 1.4; } /* schlägt .fuss nav a (inline-block) */
.fuss-spalten address { font-style: normal; }
@media (max-width: 700px) { .fuss-spalten { grid-template-columns: 1fr; } }

/* ---------------- ÖNORM-Datenträger (ki-oenorm-angebote, 21.09.): Panels wie .sm-tool, Positionslisten als Raster ---------------- */
.oe-tabelle { padding: 6px 22px 10px; }
.oe-zeile { display: grid; grid-template-columns: 72px 1fr 90px 90px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #F0F3FA; font-size: 12.5px; }
.oe-zeile.oe-titel { color: #6B7A99; font-size: 11px; border-bottom: 1px solid #E3E7F0; }
.oe-zeile > span:first-child { color: #6B7A99; font-variant-numeric: tabular-nums; }
.oe-zeile b { font-weight: 600; } .oe-zeile b small { display: block; font-weight: 400; color: #6B7A99; font-size: 11px; }
.oe-zeile em { font-style: normal; color: #C7CEDD; }
.oe-zeile .oe-preis { font-variant-numeric: tabular-nums; } .oe-zeile .oe-preis small { display: block; color: #6B7A99; font-size: 10.5px; }
.oe-zeile .oe-neu { font-weight: 700; color: #15803D; } .oe-zeile .oe-neu small { color: #15803D; opacity: .8; }
.oe-spalten { display: grid; grid-template-columns: 200px 1fr; }
.oe-liste { border-right: 1px solid #EEF1F7; padding: 12px 12px 12px 22px; display: grid; align-content: start; gap: 4px; }
.oe-liste small { color: #6B7A99; font-size: 11px; margin-bottom: 4px; } .oe-liste span { font-size: 12px; padding: 6px 8px 6px 24px; position: relative; border-radius: 6px; }
.oe-liste span.ok::before { content: ""; position: absolute; left: 7px; top: 9px; width: 5px; height: 9px; border: solid #15803D; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.oe-liste span.aktiv { background: #EEF3FF; color: var(--kobalt); font-weight: 600; }
.oe-drei .oe-zeile { grid-template-columns: 1fr 160px 130px; }
.oe-vier .oe-zeile { grid-template-columns: 1fr 80px 50px 150px; }
.oe-fertig { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 22px; align-items: start; }
.oe-datei { display: flex; gap: 12px; align-items: center; border: 1px solid #EEF1F7; border-radius: 10px; padding: 12px; grid-column: 1 / -1; }
.oe-datei i { width: 34px; height: 42px; border-radius: 4px; background: var(--kobalt); position: relative; flex: none; } .oe-datei i::after { content: "onlv"; position: absolute; left: 0; right: 0; bottom: 5px; font-size: 8px; color: #fff; text-align: center; font-weight: 700; font-style: normal; }
.oe-datei b { display: block; font-size: 13.5px; } .oe-datei small { color: #6B7A99; font-size: 11.5px; }
.oe-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 12.5px; align-content: start; }
.oe-schritte li { padding-left: 24px; position: relative; } .oe-schritte li.ok::before { content: ""; position: absolute; left: 5px; top: 3px; width: 6px; height: 10px; border: solid #15803D; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.oe-summe { border: 1px solid #EEF1F7; border-radius: 10px; padding: 12px 14px; } .oe-summe small { display: block; color: #6B7A99; font-size: 11px; } .oe-summe b { font-size: 20px; display: block; margin: 2px 0 6px; } .oe-summe span { font-size: 11.5px; color: #6B7A99; line-height: 1.4; }

/* ---------------- Garantie dmenergy (21.09.): Übersicht im infinia-Look, Abfrageseite am Handy in Grün wie das Zertifikat ---------------- */
.mock-ga main { padding: 22px 18px; }
.mock-ga .ga-tabelle { width: 100%; table-layout: fixed; font-size: 10px; } .mock-ga .ga-tabelle th, .mock-ga .ga-tabelle td { padding: 8px 5px; overflow-wrap: anywhere; }
.mock-ga .ga-tabelle th:nth-child(1) { width: 17%; } .mock-ga .ga-tabelle th:nth-child(2) { width: 18%; } .mock-ga .ga-tabelle th:nth-child(3) { width: 13%; } .mock-ga .ga-tabelle th:nth-child(4) { width: 15%; } .mock-ga .ga-tabelle th:nth-child(5), .mock-ga .ga-tabelle th:nth-child(6) { width: 12%; } .mock-ga .ga-tabelle th:nth-child(7) { width: 13%; }
.mock-ga .ga-tabelle td:first-child, .mock-ga .ga-tabelle td:nth-child(5), .mock-ga .ga-tabelle td:nth-child(6), .mock-ga .ga-tabelle td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.mock-ga .ga-tabelle td:last-child em { padding: 2px 6px; }
.mock-ga .ga-tabelle td:first-child { color: #1E2A5A; font-weight: 600; }
.mock-phone.mock-gaq { --ga: #2F9E44; grid-template-rows: auto auto auto 1fr; background: #F4F7F5; color: #1F2937; }
.mock-gaq .gaq-kopf { background: var(--ga); color: #fff; padding: 18px 18px 16px; } .gaq-kopf b { display: block; font-size: 18px; letter-spacing: .02em; } .gaq-kopf span { font-size: 12.5px; opacity: .9; }
.gaq-status { display: flex; align-items: center; gap: 12px; margin: 16px 16px 0; padding: 14px; background: #fff; border-radius: 12px; border: 1px solid #DDEFE3; }
.gaq-status i { width: 34px; height: 34px; border-radius: 50%; background: var(--ga); position: relative; flex: none; } .gaq-status i::after { content: ""; position: absolute; left: 12px; top: 7px; width: 8px; height: 14px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.gaq-status b { display: block; font-size: 16px; color: var(--ga); } .gaq-status small { color: #6B7280; font-size: 12px; }
.gaq-daten { margin: 12px 16px 0; padding: 4px 14px; background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; }
.gaq-daten div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F0F2F4; font-size: 13px; } .gaq-daten div:last-child { border-bottom: 0; }
.gaq-daten dt { color: #6B7280; } .gaq-daten dd { margin: 0; font-weight: 600; text-align: right; }
.gaq-hinweis { margin: 14px 16px 0; font-size: 12.5px; color: #6B7280; }
.gaq-form { margin: 14px 16px 0; padding: 14px; background: #fff; border-radius: 12px; border: 1px solid #E5E7EB; display: grid; gap: 9px; }
.gaq-titel { font-size: 15px; } .gaq-sub { font-size: 11.5px; color: #6B7280; line-height: 1.35; margin-bottom: 2px; }
.gaq-feld { display: grid; gap: 3px; } .gaq-feld span { font-size: 11px; color: #6B7280; } .gaq-feld i { font-style: normal; display: block; border: 1px solid #D1D5DB; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; min-height: 32px; box-sizing: border-box; }
.gaq-knopf { display: block; text-align: center; background: var(--ga); color: #fff; font-weight: 700; padding: 11px; border-radius: 10px; font-size: 13px; margin-top: 4px; }

/* Dokumentation mit KI (21.09., Thomas): Ablage, Struktur-Vorgabe, Zusammenfassung, Berechtigungen — Werkzeug-Panels wie ÖNORM (.sm-tool), Beispieldaten */
.dk-zone { margin: 14px 22px 4px; border: 1.5px dashed #C7D2EA; border-radius: 10px; padding: 9px 14px; display: flex; align-items: center; gap: 10px; color: #6B7A99; font-size: 12.5px; background: #F8FAFF; }
.dk-zone i { width: 26px; height: 26px; border-radius: 8px; background: #EEF3FF; color: var(--kobalt); display: grid; place-items: center; font-style: normal; font-weight: 800; flex: none; }
.dk-dateien { padding: 4px 22px 6px; }
.dk-datei { display: grid; grid-template-columns: 26px 1fr 200px 118px; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid #F0F3FA; font-size: 12.5px; }
.dk-datei:last-child { border-bottom: 0; }
.dk-datei b { font-weight: 600; } .dk-datei b small { display: block; font-weight: 400; color: #6B7A99; font-size: 11px; }
.dk-ziel { color: #1E2A5A; } .dk-ziel em { font-style: normal; color: #9AA5BC; padding: 0 3px; }
.dk-ki { font-size: 11px; font-weight: 700; color: #15803D; background: #E6F7EE; padding: 4px 9px; border-radius: 999px; white-space: nowrap; justify-self: start; } .dk-ki.lauft { color: var(--kobalt); background: #EEF3FF; }
.dk-datei .nc-icon.tab { background: #1D6F42; } .dk-datei .nc-icon.text { background: #6B7A99; }
.dk-struktur { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 16px 22px; align-items: start; }
.dk-vorgabe { background: #F8FAFF; border: 1px solid #E3E7F0; border-radius: 10px; padding: 14px; font-size: 13px; line-height: 1.5; color: #1E2A5A; } .dk-vorgabe small { display: block; color: #6B7A99; font-size: 11px; margin-bottom: 6px; }
.dk-baum { font-size: 12.5px; display: grid; gap: 4px; align-content: start; } .dk-baum span { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; } .dk-baum span.ebene2 { padding-left: 30px; color: #4B5A78; }
.dk-baum span.sperre::after { content: "nur Geschäftsführung"; margin-left: auto; font-size: 10.5px; color: #B45309; background: #FEF3C7; padding: 2px 7px; border-radius: 999px; }
.dk-baum i { width: 16px; height: 13px; border-radius: 2px 3px 3px 3px; background: var(--kobalt); opacity: .8; flex: none; } .dk-baum span.ebene2 i { opacity: .45; }
.dk-zf { padding: 16px 22px; display: grid; grid-template-columns: 1fr 230px; gap: 18px; align-items: start; }
.dk-kurz { background: #F4F1FF; border: 1px solid #E4DDFB; border-radius: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: #1E2A5A; } .dk-kurz small { display: block; color: #7C3AED; font-weight: 700; font-size: 11px; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
.dk-fakten { display: grid; gap: 8px; align-content: start; font-size: 12.5px; } .dk-fakten div { border: 1px solid #EEF1F7; border-radius: 8px; padding: 7px 10px; } .dk-fakten small { display: block; color: #6B7A99; font-size: 10.5px; } .dk-fakten b { font-weight: 600; }
.dk-rechte { padding: 8px 22px 10px; }
.dk-rzeile { display: grid; grid-template-columns: 1fr repeat(4, 96px); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #F0F3FA; font-size: 12.5px; }
.dk-rzeile.dk-titel { color: #6B7A99; font-size: 11px; border-bottom: 1px solid #E3E7F0; text-align: center; } .dk-rzeile.dk-titel > span:first-child { text-align: left; }
.dk-rzeile b { font-weight: 600; } .dk-rzeile b small { display: block; font-weight: 400; color: #6B7A99; font-size: 11px; }
.dk-rzeile i { justify-self: center; width: 34px; height: 18px; border-radius: 999px; background: #CBD5E1; position: relative; } .dk-rzeile i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; } .dk-rzeile i.an { background: var(--kobalt); } .dk-rzeile i.an::after { left: 18px; }

/* Gutschein-Verwaltung Verein (21.09., Thomas): Folien nach dem echten infinia-Gutscheinmodul (Import, Verkauf = Ausgabe, Ausgabeliste, Einlösen, Auswertungen, Berechtigungen), infinia-Look wie Garantie; Beispieldaten */
.mock-gv main { padding: 18px 20px; gap: 10px; }
.gv-leiste { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-knopf { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--f, #6B7A99); padding: 6px 9px; border-radius: 6px; white-space: nowrap; }
.gv-kopf { display: grid; grid-template-columns: 1.2fr 1fr 84px 104px auto; gap: 8px; align-items: end; } /* Datum und Belegnummer fest breit, sonst schneidet die Ellipse mitten in der Nummer ab */
.gv-feld { display: grid; gap: 2px; font-size: 11px; min-width: 0; } .gv-feld small { color: #6B7A99; font-size: 9.5px; } .gv-feld b { font-weight: 600; border: 1px solid #C7D2EA; border-radius: 4px; padding: 5px 7px; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gv-feld b.leer { color: #9AA5BC; font-weight: 400; }
.gv-summe { font-size: 11px; color: #6B7A99; white-space: nowrap; padding-bottom: 6px; }
.gv-tabs { display: flex; gap: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #6B7A99; border-bottom: 1px solid #E3E7F0; } .gv-tabs span { padding: 4px 2px 6px; } .gv-tabs span.aktiv { color: #E83FAA; border-bottom: 2px solid #E83FAA; margin-bottom: -1px; }
.mock table.gv-tabelle { font-size: 11px; table-layout: fixed; } .gv-tabelle th, .gv-tabelle td { padding: 6px 10px; } .gv-tabelle th:first-child, .gv-tabelle td:first-child { width: 26px; } .gv-tabelle th:last-child, .gv-tabelle td:last-child { text-align: right; width: 80px; font-variant-numeric: tabular-nums; }
.gv-tabelle td b { font-weight: 600; } .gv-tabelle td small { color: #6B7A99; } .gv-tabelle td.gv-mehr { color: #6B7A99; font-style: italic; text-align: left; }
.gv-muell { display: inline-block; width: 9px; height: 11px; border: 1.5px solid #D93025; border-top-width: 3px; border-radius: 2px; }
.gv-dialog { background: #fff; border: 1px solid #E3E7F0; border-radius: 10px; box-shadow: 0 16px 34px -18px rgba(20, 40, 92, .35); padding: 14px 16px; display: grid; gap: 10px; max-width: 470px; }
.gv-dialog > b { font-size: 14px; } .gv-hinweis { font-size: 10px; color: #6B7A99; } .gv-dialog .gv-leiste { justify-content: flex-end; }
.gv-import { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.mock table.gv-log { font-size: 10px; } .gv-log th, .gv-log td { padding: 5px 8px; } .gv-log td:last-child { font-variant-numeric: tabular-nums; }
.gv-titel { display: block; font-size: 9.5px; font-weight: 700; color: #6B7A99; margin-bottom: 4px; }
.gv-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gv-kachel { background: #fff; border: 1px solid #E3E7F0; border-radius: 10px; padding: 9px 12px; display: grid; gap: 3px; } .gv-kachel small { font-size: 8.5px; color: #C2410C; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .gv-kachel b { font-size: 12px; } .gv-kachel span { font-size: 9.5px; color: #6B7A99; }
.gv-kachel.aktiv { border-color: #E83FAA; box-shadow: 0 0 0 2px #FCE7F3 inset; }
.gv-bestand { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gv-bestand div { background: #fff; border: 1px solid #E3E7F0; border-radius: 10px; padding: 8px 10px; } .gv-bestand b { display: block; font-size: 11px; } .gv-bestand span { font-family: var(--font-d); font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.gv-reihe { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: center; }
.gv-torte { display: block; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(#E83FAA 0 52%, #2A52BE 52% 82%, #22C55E 82% 100%); justify-self: center; }
.gv-rechte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gv-recht { background: #fff; border: 1px solid #E3E7F0; border-radius: 10px; padding: 10px 12px; display: grid; gap: 5px; font-size: 10px; align-content: start; } .gv-recht b { font-size: 11px; } .gv-recht span { color: #6B7A99; } .gv-recht small { font-size: 8.5px; font-weight: 700; color: #6B7A99; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.gv-chips { display: flex; flex-wrap: wrap; gap: 4px; } .gv-chips i { font-style: normal; background: #EEF1F6; color: #14285C; border-radius: 999px; padding: 3px 8px; font-size: 9.5px; font-weight: 600; } .gv-chips i.plus { background: transparent; border: 1px dashed #C7D2EA; color: #2A52BE; }
.mock-blatt.gv-blatt { padding: 46px 58px 0; }
.gv-brief { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; font-size: 10.5px; } .gv-brief b { display: block; font-size: 13px; color: #2A52BE; } .gv-brief span { display: block; color: #444; }
.gv-blatt h4 { margin-bottom: 4px; } .gv-blatt .rg-sub { margin-bottom: 14px; }
.mock-blatt table.gv-liste { table-layout: fixed; border: .7px solid #DDD; }
.mock-blatt .gv-liste th { background: #F3F4F6; color: #222; padding: 6px 8px; } .mock-blatt .gv-liste td { padding: 6px 8px; border-bottom: .6px solid #EEE; color: #222; }
.mock-blatt .gv-liste th:nth-child(1), .mock-blatt .gv-liste td:nth-child(1) { width: 9%; text-align: left; } .mock-blatt .gv-liste th:nth-child(2), .mock-blatt .gv-liste td:nth-child(2) { width: 36%; text-align: left; } .mock-blatt .gv-liste th:nth-child(3), .mock-blatt .gv-liste td:nth-child(3) { width: 17%; text-align: right; } .mock-blatt .gv-liste th:nth-child(4), .mock-blatt .gv-liste td:nth-child(4) { width: 38%; text-align: left; }
.mock-blatt .gv-liste td.gv-mehr { color: #666; font-style: italic; text-align: left; }
.gv-fuss { position: absolute; left: 58px; right: 58px; bottom: 60px; border-top: .6px solid #DDD; padding-top: 6px; font-size: 8px; color: #666; display: flex; justify-content: space-between; }