/* IntoInside, Startseite (index.html), seit 26.10.2026 im Stil der Vorlage "Agency / The7" vom
   Juni (klar, hell, kraeftiges Blau, Feather-Icons, kein Glas, kein Glow). Wird NUR von der
   Startseite geladen, nach app.css, und baut auf deren Tokens (:root) und Komponenten auf.
   Bewegung wie in der Vorlage: Wechselwort einmal durch, hochzaehlende Zahlen, Ring und Balken
   der Performance-Karte, Hover. Kein Einblenden beim Scrollen. Die fruehere Fassung mit
   Explosionszeichnung liegt nur noch in den Sicherungen.
   Praefixe: sch- Fuenf Schichten, lm-/lmt- Live-Messung, cnt- Zaehler, ab Ueber mich,
   svc-more Chip-Zeile, ww- Wegweiser.
   Reihenfolge: Basis -> Abschnitte -> reduzierte Bewegung -> Druck. */

/* ===== Basis ===== */
/* Anker-Spruenge und der Browser-Fokus landen sonst unter dem festen 78px-Header (WCAG 2.4.11). */
html{scroll-padding-top:78px}
/* Den deckenden Header schaltet app.js beim Scrollen ein. Ohne JS bliebe er durchsichtig. */
@media(scripting:none){header{background:rgba(255,255,255,.92);border-bottom-color:var(--line)}}
/* Versal-Texte bekommen wie in app.css die Versal-Ersatzschrift (gegen Layout-Spruenge). */
.sch-k,.ww-pk span{font-family:var(--font-caps)}

/* ===== Hero ===== */
/* Zweispaltig passt "fuer Unternehmen." mit den 72px aus app.css (.hero.xl) nicht in die Spalte,
   "fuer" stuende allein in einer Zeile. Gemessen passt die Zeile bis Spaltenbreite / 8,2 (54px bei
   941px Fensterbreite, 70px ab 1200px); 5.4vw bis 66px haelt rund 5 % Abstand, auch fuer die
   Ersatzschrift. Einspaltig bleibt die Groesse der Vorlage. */
@media(min-width:941px){.hero.xl h1{font-size:clamp(38px,5.4vw,66px)}}
/* Ohne JS fuellt app.js Ring und Balken nicht, dann gleich den Endstand zeigen
   (351.86 * (1 - 0.98) = 7.04). */
@media(scripting:none){#arc{stroke-dashoffset:7.04}.perf .bar i[data-w="90"]{width:90%}.perf .bar i[data-w="100"]{width:100%}}
/* Titelzeile der Karten umbrechen statt kuerzen: bei 320px stuende sonst "Perform...". */
@media(max-width:420px){.card-panel .top span{white-space:normal}}

/* ===== Fuenf Schichten ===== */
.sch-head{margin-bottom:46px}
.sch{list-style:none;max-width:1040px;margin:0 auto;border-top:1px solid var(--line)}
.sch-i{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px 20px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.sch .sq{width:52px;height:52px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.sch .sq .ico{width:25px;height:25px}
.sch-i h3{font-size:clamp(20px,2.2vw,24px)}
.sch-k{display:block;margin-bottom:6px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sch-b{grid-column:1/-1}
.sch-b p{max-width:36em}
.sch-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px}
.sch-links a{font-size:15px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){
  .sch-i{grid-template-columns:52px minmax(0,5fr) minmax(0,7fr);column-gap:28px;align-items:start}
  .sch-b{grid-column:auto}
}
.sch-out{margin-top:clamp(40px,5vw,64px);text-align:center}
.sch-claim{font-size:clamp(28px,3.6vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.sch-claim em{font-style:normal;color:var(--accent)}
/* Schmal: der zweite Satz in eigener Zeile, sonst bliebe "Von" allein am Zeilenende. */
@media(max-width:600px){.sch-claim em{display:block}}
.sch-sub{margin-top:12px;color:var(--muted)}
.sch-out .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:26px}

/* ===== Live-Messung als helle Tabelle ===== */
.lm-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:center}
/* minmax(0,1fr) statt 1fr: Sonst bestimmt der laengste Messwert die Spaltenbreite. */
@media(max-width:900px){.lm-grid{grid-template-columns:minmax(0,1fr)}}
.lm h2 em{font-style:normal;color:var(--accent)}
.lm-facts{list-style:none;display:grid;gap:12px;margin-top:26px}
.lm-facts li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.lm-facts .ico{width:19px;height:19px;flex:0 0 auto;margin-top:3px;color:var(--accent)}
/* "Live" in Gruen auf weiss (5.35:1). Die Bewertung steht immer auch als Wort da, nie nur als
   Farbe. Seit 26.10.2026 als Badge wie Bootstrap 5.3 (wie .badge in app.css): gut #198754 mit
   Weiss (4.53:1), mittel #ffc107 mit Schwarz (12.6:1), schwach #dc3545 mit Weiss (4.53:1). */
.lmt .top em{color:var(--ok)}
.lmt-list{padding:4px 22px}
/* Mindesthoehe statt fester Hoehe: Der Text steht nach load fest (CLS 0), lange Werte brechen um
   statt abgeschnitten zu werden (WCAG 1.4.10 und 1.4.12). */
.lmt-row{display:flex;align-items:baseline;justify-content:space-between;gap:2px 16px;min-height:48px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.lmt-row:last-child{border-bottom:0}
.lmt-row dt{flex:0 0 auto;white-space:nowrap;font-weight:600;color:var(--text)}
.lmt-row dd{min-width:0;overflow-wrap:anywhere;text-align:right;font-weight:700;color:var(--ink)}
.lmt .lm-r{display:inline-block;margin-left:6px;padding:.35em .65em;font-size:.75rem;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.375rem}
.lmt .lm-good{background:#198754;color:#fff}
.lmt .lm-mid{background:#ffc107;color:#000}
.lmt .lm-bad{background:#dc3545;color:#fff}
.lmt .lm-dim{font-weight:400;color:var(--muted)}
.lmt-note{padding:14px 22px 18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
/* Ohne JS misst hier nichts: keine leeren Zeilen, kein "Live"-Schild, keine Fussnote. */
@media(scripting:none){.lmt-list,.lmt .top em,.lmt-foot{display:none}}
@media(max-width:420px){
  .lmt-list{padding:4px 16px}
  .lmt-row{flex-direction:column;align-items:flex-start;gap:0;min-height:72px}
  .lmt-row dt{white-space:normal}
  .lmt-row dd{text-align:left}
}

/* ===== Zahlen ===== */
/* Im DOM steht nur der echte Wert (.cnt-wert), fuer Vorlesehilfen und Suchmaschinen. Beim
   Hochzaehlen (.cnt-anim, start.js) zeigt ein Pseudo-Element die laufende Zahl, der echte Wert
   haelt unsichtbar die Breite (CLS). */
.cnt{display:inline-grid;justify-items:start}
.cnt>*{grid-area:1/1}
@supports (content:"x" / ""){
  .cnt.cnt-anim>*{opacity:0}
  .cnt.cnt-anim::after{content:attr(data-show) / "";grid-area:1/1}
}

/* ===== Ueber mich ===== */
/* Weiss statt --soft: Darunter folgen die Leistungen auf --soft. */
.ab{background:var(--bg)}
.ab .lead{margin-top:20px}
.ab .quote{margin-top:26px}
/* Das Foto nimmt den Platz der Initialen-Kachel aus der Vorlage ein (.avatar, 200px, Radius 24). */
.ab .avatar{object-fit:cover;background:var(--soft)}

/* ===== Leistungen: Chip-Zeile zu den uebrigen Leistungsseiten ===== */
.svc-more-h{margin-top:42px;text-align:center;font-size:15px;color:var(--muted)}
.svc-more{list-style:none;margin-top:14px}
.strip a.chip{display:inline-block;transition:border-color .15s,color .15s}
.strip a.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ===== Wegweiser ===== */
.ww-box{max-width:960px;margin:0 auto}
.ww-q{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ww-q label{position:relative;cursor:pointer}
/* Unsichtbar, aber so gross wie der Chip (nicht width:0, damit VoiceOver das Radio zuverlaessig
   ansteuert). Beim Tabben scrollt der Browser so den ganzen Chip ins Bild. */
.ww-q input{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.ww-q span{display:inline-block;padding:10px 18px;border:1px solid var(--field);border-radius:100px;background:#fff;font-size:15px;font-weight:700;color:var(--text);transition:background .15s,color .15s,border-color .15s}
.ww-q label:hover span{border-color:var(--accent);color:var(--accent)}
.ww-q input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.ww-q input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.ww-ans{margin-top:30px}
.ww-a,.ww-empty{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px)}
.ww-a+.ww-a{margin-top:16px}
.ww-a h3{font-size:clamp(20px,2.2vw,24px)}
.ww-a p{margin-top:10px;max-width:66ch}
.ww-a .ww-pk{margin-top:16px;font-size:15px;font-weight:600;color:var(--ink)}
.ww-pk span{display:inline-block;margin-right:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ww-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px}
.ww-more{font-size:15px;color:var(--muted)}
.ww-more a{font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Browser ohne :has() sehen die Antworten als schlichte Liste, der Leerzustand ergibt dort keinen Sinn. */
.ww-empty{display:none}
.ww-empty a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Alle Antworten liegen in EINER Grid-Zelle: Die Hoehe richtet sich nach der laengsten, beim
   Wechsel springt nichts. Funktioniert auch ohne JS. Der Wechsel ist sofort, ohne Ueberblenden. */
@supports selector(:has(*)){
  .ww-ans{display:grid}
  .ww-ans>*{grid-area:1/1}
  .ww-a+.ww-a{margin-top:0}
  .ww-empty{display:flex;align-items:center;justify-content:center;text-align:center;background:transparent;border-style:dashed;border-color:var(--field);color:var(--muted)}
  .ww-a{visibility:hidden}
  .ww:has(#ww-r1:checked) #ww-a1,.ww:has(#ww-r2:checked) #ww-a2,.ww:has(#ww-r3:checked) #ww-a3,.ww:has(#ww-r4:checked) #ww-a4,.ww:has(#ww-r5:checked) #ww-a5,
  .ww:has(#ww-r6:checked) #ww-a6,.ww:has(#ww-r7:checked) #ww-a7,.ww:has(#ww-r8:checked) #ww-a8,.ww:has(#ww-r9:checked) #ww-a9,.ww:has(#ww-r10:checked) #ww-a10,.ww:has(#ww-r11:checked) #ww-a11,.ww:has(#ww-r12:checked) #ww-a12,.ww:has(#ww-r13:checked) #ww-a13{visibility:visible}
  .ww:has(.ww-q input:checked) .ww-empty{visibility:hidden}
}
/* Themen-Chips im Formular: Das versteckte Input (app.css: width:0) ueber den ganzen Chip legen,
   damit der Browser beim Tabben den Chip vollstaendig ins Bild scrollt. */
.scope label{position:relative}
.scope input{left:0;top:0;width:100%;height:100%}
/* Meldung nach "Dazu anfragen" (--ok auf weiss 5.35:1). */
.ww-note{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ok)}
.ww-note:empty{display:none}

/* ===== Projekte ===== */
/* Ohne JS tun die Filter nichts, also gar nicht erst anbieten. */
@media(scripting:none){.tabs{display:none}}

/* ===== Reduzierte Bewegung (muss nach allen Abschnitten stehen) ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ww-q span,.strip a.chip{transition:none}
}

/* ===== Druck ===== */
@media print{
  .cc,.ww-q,.tabs{display:none!important}
  .ww-ans{display:block!important}
  .ww-empty{display:none!important}
  .ww-a{visibility:visible!important}
  .ww-a+.ww-a{margin-top:16px!important}
  /* Zaehler, die nie im Bild waren, stuenden sonst als "0" auf dem Papier. */
  .cnt.cnt-anim>*{opacity:1!important}
  .cnt.cnt-anim::after{content:none!important}
  /* Dunkle Baender mit weisser Schrift: Hintergrund mitdrucken, sonst Weiss auf Weiss. */
  .stats,.cta{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}