/* ===========================================================================
   Pipeflow „Start" — Easy Onboarding, helle Fassung (19.09.2026)
   Designplan: docs/EASY_ONBOARDING_DESIGN.md
   Ablauf-Vorbild und Farbstimmung: ads.openai.com, und damit zugleich der
   Charakter des bestehenden Panels (das ebenfalls weiss ist). Die einzige
   Farbe auf der Seite ist die Markenfarbe des Kunden - sie steckt in den
   Beitragskarten, nicht im Interface.

   Umschalten auf Dunkel heisst: nur den :root-Block unten tauschen. Jede
   Regel darunter benutzt ausschliesslich diese Tokens, keine festen Farben -
   deshalb ist --aktion/--aktion-text bewusst nach der ROLLE benannt
   (Flaeche und Schrift der Hauptaktion), nicht nach dem Farbwert.
   =========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InstrumentSerif-normal-latin.woff2") format("woff2");
}

:root {
  /* --- sechs benannte Werte, mehr hat das Interface nicht --- */
  --grund:       #faf9f7;  /* Seitenhintergrund: ruhiges Papier, damit weisse Karten tragen */
  --flaeche:     #fbfbfa;  /* Karten, Felder, alles Erhobene */
  --linie:       #e5e5e2;  /* Trennlinien und Raender */
  --text:        #0d0d0d;  /* Fliesstext und Ueberschriften */
  --text-2:      #5d5d5d;  /* Sekundaertext, Beschriftungen */
  --aktion:      #0d0d0d;  /* Flaeche der Hauptaktion: schwarze Pille */
  --aktion-text: #ffffff;  /* Schrift darauf */
  --wash:        #f2f2f0;  /* neutrale Hinterlegung, z. B. hinter einem Bild */
  /* Seit 24.09.2026 (Dark Mode): bisher fest eingetragene Werte als Tokens - im Hellmodus exakt
     dieselben Farben wie vorher. */
  --karte:       #ffffff;  /* Karten, Felder, Blaetter */
  --karte-glas:  rgba(255, 255, 255, .92);
  --linie-stark: #d4d4d0;  /* Schalter aus, gestrichelte Raender */
  --text-3:      #b8b5ae;  /* Punkte, Platzhalter */
  --schimmer:    #e8e8e5;
  --auf-text:    #ffffff;  /* Schrift auf var(--text)-Flaechen */
  --tk-text:     #1d1d1b;
  --tk-rest:     #3a3a37;
  --tk-mehr:     #666666;
  --schatten:    rgba(13, 13, 13, .18);
  --schleier:    rgba(13, 13, 13, .35);
  /* Einfallendes Licht: zwei sehr schwache Lichtkegel oben. Ohne erkannte Markenfarben ein
     neutraler Grauton; sobald die Website Farben hergibt, setzt start.js diese beiden Werte
     auf die Marke um - mit niedriger Deckkraft, damit es Licht bleibt und kein Hintergrund. */
  /* Ohne erkannte Markenfarben bleibt es ein sehr schwaches Grau - dasselbe wie bisher. */
  --licht-1: rgba(13, 13, 13, .05);
  --licht-2: rgba(13, 13, 13, .03);
  --licht-3: rgba(13, 13, 13, .02);
  /* Zwei Signalfarben, ausschliesslich Bedeutung, nie Dekoration */
  --gut:     #137a3f;
  --schlecht:#b42318;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;

  --t-display: clamp(32px, 7vw, 46px);
  --t-h2: 21px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;

  --spalte: 560px;
  --spalte-breit: 1080px;
  --rand: 16px;
  --tap: 44px;

  --dauer: 320ms;
  --kurve: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--grund); }
body {
  margin: 0; color: var(--text);
  /* Die Lichtkegel haengen am SEITENANFANG, nicht am Fenster (kein background-attachment:
     fixed): auf langen Seiten scrollt das Licht weg, statt ueber den Beitragskarten zu liegen,
     und am Handy spart es das staendige Neuzeichnen. rgba(255,255,255,0) statt `transparent`,
     weil Safari `transparent` als Schwarz interpoliert und dann ein grauer Schleier entsteht. */
  background-color: var(--grund);
  /* Drei Kegel statt zwei (19.09.2026): zwei oben wie bisher, dazu ein sehr weiter, sehr
     schwacher weiter unten. Der dritte ist der Grund, warum die Farbe jetzt auch nach dem
     ersten Bildschirm noch da ist, ohne dass irgendwo eine Flaeche entsteht. Die Karten
     bleiben reinweiss - dadurch waechst ihr Abstand zum Grund mit, statt zu schrumpfen. */
  background-image:
    radial-gradient(120% 70% at 12% -2%, var(--licht-1), rgba(255, 255, 255, 0) 72%),
    radial-gradient(95% 55% at 96% 2%, var(--licht-2), rgba(255, 255, 255, 0) 66%),
    radial-gradient(140% 60% at 50% 100%, var(--licht-3), rgba(255, 255, 255, 0) 70%);
  background-repeat: no-repeat;
  background-size: 100% 1100px, 100% 900px, 100% 100%;
  background-attachment: scroll, scroll, fixed;
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.5;
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: 1.06; }
h2 { font-size: var(--t-h2); line-height: 1.2; }
h3 { font-size: 17px; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; letter-spacing: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--aktion); outline-offset: 3px; border-radius: 4px; }
.muted { color: var(--text-2); }
.small { font-size: var(--t-small); }
[hidden] { display: none !important; }

/* --- Splash: unveraendert uebernommen, nur auf dunklem Grund --- */
#splash { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.splash-panel { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--aktion); transition: transform var(--dauer) steps(7, end); }
.splash-left { left: 0; }
.splash-right { right: 0; }
.splash-content { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--aktion-text); transition: opacity 200ms; }
.splash-word { font-family: var(--serif); font-size: clamp(34px, 9vw, 60px); letter-spacing: -.02em; }
.splash-sub { font-size: var(--t-small); opacity: .65; margin-top: 6px; }
#splash.splash-done .splash-left { transform: translateX(-100%); }
#splash.splash-done .splash-right { transform: translateX(100%); }
#splash.splash-done .splash-content { opacity: 0; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--aktion); color: var(--aktion-text); padding: 8px 12px; border-radius: 999px; z-index: 400; }
.skip-link:focus { left: 12px; }
.sandbox-banner { background: #fdf2e0; border-bottom: 1px solid #e8c468; color: #6b4e12; font-size: var(--t-small); text-align: center; padding: 8px var(--rand); }

/* ---------------------------------------------------------------------------
   Kopfzeile: auf JEDEM Bildschirm links die Wortmarke, darunter die Zeile
   "powered by Paul Hölzl". Rechts, erst ab Dashboard, ein einziger
   Zugang zum Konto. Sonst nichts.
   --------------------------------------------------------------------------- */
.top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px var(--rand) 10px; max-width: var(--spalte-breit); margin: 0 auto;
}
/* 44 px, weil der Schriftzug ein Link auf den Start ist - gemessen waren es 42
   (27 px Name + 4 + 11 px Zusatz). Die Schrift bleibt gleich, nur die Flaeche waechst. */
.marke { text-decoration: none; display: flex; flex-direction: column; justify-content: center; min-height: 44px; line-height: 1; }
.marke-name { font-family: var(--serif); font-size: 27px; letter-spacing: -0.01em; display: block; }
.marke-sub { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .04em; color: var(--text-2); white-space: nowrap; }
.top-actions { display: flex; gap: 8px; align-items: center; padding-top: 4px; }

/* --- Buehne --- */
.stage { padding: 20px var(--rand) 96px; margin: 0 auto; max-width: var(--spalte); min-height: 60vh; }
.stage.breit { max-width: var(--spalte-breit); }
.stage:focus { outline: none; }
.screen.enter { animation: auf var(--dauer) var(--kurve) both; }
@keyframes auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lede { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.lede strong { color: var(--text); font-weight: 500; }
.hero { padding-top: 4vh; }
.hero h1 { max-width: 15ch; }
@media (min-width: 720px) { .hero { padding-top: 8vh; } }

/* --- Felder --- */
.field { margin-top: 26px; }
.field label { display: block; font-size: var(--t-small); color: var(--text-2); margin-bottom: 8px; }
.input, .textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 12px; min-height: 54px; padding: 0 16px;
  transition: border-color 120ms, box-shadow 120ms;
}
.textarea { min-height: 128px; padding: 15px 16px; line-height: 1.55; resize: vertical; }
.input:focus, .textarea:focus { border-color: var(--aktion); outline: none; box-shadow: 0 0 0 1px var(--aktion); }
.input::placeholder, .textarea::placeholder { color: #9a9a9a; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--schlecht); box-shadow: 0 0 0 1px var(--schlecht); }
.error { color: var(--schlecht); font-size: var(--t-small); margin-top: 8px; }
.error:empty { display: none; }
.hint { color: var(--text-2); font-size: var(--t-small); margin-top: 14px; line-height: 1.55; }

/* Textfeld mit eingebautem KI-Knopf unten rechts (Bildschirm 2b) */
/* Der Vorschlag-Knopf steht UNTER dem Feld, nicht darin (23.09.2026).
   Vorher trug er .ki-knopf und damit `position:absolute; bottom:10px` - bezogen auf das ganze
   .field, also auf Beschriftung PLUS Textfeld PLUS Hinweiszeile. Wo kein Hinweis steht, sitzt
   er dadurch zufaellig an der Unterkante des Textfelds; steht einer da (Bildwunsch: immer),
   rutscht er auf den Rahmen und wirkt halb ausserhalb. Und er ist auf diesem Bildschirm der
   wichtigste Knopf: vor einem leeren Feld weiss niemand, was er schreiben soll.
   Auf 360 Pixel nimmt er die volle Breite, der Hinweis rutscht darunter. */
.feld-aktion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.feld-aktion .hint { margin-top: 0; flex: 1 1 220px; min-width: 0; }

.feld-mit-ki { position: relative; }
.feld-mit-ki .textarea { padding-bottom: 58px; }
.feld-mit-ki .ki-knopf { position: absolute; right: 10px; bottom: 10px; }

/* --- Buttons: Pille, primaer weiss auf dunkel --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 22px; border-radius: 999px; border: 1px solid var(--aktion);
  background: var(--aktion); color: var(--aktion-text); font-size: 15px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: opacity 120ms, transform 120ms, background 120ms;
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.985); }
.btn[disabled], .btn.is-busy { opacity: .45; cursor: default; pointer-events: none; }
.btn.secondary { background: transparent; color: var(--text); border-color: var(--linie); }
.btn.secondary:hover { border-color: var(--text-2); opacity: 1; }
.btn.lg { min-height: 54px; font-size: 16px; }
.btn.sm { min-height: var(--tap); padding: 0 16px; font-size: 14px; }
.link {
  background: none; border: 0; padding: 12px 0; min-height: var(--tap); color: var(--text-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 15px;
  display: inline-flex; align-items: center; text-align: left;
}
.link:hover { color: var(--text); }
.actions { margin-top: 26px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.actions .btn { width: 100%; }
@media (min-width: 480px) { .actions .btn { width: auto; min-width: 240px; } }

/* --- Bildschirm 1: Anmeldeknoepfe --- */
.auth-liste { margin-top: 30px; display: grid; gap: 10px; }
.auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  min-height: 54px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 500;
  background: var(--karte); color: var(--text); border: 1px solid var(--linie); text-decoration: none;
  white-space: nowrap; transition: border-color 120ms, background 120ms;
}
/* Bei 360 px muss „Mit Microsoft fortfahren" samt Hinweis in EINE Zeile passen. */
@media (max-width: 400px) { .auth-btn { font-size: 14px; gap: 9px; padding: 0 13px; } }
.auth-btn:hover { border-color: var(--text-2); background: var(--wash); }
.auth-btn .logo { width: 20px; height: 20px; flex: none; }
.auth-btn.kommt-noch { cursor: default; color: var(--text-2); }
.auth-btn.kommt-noch:hover { border-color: var(--linie); background: var(--flaeche); }
.auth-btn .bald { margin-left: auto; font-size: var(--t-micro); color: var(--text-2); font-weight: 400; white-space: nowrap; }
/* Der E-Mail-Weg: gleiche Breite und Hoehe wie die Anbieter-Knoepfe, aber ohne Fuellung und in
   der Sekundaerfarbe - sekundaer wird ueber Gestaltung gesagt, nicht ueber eine andere Breite. */
.auth-btn.mail-weg { background: transparent; color: var(--text-2); font-weight: 400; }
.auth-btn.mail-weg:hover { background: var(--wash); color: var(--text); border-color: var(--text-2); }
.auth-schon { margin-top: 16px; font-size: var(--t-small); color: var(--text-2); line-height: 1.5; }
.auth-link { font-size: var(--t-small); padding: 4px 0; min-height: var(--tap); color: var(--text); }
.auth-eintrag { display: grid; gap: 6px; }
.auth-notiz { font-size: var(--t-small); color: var(--text-2); padding: 0 4px; line-height: 1.45; }
.auth-btn[disabled] { cursor: default; }
.auth-trenner { margin: 22px 0 14px; display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: var(--t-small); }
.auth-trenner::before, .auth-trenner::after { content: ""; height: 1px; background: var(--linie); flex: 1; }

/* --- Karte „Weiter als …" --- */
.konto-karte {
  margin-top: 30px; width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  border: 1px solid var(--linie); border-radius: 16px; padding: 16px; background: var(--karte); cursor: pointer;
  transition: border-color 120ms;
}
.konto-karte:hover { border-color: var(--text-2); }
.konto-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--aktion); color: var(--aktion-text); display: grid; place-items: center; font-weight: 500; flex: none; }
.konto-karte strong { display: block; font-weight: 500; }
.konto-karte .pfeil { margin-left: auto; color: var(--text-2); }

/* --- Bildschirm 3: Fortschritt --- */
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 2px; }
.step { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.step:last-child { border-bottom: 0; }
.step-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linie); display: grid; place-items: center; margin-top: 2px; color: var(--aktion-text); font-size: 12px; }
.step.is-done .step-mark { background: var(--aktion); border-color: var(--aktion); animation: pop var(--dauer) var(--kurve) both; }
.step.is-active .step-mark { border-color: var(--aktion); }
.step.is-active .step-mark::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--aktion); animation: puls 1.2s ease-in-out infinite; }
.step.is-open { color: var(--text-2); }
.step-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.step-sub { font-size: var(--t-small); color: var(--text-2); overflow-wrap: anywhere; }
.step-farben { display: inline-flex; gap: 6px; align-items: center; margin-top: 2px; }
.step-farbe { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--linie); }
@keyframes pop { from { transform: scale(.5); } to { transform: scale(1); } }
@keyframes puls { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------------------
   Die Woche. Der Beitrag ist der Held: groesstes Element, einziger Rahmen,
   einzige Farbe. Leere Tage gibt es nicht - was nicht geplant ist, steht nicht da.
   --------------------------------------------------------------------------- */
.woche { margin-top: 26px; display: grid; gap: 26px; }
.tag { display: grid; gap: 12px; }
.tag-kopf { display: flex; align-items: baseline; gap: 10px; }
.tag-kopf strong { font-weight: 500; font-size: 15px; }
.tag-kopf .muted { font-size: var(--t-small); }
.tag-posts { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .stage.breit .tag { grid-template-columns: 132px 1fr; align-items: start; }
  .stage.breit .tag-kopf { flex-direction: column; gap: 2px; position: sticky; top: 14px; }
  .stage.breit .tag-posts { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
}

.post {
  /* Reines Weiss, nicht die leicht getoente Flaeche: im oberen Lichtbereich wuerde eine
     Beitragskarte sonst mit dem Hintergrund verschwimmen. */
  border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; background: var(--karte);
  animation: auf var(--dauer) var(--kurve) both; display: grid; align-content: start;
}
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; font-size: var(--t-micro); font-weight: 500; }
.chan { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.chan::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chan.linkedin::before { border-radius: 2px; }
.chan.ig_story::before { border-radius: 1px; width: 5px; height: 10px; }
.status { color: var(--text-2); font-weight: 400; }
.status.ok { color: var(--gut); }
.media { position: relative; width: 100%; background: var(--wash); container-type: inline-size; }
.media.feed { aspect-ratio: 4 / 5; }
.media.story { aspect-ratio: 9 / 16; }
.media img { width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter, solange das Bild noch fehlt: gebaut wie das echte Bild (Markenverlauf,
   Schlagzeile in der Bildschrift, gedrehtes Wasserzeichen) - kein grauer Kasten. */
.kachel { position: absolute; inset: 0; background: var(--kachel-bg, #0a0e1a); color: #fff; overflow: hidden; }
.kachel-h { position: absolute; left: 11%; right: 21%; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: clamp(20px, 8.5cqw, 42px); line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
/* Der Firmenname auf der Platzhalterkachel - waagrecht unten links, wie im fertigen Bild
   (23.09.2026). Vorher stand hier die alte Fassung von vor dem 19.09.: um 90 Grad gedreht am
   rechten Rand mit 26 % Deckkraft. Das Bild selbst setzt den Namen seit dem 19.09. waagrecht
   unten links - die Vorschau zeigte also etwas, das es nicht mehr gibt, und weil der gedrehte
   Text mit transform-origin an der rechten unteren Ecke haengt und nicht umbricht, lief er aus
   der Kachel heraus: bei "karriere.at" blieb sichtbar ".at", was wie ein abgeschnittenes Logo
   aussieht. Genau so gemeldet. */
.kachel-wm {
  position: absolute; left: 18%; bottom: 5.5%; font-weight: 600;
  font-size: clamp(9px, 4.2cqw, 20px); opacity: .92; white-space: nowrap;
  letter-spacing: -.01em; max-width: 64%; overflow: hidden; text-overflow: ellipsis;
}
.kachel-notiz { position: absolute; left: 10px; bottom: 10px; background: var(--karte-glas); backdrop-filter: blur(4px); color: var(--text); font-size: var(--t-micro); padding: 5px 9px; border-radius: 999px; }
.skeleton { position: absolute; inset: 0; background: linear-gradient(100deg, var(--wash) 30%, var(--schimmer) 50%, var(--wash) 70%); background-size: 200% 100%; animation: schimmer 1.6s linear infinite; display: grid; place-items: center; color: var(--text-2); font-size: var(--t-small); }
@keyframes schimmer { to { background-position: -200% 0; } }
.post-body { padding: 13px 14px 14px; display: grid; gap: 6px; }
.post-h { font-size: 17px; font-weight: 500; }
.post-c { color: var(--text-2); font-size: var(--t-small); line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post.is-open .post-c { display: block; }
.post-more { justify-self: start; padding: 11px 0; min-height: 44px; font-size: var(--t-small); }

/* Freigabekarte (20.09.2026): offen zeigt sie den Beitrag so, wie er rausgeht - ganzer Text mit
   Hashtags und das Bild ungeschnitten. Zugeklappt bleibt sie der kurze Ueberblick. Nur hier,
   damit die Wochenansicht ihre ruhigen gleich hohen Karten behaelt. */
.media-taste { display: block; width: 100%; padding: 0; border: 0; background: var(--wash); cursor: pointer; }

/* Das Freigabefenster (20.09.2026): zugeklappt eine Zeile, offen die Beitraege. */
.frei-kopf { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 11px 0; background: none; border: 0; border-bottom: 1px solid var(--linie); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.frei-kopf-text { font-size: var(--t-small); color: var(--text-2); }
.frei-kopf-text strong { color: var(--text); font-weight: 500; }
.frei-pfeil { transition: transform var(--dauer) var(--kurve); color: var(--text-2); }
.frei-pfeil.ist-auf { transform: rotate(180deg); }
.frei-zeile .frei-txt { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.frei-h { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.frei-voll { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 4px; animation: klappt var(--dauer) var(--kurve) both; }
.frei-bild { width: 100%; max-width: 420px; height: auto; border-radius: 12px; display: block; }
.frei-voll .post-c { display: block; }
.media-taste:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
#freigaben-abschnitt .post.is-open .media { aspect-ratio: auto; }
#freigaben-abschnitt .post.is-open .media img { height: auto; object-fit: contain; }
/* 44 px auch hier: der Textaufklapper war mit 32 px die einzige Flaeche unter der Grenze
   (gemessen am 19.09.2026 im Durchgang). Die Schrift bleibt klein, nur die Flaeche waechst. */
.post-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0 14px 14px; align-items: center; }
.post-actions .link { padding: 6px 0; min-height: var(--tap); font-size: 14px; }
.griff { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: var(--t-micro); cursor: grab; touch-action: none; min-height: var(--tap); padding: 0 6px; border-radius: 8px; }
.griff:active { cursor: grabbing; }
.post.is-dragging { opacity: .4; }
.post.is-over { outline: 2px dashed var(--aktion); outline-offset: 2px; }
.order-btns { display: inline-flex; gap: 6px; }
.order-btns button { min-width: var(--tap); min-height: var(--tap); border: 1px solid var(--linie); background: transparent; color: var(--text); border-radius: 999px; cursor: pointer; font-size: 15px; }
.order-btns button[disabled] { opacity: .3; cursor: default; }

/* Die klebende Leiste (20.09.2026 ueberarbeitet): SIE DARF UEBER DEM INHALT LIEGEN, ABER NICHTS
   DAUERHAFT VERDECKEN. Vorher standen hier zwei Handlungen uebereinander - zusammen 135 px, ein
   Fuenftel eines iPhone-Bildschirms. Auf dem Ergebnisbildschirm lag sie damit genau auf dem
   Tagesstreifen und der Beitragskarte: sichtbar war die Kanalzeile, dann der Knopf, und es sah
   aus, als waere die Seite dort zu Ende. Jetzt traegt sie nur noch die eine Hauptsache;
   "Anders machen" steht als ruhige Zeile darueber im Textfluss. Der Abstand darunter sorgt
   dafuer, dass der letzte Inhalt IMMER unter der Leiste hervorgescrollt werden kann. */
.sticky-actions {
  position: sticky; bottom: 0; margin-top: 18px; padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  /* Halbdurchsichtig mit Unschaerfe (24.09.2026): deckend in --grund stand die Leiste im Dunkeln als
     flaches dunkles Rechteck vor dem getoenten Hintergrund mit Lichtkegeln ("schwarze Leiste"). */
  background: linear-gradient(to top, color-mix(in srgb, var(--grund) 86%, transparent) 64%, color-mix(in srgb, var(--grund) 0%, transparent));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.sticky-actions .btn { width: 100%; max-width: 420px; }
/* Erkannte Themen mit Herkunft (23.09.2026). Bewusst eine Liste und keine Chips: Chips laden
   zum Loeschen ein, hier geht es ums Lesen - "stimmt das ueberhaupt?". Die Quelle steht klein
   darunter, damit die Zeile auf dem Handy nicht umbricht. */
.themen-herkunft { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.themen-herkunft li {
  border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; background: var(--flaeche);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.th-titel { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.th-quelle { font-size: 12px; color: var(--text-2); }
.th-fuss { margin: 12px 0 0; font-size: var(--t-small); color: var(--text-2); }
.th-fuss .link { padding: 0 2px; min-height: 0; font-size: var(--t-small); }

.anders-zeile { margin: 22px 0 0; text-align: center; }
.anders-zeile .link { padding: 11px 14px; min-height: 44px; }
.lauf-zeile { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: var(--t-small); margin-top: 16px; }
.lauf-zeile::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--aktion); animation: puls 1.2s ease-in-out infinite; }

/* --- Bildschirm 4b: Bildauswahl (23.09.2026) ---
   Die Kachel ist ein <label> um eine Checkbox: die ganze Flaeche schaltet, nicht nur ein
   kleines Kaestchen - auf dem Handy ist das der Unterschied zwischen treffen und danebentippen.
   Angehakt wird durch Rahmen UND Haken angezeigt, nicht nur durch Farbe. */
.bild-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 24px; }
.bild-kachel { position: relative; display: block; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--wash); }
.bild-kachel input { position: absolute; opacity: 0; pointer-events: none; }
.bild-kachel img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: saturate(.55) brightness(.94); transition: filter 160ms; }
.bild-kachel.ist-frei { border-color: var(--gut); }
.bild-kachel.ist-frei img { filter: none; }
.bild-kachel:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }
.bild-haken {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--karte-glas); color: transparent;
  border: 1px solid var(--linie); font-size: 15px; line-height: 1;
}
.bild-kachel.ist-frei .bild-haken { background: var(--gut); border-color: var(--gut); color: #fff; }
.bild-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent); color: #fff; font-size: 11.5px; }
.bild-herkunft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bild-weg { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font-size: 11.5px; padding: 2px 0; }

.bild-hochladen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.bild-hochladen label.btn { cursor: pointer; }

/* Die Rechtezeile ist bewusst ein eigener Kasten und keine Fussnote: sie ist der Grund, warum
   der ganze Bildschirm existiert. */
/* Foto-Einordnung (23.09.2026): Art und Beschreibung unter jeder Kachel, eigener Personenbereich. */
.bild-zelle { display: grid; gap: 4px; align-content: start; }
.bild-zelle.ist-nie .bild-kachel img { filter: grayscale(1) brightness(.8); }
.bild-kachel.gesperrt { cursor: default; }
.bild-text { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted, var(--text-2)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bild-art { font-weight: 600; color: var(--text); }
.bild-hinweis { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted, var(--text-2)); }
.bild-nie { justify-self: start; font-size: 12px; padding: 0; }
.bild-bereich { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linie); }
.bild-bereich h2 { font-size: var(--t-h2); margin: 0 0 4px; }
.bild-bereich-hinweis { margin: 0; font-weight: 600; }
.bild-bereich .bild-raster { margin-top: 14px; }
.bild-bereich > .small { margin-top: 12px; }
.bild-aussortiert { margin-top: 18px; }
.foto-grund { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--flaeche); }
.foto-grund p { margin: 0 0 4px; }
.rechte-kasten { margin-top: 24px; padding: 16px 18px; border: 1px solid var(--linie); border-left: 3px solid var(--text); border-radius: 0 10px 10px 0; background: var(--flaeche); }
.rechte-satz { margin: 0 0 8px; line-height: 1.55; }
.rechte-kasten p:last-child { margin-bottom: 0; }

.bild-briefing { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie); }
.bild-briefing h2 { font-size: var(--t-h2); margin: 0 0 6px; }

/* --- Bildschirm 5: der Plan --- */
.plan { margin-top: 24px; border-top: 1px solid var(--linie); }
.zeile { border-bottom: 1px solid var(--linie); padding: 15px 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start; }
.zeile-k { font-size: var(--t-small); color: var(--text-2); grid-column: 1 / -1; }
.zeile-v { line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.zeile-v .link { padding: 0; min-height: var(--tap); font-size: 15px; }
.punkt { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px; margin-right: 7px; border: 1px solid var(--linie); }
.stift { justify-self: end; align-self: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--linie); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.stift:hover { border-color: var(--text-2); }
.stift svg { width: 16px; height: 16px; }
.zeile-form { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 6px; animation: klappt var(--dauer) var(--kurve) both; }
@keyframes klappt { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.zeile-form .input { min-height: 48px; }
.zeile-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linie); border-radius: 999px; padding: 7px 13px; font-size: var(--t-small); background: var(--karte); min-height: 38px; }
.chip button { border: 0; background: none; cursor: pointer; padding: 0 2px; color: var(--text-2); font-size: 17px; line-height: 1; min-width: 26px; min-height: 26px; }
.chip.add { padding: 0; }

/* "Jetzt posten": zwei leise Zeilen statt zusaetzlicher Knoepfe (20.09.2026). Die Vorschlaege
   erscheinen erst auf Tipp, die Farbe ist eine Reihe Tupfer - beides gilt nur fuer diesen einen
   Beitrag und laesst die Grundeinstellung des Kunden in Ruhe. */
.jetzt-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; }
.jetzt-zeile .link { padding: 11px 0; min-height: 44px; }
.farbzeile { margin-top: 12px; }
.chip-thema { cursor: pointer; text-align: left; min-height: 44px; }
.chip-thema:hover { border-color: var(--text-2); }
.tupfer { display: flex; gap: 2px; flex-wrap: wrap; }
.tupfer-el { position: relative; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.tupfer-el input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.tupfer-punkt { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.tupfer-el input:checked + .tupfer-punkt { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 2px var(--grund), 0 0 0 3px var(--text); }
.tupfer-el input:focus-visible + .tupfer-punkt { outline: 2px solid var(--text); outline-offset: 4px; }
.tupfer-frei input[type="color"] { opacity: 1; position: absolute; inset: 9px; width: 26px; height: 26px; padding: 0; border: 1px dashed var(--linie); border-radius: 50%; background: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chip.add input { border: 0; background: transparent; font: inherit; font-size: 14px; padding: 7px 13px; min-width: 150px; outline: none; color: var(--text); }
.chip.add:focus-within { border-color: var(--aktion); }
.wahl { display: grid; gap: 8px; }
.wahl label { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 9px 13px; border: 1px solid var(--linie); border-radius: 12px; cursor: pointer; background: var(--karte); }
.wahl label:has(input:checked) { border-color: var(--aktion); box-shadow: 0 0 0 1px var(--aktion); }
.wahl input { width: 18px; height: 18px; accent-color: var(--aktion); margin: 0; flex: none; }
.wahl small { color: var(--text-2); display: block; }
.schalter { display: flex; align-items: center; gap: 12px; min-height: var(--tap); cursor: pointer; }
.schalter input { appearance: none; width: 46px; height: 27px; border-radius: 999px; background: var(--linie-stark); position: relative; transition: background 160ms; margin: 0; flex: none; cursor: pointer; }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform 160ms; }
.schalter input:checked { background: var(--gut); }
.schalter input:checked::after { transform: translateX(19px); }
.zeile-notiz { grid-column: 1 / -1; font-size: var(--t-small); color: var(--text-2); }

/* --- Farbverlaufs-Picker (bestehendes System: Akzent + zweite Farbe + Richtung) --- */
.picker { display: grid; gap: 14px; }
.picker-vorschau { height: 78px; border-radius: 12px; border: 1px solid var(--linie); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swatch { width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid var(--grund); box-shadow: 0 0 0 1px var(--linie); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--aktion); }
.swatch.eigene { position: relative; overflow: hidden; background: conic-gradient(#f66, #fc6, #6c6, #6cf, #66f, #c6f, #f66); }
.swatch.eigene input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.picker-gruppe { display: grid; gap: 8px; }
.picker-gruppe > span { font-size: var(--t-small); color: var(--text-2); }
.richtung { display: flex; gap: 8px; flex-wrap: wrap; }
.richtung button { min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie); background: transparent; color: var(--text); cursor: pointer; font-size: 14px; }
.richtung button[aria-pressed="true"] { border-color: var(--aktion); box-shadow: 0 0 0 1px var(--aktion); }

/* --- Bildschirm 6: Verbinden --- */
.connect-liste { margin-top: 24px; display: grid; gap: 18px; }
.connect { border: 1px solid var(--linie); border-radius: 16px; padding: 16px; display: grid; gap: 10px; background: var(--karte); }
.connect .btn { width: 100%; min-height: 54px; font-size: 16px; }
.connect .logo { width: 22px; height: 22px; flex: none; }
.connect-state { display: flex; align-items: center; gap: 8px; color: var(--gut); font-size: var(--t-small); }
.connect-state.off { color: var(--text-2); }
.connect .link { padding: 4px 0; min-height: var(--tap); font-size: 14px; }

/* --- Dashboard --- */
/* Titel links, "Jetzt posten" rechts auf einer Linie - auch am Handy, weil der Link schmal
   genug ist. flex-wrap raus: umbrochen stand der Knopf frueher als eigener Block darunter
   und wog damit mehr als die Woche. */
.dash-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-kopf > div { min-width: 0; }
.notice { margin-top: 18px; border: 1px solid var(--linie); border-left: 3px solid var(--text-2); border-radius: 12px; padding: 13px 15px; font-size: var(--t-small); display: grid; gap: 6px; background: var(--karte); }
.notice.bad { border-left-color: var(--schlecht); }
/* Erreichte Tagesgrenze: kein Fehler, also weder rot noch weiss wie eine Karte - ruhiges Grau. */
.notice.ruhig { background: var(--wash); border-left-color: var(--text-2); }
.notice.ok { border-left-color: var(--gut); }
.notice .link { padding: 2px 0; min-height: var(--tap); font-size: 14px; }
.abschnitt { margin-top: 34px; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.leer { border: 1px dashed var(--linie); border-radius: 16px; padding: 26px; color: var(--text-2); font-size: var(--t-small); text-align: center; margin-top: 12px; }
.verlauf { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.verlauf li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; border-bottom: 1px solid var(--linie); padding-bottom: 10px; }
.verlauf img, .verlauf .thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--flaeche); }

/* --- Sheet --- */
.sheet-overlay { position: fixed; inset: 0; background: var(--schleier); z-index: 200; display: grid; align-items: end; }
.sheet { background: var(--karte); border: 1px solid var(--linie); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 22px var(--rand) max(22px, env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; position: relative; animation: hoch var(--dauer) var(--kurve) both; }
@keyframes hoch { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 720px) { .sheet-overlay { align-items: center; justify-items: center; } .sheet { border-radius: 20px; border-bottom: 1px solid var(--linie); width: 480px; } }
.sheet-close { position: absolute; right: 12px; top: 12px; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--linie); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.sheet-title { padding-right: 52px; }
.sheet-body { margin-top: 12px; display: grid; gap: 14px; }

/* --- Toasts --- */
.toasts { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 250; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--aktion); color: var(--aktion-text); padding: 12px 16px; border-radius: 12px; font-size: var(--t-small); animation: auf var(--dauer) var(--kurve) both; }
.toast.bad { background: var(--schlecht); color: #ffffff; }

.mitte { text-align: center; padding-top: 10vh; }
.mitte .actions { align-items: center; }

/* ---- Testlauf-Leiste (nur Sandbox, nur bei status='test') --------------------------------
   Schmal, grau, oben angeheftet. Kein Rot, keine Warnfarbe: es ist kein Fehlerzustand,
   sondern ein Betriebsmodus. Die Tippziele bleiben bei 44 px. */
.testleiste {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: space-between;
  padding: 6px 16px; background: var(--wash); border-bottom: 1px solid var(--linie);
  font-size: var(--t-small); color: var(--text-2);
}
.testleiste[hidden] { display: none; }
.testleiste-text { font-weight: 500; color: var(--text); }
.testleiste-knoepfe { display: flex; gap: 6px; }
.testleiste .link { min-height: var(--tap); padding: 0 8px; font-size: 14px; }
@media (max-width: 420px) {
  .feld-aktion .btn { width: 100%; }
  .feld-aktion .hint { flex-basis: 100%; } .testleiste-zusatz { display: none; } }

/* ---- Farbwahl als halbhohes Blatt (nur Handy) -------------------------------------------
   Vorher stand der Farbpicker im Fluss der Seite: 505 px hoch, beginnend bei 197 px. In einem
   780 px hohen Fenster schob er genau das aus dem Bild, was er veraendert - die drei
   Beitragsvorschauen darueber. Gemessen am 19.09.2026: Vorschau sichtbar = nein.
   Jetzt faehrt er von unten hoch und laesst die obere Haelfte frei. Der Bereich ueber dem
   Blatt bleibt UNGETOENT, sonst waere die Live-Vorschau zwar sichtbar, aber verfaelscht. */
.sheet-overlay.halb { background: transparent; pointer-events: none; }
.sheet-overlay.halb .sheet {
  pointer-events: auto;
  max-height: 56vh;
  box-shadow: 0 -18px 40px var(--schatten);
}
.sheet-overlay.halb .sheet .zeile-form { display: block; }
.sheet-overlay.halb .sheet .zeile-form-actions { position: sticky; bottom: 0; background: var(--karte); padding-top: 10px; margin-top: 4px; }
/* Damit die Vorschaukacheln nicht unter dem Blatt verschwinden, bekommt die Seite unten Platz. */
body.blatt-offen .stage { padding-bottom: 58vh; }
/* Und die drei Vorschauen ruecken nebeneinander: einzeln untereinander sind sie am Handy
   zusammen 1381 px hoch, in den freien Streifen ueber dem Blatt passt so keine einzige.
   Nebeneinander sind sie klein, aber alle drei ganz zu sehen - und darum geht es hier:
   sehen, wie sich die Farbe auf die Woche auswirkt, nicht einen Beitrag lesen. */
body.blatt-offen #plan-vorschau { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
body.blatt-offen #plan-vorschau .post { border-radius: 10px; }
body.blatt-offen #plan-vorschau .post-meta { display: none; }
body.blatt-offen #plan-vorschau .kachel-h { font-size: 11px; line-height: 1.2; }
body.blatt-offen #plan-vorschau .kachel-wm { font-size: 7px; }
@media (min-width: 720px) {
  .sheet-overlay.halb { background: var(--schleier); pointer-events: auto; }
  body.blatt-offen .stage { padding-bottom: 0; }
  body.blatt-offen #plan-vorschau { display: flex; grid-template-columns: none; }
  body.blatt-offen #plan-vorschau .post-meta { display: flex; }
}

/* ---- Die Woche als Raster (Variante A, 24.09.2026) --------------------------------------
   Ersetzt den Wochenstreifen. Steht, sobald die Farben feststehen: jeder Platz der Woche als
   Kachel in normaler Groesse, anfangs als Platzhalter in der Markenfarbe mit leisem Schimmer.
   Am Schreibtisch die Tage nebeneinander, am Handy je Tag eine Zeile mit zwei Kacheln. */
.raster { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 22px 0 6px; }
.rt-tag { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.rt-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) {
  .raster { grid-template-columns: repeat(min(var(--tage), 7), minmax(0, 1fr)); gap: 14px; }
  .rt-posts { grid-template-columns: 1fr; gap: 12px; }
}
.rk { display: grid; gap: 5px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; min-width: 0; font: inherit; color: inherit; }
.rk-kanal { font-size: var(--t-micro); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-bild, .rk-text { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; container-type: inline-size; }
.rk.ist-aktiv .rk-bild, .rk.ist-aktiv .rk-text { outline: 2.5px solid var(--text); outline-offset: 2px; }
.rk-bild { color: #fff; }
.rk-bild .kachel-h { position: absolute; left: 11%; right: 14%; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: clamp(12px, 9.5cqw, 22px); line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; animation: rk-auf-h .5s ease; }
.rk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rk-bild img.rk-einblenden { animation: rk-bild .9s ease; }
.rk-folgt { position: absolute; right: 8px; top: 8px; font-size: 11px; background: rgba(0,0,0,.3); color: #fff; padding: 2px 8px; border-radius: 999px; }
.rk-platz { position: absolute; left: 12%; right: 22%; top: 34%; display: grid; gap: 8px; }
.rk-platz i { display: block; height: 9px; border-radius: 5px; background: rgba(255,255,255,.24); }
.rk-platz i:nth-child(2) { width: 80%; } .rk-platz i:nth-child(3) { width: 55%; }
.rk-schimmer { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.16) 45%, transparent 70%); background-size: 250% 100%; animation: rk-schimmer 1.8s ease-in-out infinite; }
.rk-text { background: var(--karte); border: 1px solid var(--linie); border-top: 3px solid var(--text); padding: 12px 13px; font-size: 12px; line-height: 1.45; color: var(--tk-text); }
.rk-text b { display: block; font-weight: 500; font-size: 13px; margin-bottom: 5px; animation: rk-auf .5s ease; }
.rk-text span { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; animation: rk-auf .5s ease; }
.rk-text.rk-leer { display: grid; align-content: start; gap: 8px; }
.rk-text.rk-leer i { display: block; height: 9px; border-radius: 5px; background: var(--wash); }
.rk-text.rk-leer i:first-of-type { height: 12px; width: 75%; margin-bottom: 4px; }
.rk-text.rk-leer i:last-of-type { width: 55%; }
.rk-text .rk-schimmer { background: linear-gradient(100deg, transparent 20%, rgba(13,13,13,.05) 45%, transparent 70%); background-size: 250% 100%; }
@keyframes rk-schimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes rk-bild { from { opacity: 0; } }
@keyframes rk-auf { from { opacity: 0; transform: translateY(4px); } }
@keyframes rk-auf-h { from { opacity: 0; } }
@media (max-width: 719px) {
  .rk-text { font-size: 11px; padding: 10px 11px; }
  .rk-text b { font-size: 12px; }
  .rk-text span { -webkit-line-clamp: 6; }
}
@media (prefers-reduced-motion: reduce) {
  .rk-schimmer, .fs.dran .fs-z { animation: none; }
  .rk-bild img.rk-einblenden, .rk-bild .kachel-h, .rk-text b, .rk-text span { animation: none; }
}
/* Fortschritt in einer Zeile (24.09.2026) - statt "Gleich fertig". */
.fortschritt { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: var(--t-small); color: var(--text-2); margin: 4px 0 8px; min-height: 22px; }
.fs { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fs-z { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; flex: none; }
.fs.fertig { color: var(--text); }
.fs.fertig .fs-z { background: var(--gut); color: #fff; }
.fs.dran .fs-z { border: 2px solid var(--text-2); border-right-color: transparent; animation: fs-dreh .9s linear infinite; }
.fs.offen { opacity: .45; }
.fs.offen .fs-z { border: 1.5px solid var(--linie); }
.fs-n { font-variant-numeric: tabular-nums; }
.fs-trenner { color: var(--linie); }
@keyframes fs-dreh { to { transform: rotate(360deg); } }
.passt-hinweis { margin: 0; font-size: var(--t-small); color: var(--text-2); text-align: center; min-height: 1em; }
.passt-hinweis:empty { display: none; }
.tagdetail { border-top: 1px solid var(--linie); padding-top: 14px; }
.tagdetail-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.etikett { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }

/* ---- Markenlogo des Kunden in der Kopfzeile ---------------------------------------------
   Erscheint, sobald die Website gelesen ist. Bewusst klein und ohne Kasten: auffallen soll,
   dass die Oberflaeche zum Kunden gehoert, nicht das Logo. Eine feine senkrechte Linie
   trennt es vom Produktnamen, damit es nicht wie Teil von "Pipeflow" wirkt. */
.marke-kunde {
  display: flex; align-items: center; min-width: 0; gap: 9px;
  /* margin-right:auto haelt das Logo am Produktnamen - .top verteilt sonst mit
     space-between und schoebe es in die Bildschirmmitte. */
  margin: 0 auto 0 14px; padding-left: 14px; border-left: 1px solid var(--linie);
  /* Gemeinsame optische Achse mit dem Schriftzug (20.09.2026): die Kopfzeile richtet oben aus,
     der Schriftzug "Pipeflow" steht aber in einem 44 px hohen Block mit der Zusatzzeile
     darunter. Ohne eigene Hoehe sass das Logo an der Oberkante dieses Blocks und rutschte
     damit unter die Grundlinie des Schriftzugs. Diese Hoehe ist genau die Zeile von
     "Pipeflow"; das Logo sitzt darin mittig und liegt damit auf derselben Achse. */
  height: 28px; align-self: flex-start;
  /* 2,5 px tiefer als die Zeilenmitte: die sichtbare Mitte von "Pipeflow" liegt nicht in der
     Mitte seiner Zeile, weil die Schrift oben Versalhoehe und unten eine Unterlaenge (p) hat.
     Gemessen an der Tinte im Bild, nicht am Kasten (docs/easy-onboarding/kopfzeile). */
  margin-top: 2.5px;
  animation: logo-auf .5s var(--kurve) both;
}
.marke-kunde[hidden] { display: none; }
/* Groesse nach dem sichtbaren Eindruck, nicht nach der gemessenen Zahl (20.09.2026).
   "Pipeflow" fuehrt, das Kundenlogo ordnet sich unter: die Versalhoehe des Schriftzugs ist die
   Obergrenze, nicht seine Schriftgroesse. Eine breite Wortmarke besteht aus duennen Buchstaben
   und darf deshalb hoeher sein als ein geschlossenes Zeichen - ein farbiges Quadrat wirkt bei
   gleicher Hoehe deutlich groesser, weil es Flaeche UND Farbe hat. Welcher Fall vorliegt,
   entscheidet start.js am Seitenverhaeltnis (logo-breit / logo-kompakt). */
.marke-kunde img { display: block; height: 20px; width: auto; max-width: 136px; object-fit: contain; }
/* Mehrzeilige Wortmarke (Verhaeltnis unter 4): ihre Buchstaben sind nur halb so hoch wie das
   Bild, sie darf deshalb hoeher sein, ohne lauter zu werden. */
.marke-kunde.logo-hoch img { height: 24px; max-width: 124px; }
/* Geschlossenes, oft farbiges Zeichen: die kleinste Hoehe, weil Flaeche und Farbe zusammen
   schon bei 18 px so schwer wiegen wie der Schriftzug daneben. */
.marke-kunde.logo-kompakt img { height: 18px; max-width: 44px; }
.marke-kunde img[hidden], .marke-kunde-name[hidden] { display: none; }
/* Das ✕ ist Verbindung, nicht Gewicht: klein und grau. */
.marke-x { font-size: 12px; color: var(--text-2); line-height: 1; }
/* Der Name als Text: gleich hoch wie der Pipeflow-Schriftzug wirkt, aber in Grotesk und in der
   Markenfarbe. Lange Namen werden mit Auslassung gekappt, bevor sie die Kopfzeile sprengen. */
.marke-kunde-name {
  font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* App-Kachel mit eigenem Hintergrund: runde Ecken, sonst klebt ein Quadrat auf dem Papier.
   Als volle Flaeche wiegt sie am schwersten - deshalb die kleinste der drei Hoehen. */
.marke-kunde.kachel-logo img { border-radius: 5px; height: 18px; max-width: 18px; }
@keyframes logo-auf { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) {
  /* Am Handy reicht die Breite neben "powered by Paul Hölzl" nicht: schon
     "Channoine Mayr" wurde zu "Channoi…" (gemessen: 77 px Platz). Deshalb rueckt die Marke
     des Kunden in eine zweite Zeile unter den Schriftzug, ueber die volle Breite - lesbar
     bis rund 30 Zeichen, danach Auslassung. Die Kopfzeile wird dafuer 28 px hoeher, nur hier. */
  .top { flex-wrap: wrap; gap: 2px 12px; }
  .top-actions { order: 2; }
  .marke-kunde { order: 3; flex-basis: 100%; height: auto; margin: 4px 0 0; padding-left: 0; border-left: 0; gap: 8px; }
  /* Das ✕ verbindet zwei Dinge. In der zweiten Zeile steht es allein am Anfang und verbindet
     nichts mehr - dort reicht die Marke des Kunden fuer sich (Ansage 20.09.2026). */
  .marke-x { display: none; }
  /* Am Handy klebt die Leiste NICHT (20.09.2026). Auf einem iPhone sind 664 Pixel Sichtfeld:
     eine Beitragskarte ist allein 715 Pixel hoch, der Kunde sah die Kanalzeile und darunter
     sofort den Knopf - es sah aus, als hoere die Seite dort auf. Im Textfluss verdeckt sie
     nichts, und der Knopf steht genau dort, wo man nach dem Durchsehen der Woche ankommt. */
  .sticky-actions { position: static; background: none; padding-top: 4px; }
  .marke-kunde img { height: 19px; max-width: 136px; }
  .marke-kunde.logo-hoch img { height: 23px; max-width: 124px; }
  .marke-kunde.logo-kompakt img { height: 17px; max-width: 44px; }
  .marke-kunde.kachel-logo img { height: 17px; max-width: 17px; }
  .marke-kunde-name { font-size: 16px; max-width: 260px; }
}

/* ---- Ladebildschirm: echte Zwischenergebnisse statt Schrittliste ------------------------
   Kein Kasten, kein Rahmen, keine Haekchen. Was schon da ist, steht in voller Schrift; was
   noch kommt, ist gar nicht da. Der Kunde liest seine Marke entstehen, nicht einen Fortschritt. */
.lade-liste { margin-top: 26px; display: grid; gap: 20px; }
.lade-zeile { display: grid; gap: 4px; animation: lade-auf .45s var(--kurve) both; }
.lade-was { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.lade-wert { font-size: 17px; line-height: 1.35; }
.lade-zeile.ist-dran .lade-wert { color: var(--text-2); }
.lade-farben { display: flex; align-items: center; gap: 8px; }
.lade-punkt { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(13,13,13,.08); }
.lade-hex { font-size: 14px; color: var(--text-2); letter-spacing: .02em; }
/* Die Themen sind Fliesstext, keine Pillen: Pillen waeren wieder Kaesten. Bewusst KEIN
   Flexbox mit Trennzeichen per ::before - beim Umbruch rutschte der Punkt an den Zeilenanfang
   und die Liste sah aus wie Aufzaehlungspunkte. */
.lade-themen { display: block; font-size: 15px; line-height: 1.5; }
.lade-trenner { color: var(--text-2); }
.lade-kopfzeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lade-kopfzeilen li { font-size: 16px; line-height: 1.3; animation: lade-auf .4s var(--kurve) both; }
@keyframes lade-auf { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lade-zeile, .lade-kopfzeilen li { animation: none; } }
/* Der Pfad der gerade gelesenen Unterseite: gleiche Zeile, ruhiger als die Zahl. */
.lade-pfad { color: var(--text-2); }

/* ---- Kanäle als Kanäle (Entwurf A1, freigegeben 19.09.2026) -----------------------------
   Eine Zeile je Kanal, das Zeichen in der Farbe des Kanals, rechts der Knopf in derselben
   Farbe. Nur Haarlinien, keine Kästen. Die Masse sind bewusst gleich: 44 px Zeichen, 44 px
   Knopfhöhe, 16 px Innenabstand oben und unten - damit nichts schwerer wirkt als der Rest. */
.kanal-liste { margin-top: 22px; }
.kanal {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--linie);
}
.kanal-block:first-child .kanal { border-top: 1px solid var(--linie); }
.kanal-zeichen { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.kanal-zeichen .logo { width: 22px; height: 22px; color: #fff; }
.kanal-text { min-width: 0; }
.kanal-text b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.kanal-text span { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanal-knopf {
  border: 0; border-radius: 999px; padding: 0 18px; min-height: 44px; display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.kanal-knopf.ist-aus { background: var(--wash); color: var(--text-2); cursor: default; }
.kanal-ok { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.kanal-ok .link { font-size: 14px; }
/* Die Rueckmeldung steht UNTER der Zeile, nicht darin - sonst waere eine Zeile hoeher. */
.kanal-notiz { margin: -6px 0 10px; font-size: 13px; color: var(--gut); }
.kanal-notiz.ist-schlecht { color: var(--schlecht); }
/* Der Weg weiter wiegt weniger als die Kanäle: Textlink, nicht Knopf. */
.weiter-link {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 26px; padding: 0; border: 0; background: none;
  font-size: 15px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px;
  min-height: var(--tap); cursor: pointer; font-family: inherit;
}
@media (max-width: 400px) {
  .kanal { gap: 12px; }
  .kanal-knopf { padding: 0 14px; font-size: 14px; }
}

/* ---- Offene Punkte als eine Zeile (Entwurf B1) ------------------------------------------
   Kein Rahmen, kein Kasten, keine Erklärung. Die Woche beginnt direkt darunter. */
.offen { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.offen a, .offen .link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; padding: 0; }
.offen-pkt { margin: 0 7px; opacity: .45; }
.offen.ist-pausiert { color: var(--schlecht); }
.offen.ist-pausiert .link { color: var(--schlecht); }
/* "Jetzt posten" tritt hinter die Woche zurück: Textlink oben rechts statt gefülltem Knopf. */
.kopf-link {
  background: none; border: 0; padding: 0 0 0 12px; font-family: inherit; font-size: 14px;
  color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  white-space: nowrap; min-height: var(--tap); align-self: flex-start;
}

/* ---- Die Woche in der Hand des Kunden (Konzept 19.09.2026) --------------------------------- */
.zust { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.zust i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--text-3); }
.zust.frei i { background: var(--gut); } .zust.bearb i { background: var(--text); } .zust.eigen i { background: var(--aktion-marke, #a36629); }
.post.ist-uebersprungen { opacity: .55; }
.post-actions .link.leise { color: var(--text-2); }
.post-actions .link.mehr { margin-left: auto; text-decoration: none; font-size: 20px; line-height: 1; color: var(--text-2); letter-spacing: 1px; }
.eigen-plus { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 2px; margin-top: 4px; font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer; min-height: var(--tap); }
.eigen-plus b { width: 32px; height: 32px; border-radius: 50%; border: 1.5px dashed var(--text-3); display: grid; place-items: center; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; border: 1px solid var(--linie); border-radius: 999px; padding: 9px 13px; font-size: 14px; background: var(--karte); min-height: 40px; line-height: 20px; cursor: pointer; }
.chip input:checked + span { background: var(--text); color: var(--auf-text); border-color: var(--text); }
.chip input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.chip.ist-belegt span { color: var(--text-2); background: var(--wash); cursor: default; }
.bildzeile { display: flex; align-items: center; gap: 12px; }
.bild-klein { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: 0 0 64px; background: var(--wash); display: block; }
.bild-klein.leer { border: 1px dashed var(--linie); }
.bild-wahl { margin-left: auto; cursor: pointer; font-size: 13px; color: var(--text-2); text-decoration: underline; min-height: var(--tap); display: inline-flex; align-items: center; }
.leise-reihe { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.leise-reihe .link { font-size: 13px; color: var(--text-2); }
.rueck { position: fixed; left: 16px; right: 16px; bottom: 18px; z-index: 250; background: var(--text); color: var(--auf-text); border-radius: 12px; padding: 10px 14px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; animation: hoch var(--dauer) var(--kurve) both; }
.rueck-knopf { background: none; border: 0; color: var(--auf-text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--tap); padding: 0 4px; }
@media (min-width: 720px) { .rueck { left: auto; right: 24px; width: 380px; } }


/* LinkedIn-Textbeitrag (23.09.2026): zeigt, was vor "... mehr" im Feed steht - statt einer leeren Kachel. */
.media.media-text { background: var(--flaeche, #fafaf7); }
.textkarte { box-sizing: border-box; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 20px; overflow-wrap: anywhere; background: var(--karte); color: var(--tk-text); border: 1px solid var(--linie); border-radius: inherit; overflow: hidden; text-align: left; }
.textkarte.gross { aspect-ratio: 1 / 1; }
.tk-kopf { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #0A66C2; font-weight: 600; letter-spacing: .01em; }
.tk-kopf .logo { width: 15px; height: 15px; }
.tk-erste { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; }
.tk-rest { margin: 0; font-size: 14.5px; line-height: 1.45; white-space: pre-line; color: var(--tk-rest); }
.tk-mehr { font-size: 13.5px; color: var(--tk-mehr); }
.textkarte.mini { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--karte); }
.frei-txt .textkarte.mini { width: 64px; height: 64px; flex: 0 0 64px; }
.tk-zeichen { font-weight: 700; font-size: 15px; color: #0A66C2; }
.post-c.nur-offen { display: none; }
.post.is-open .post-c.nur-offen { display: block; }

/* ---------- Beitraege entstehen sichtbar (Streaming, 24.09.2026) ---------- */
.rk-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: currentColor; animation: rk-blink 1s steps(1) infinite; }
@keyframes rk-blink { 50% { opacity: 0; } }
.rk-entsteht .kachel-h { opacity: .96; }
.rk-text.rk-entsteht span { color: var(--text-2); }
.themen-live { margin: 10px 0 0; font-size: var(--t-small); color: var(--text-2); line-height: 1.6; }
.themen-live .lade-thema { color: var(--text); animation: thema-rein var(--dauer) var(--kurve) both; }
@keyframes thema-rein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.langsam { margin: 8px 0 0; font-size: var(--t-small); color: var(--text-2); }

/* =====================================================================================
 * Dark Mode (Paul 24.09.2026): "luxurioes, reich, hochwertig - wie das Innenleben eines Porsche".
 * Graphit mit einem Hauch Tintenblau statt Schwarz, drei abgestufte Ebenen (Grund, Flaeche, Karte),
 * feine Linien, warmes Elfenbein als Schrift, Champagner nur fuer die Hauptaktion und den Fokus.
 * Automatisch nach Geraet (prefers-color-scheme), oder fest ueber data-theme (Einstellungen).
 * Der Hellmodus bleibt unveraendert. Beitragskacheln tragen immer die Markenfarben (keine Regel hier).
 * Die Markenfarben-Toenung setzt start.js (lichtSetzen) - fuer beide Modi eigene Werte.
 * ===================================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #0e1014; --flaeche: #14171c; --karte: #181b21; --karte-glas: rgba(24, 27, 33, .92);
  --wash: #1b1e24; --linie: #2a2e36; --linie-stark: #3b4049; --schimmer: #242830;
  --text: #ece7de; --text-2: #aaa49a; --text-3: #6d6a63; --auf-text: #121418;
  --aktion: #e4d9c3; --aktion-text: #121418; --edel: #c8ad7f;
  --tk-text: #ece7de; --tk-rest: #cbc5ba; --tk-mehr: #928d83;
  --schatten: rgba(0, 0, 0, .55); --schleier: rgba(4, 5, 7, .62);
  --gut: #72d39b; --schlecht: #f2907f;
  --licht-1: rgba(200, 173, 127, .07); --licht-2: rgba(120, 140, 180, .05); --licht-3: rgba(200, 173, 127, .03);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: #0e1014; --flaeche: #14171c; --karte: #181b21; --karte-glas: rgba(24, 27, 33, .92);
    --wash: #1b1e24; --linie: #2a2e36; --linie-stark: #3b4049; --schimmer: #242830;
    --text: #ece7de; --text-2: #aaa49a; --text-3: #6d6a63; --auf-text: #121418;
    --aktion: #e4d9c3; --aktion-text: #121418; --edel: #c8ad7f;
    --tk-text: #ece7de; --tk-rest: #cbc5ba; --tk-mehr: #928d83;
    --schatten: rgba(0, 0, 0, .55); --schleier: rgba(4, 5, 7, .62);
    --gut: #72d39b; --schlecht: #f2907f;
    --licht-1: rgba(200, 173, 127, .07); --licht-2: rgba(120, 140, 180, .05); --licht-3: rgba(200, 173, 127, .03);
  }
}
/* Feine Details, die nur im Dunkeln gebraucht werden: Karten heben sich ueber eine hauchduenne
   Oberkante statt ueber Schatten ab, der Fokus ist champagnerfarben, die Sandbox-Leiste gedaempft. */
:root[data-theme="dark"] .post, :root[data-theme="dark"] .connect, :root[data-theme="dark"] .rk-text, :root[data-theme="dark"] .sheet { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
:root[data-theme="dark"] :focus-visible { outline-color: var(--edel); }
:root[data-theme="dark"] .sandbox-banner { background: #1d1a12; border-bottom-color: #4a3d1c; color: #d9c48f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .post, :root:not([data-theme="light"]) .connect, :root:not([data-theme="light"]) .rk-text, :root:not([data-theme="light"]) .sheet { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
  :root:not([data-theme="light"]) :focus-visible { outline-color: var(--edel); }
  :root:not([data-theme="light"]) .sandbox-banner { background: #1d1a12; border-bottom-color: #4a3d1c; color: #d9c48f; }
}

/* Darstellung waehlen (Einstellungen) */
.darstellung { display: flex; gap: 8px; flex-wrap: wrap; }
:root[data-theme="dark"] .splash-panel { background: #0a0b0e; }
:root[data-theme="dark"] .splash-content { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .splash-panel { background: #0a0b0e; }
  :root:not([data-theme="light"]) .splash-content { color: var(--text); }
}

/* Im Dunkeln: LinkedIn-Blau aufgehellt (#0A66C2 hat auf der dunklen Karte rechnerisch nur 2,6:1),
   Kundenlogos auf einer kleinen Elfenbein-Unterlage - so bleiben ihre eigenen Farben erhalten, statt
   sie einfarbig zu invertieren. */
:root[data-theme="dark"] .tk-kopf, :root[data-theme="dark"] .tk-zeichen { color: #7fb8f5; }
:root[data-theme="dark"] .marke-kunde img { background: #ece7de; padding: 3px 7px; border-radius: 6px; box-sizing: content-box; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk-kopf, :root:not([data-theme="light"]) .tk-zeichen { color: #7fb8f5; }
  :root:not([data-theme="light"]) .marke-kunde img { background: #ece7de; padding: 3px 7px; border-radius: 6px; box-sizing: content-box; }
}

/* ---- Feste Leisten im Dunkeln unsichtbar (Paul 24.09.2026) --------------------------------
 * Der Grund traegt Lichtkegel; jede eigene Flaeche (auch halbdurchsichtig oder weichgezeichnet)
 * stand davor als dunklerer Kasten. Deshalb: kein Hintergrund, kein Rand, kein Schatten, keine
 * Unschaerfe. Die Testleiste klebt im Dunkeln nicht mehr oben (ohne Flaeche wuerde sie sonst
 * ueber den Inhalt laufen). Unten nur ein Verlauf von durchsichtig zu --grund (dieselbe, markengetoente Variable wie
 * der Seitengrund), damit Beitraege unter dem Knopf auslaufen statt hart abzuschneiden. */
:root[data-theme="dark"] .sticky-actions {
  background: linear-gradient(to top, var(--grund) 0, color-mix(in srgb, var(--grund) 70%, transparent) 55%, transparent 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none;
}
:root[data-theme="dark"] .testleiste { position: static; background: transparent; border-bottom: 0; box-shadow: none; }
:root[data-theme="dark"] .sandbox-banner { background: transparent; border-bottom: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sticky-actions {
    background: linear-gradient(to top, var(--grund) 0, color-mix(in srgb, var(--grund) 70%, transparent) 55%, transparent 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none;
  }
  :root:not([data-theme="light"]) .testleiste { position: static; background: transparent; border-bottom: 0; box-shadow: none; }
  :root:not([data-theme="light"]) .sandbox-banner { background: transparent; border-bottom: 0; }
}
@media (max-width: 420px) {
  /* Am Handy klebt die Leiste nicht - dort auch im Dunkeln gar kein Verlauf. */
  :root .sticky-actions { background: none !important; }
}

/* ---- Hell/Dunkel-Umschalter in der Kopfzeile (Paul 24.09.2026) ----------------------------
 * Auf jedem Bildschirm, auch im Onboarding. Zeigt, wohin er wechselt: im Hellen der Mond, im
 * Dunkeln die Sonne. Dezent: ohne Rahmen, Nebentextfarbe, 44 px Tippflaeche. */
.top-rechts { display: flex; align-items: center; gap: 6px; }
.theme-knopf {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer;
}
.theme-knopf:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.theme-knopf svg { width: 19px; height: 19px; }
.theme-knopf .sonne { display: none; }
:root[data-theme="dark"] .theme-knopf .sonne { display: block; }
:root[data-theme="dark"] .theme-knopf .mond { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-knopf .sonne { display: block; }
  :root:not([data-theme="light"]) .theme-knopf .mond { display: none; }
}
/* Am Handy passen Knopf und "Zur Uebersicht" nicht neben den Schriftzug: rechts uebereinander. */
@media (max-width: 420px) { .top-rechts { order: 2; flex-direction: column; align-items: flex-end; gap: 2px; } }

/* Logo in den Einstellungen (25.09.2026): Vorschau klein neben den Aktionen. */
#zeile-logo .zeile-v { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-vorschau { max-height: 40px; max-width: 180px; object-fit: contain; }
.logo-vorschau.logo-kachel { border-radius: 8px; }
.logo-aktionen { display: inline-flex; gap: 14px; }


/* Logo-Mindestgroesse (Paul 25.09.2026, xortex.com: ein 18-px-Strich). Breite Wortmarken auf eigener Kachel
   bekommen die Hoehe einer Wortmarke; jede Logoart bleibt mindestens so gross, dass man sie lesen kann. */
.marke-kunde.kachel-logo.kachel-breit img { height: 28px; max-width: 150px; min-width: 64px; border-radius: 6px; }
.marke-kunde img { min-height: 18px; }
.marke-kunde:not(.logo-kompakt):not(.kachel-logo) img { min-width: 56px; }


/* LinkedIn-Textkarte im Plan/Dashboard (25.09.2026): der Text fuellt die Karte und laeuft unten weich aus -
   kein grosser leerer Raum mehr. In beiden Modi; innerhalb einer Karte ohne eigenen zweiten Rand. */
.textkarte.fuellt { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.textkarte.fuellt .tk-rest { display: block; -webkit-line-clamp: unset; overflow: visible; }
.textkarte.fuellt .tk-mehr { display: none; }
.post .textkarte { border: 0; }
/* KI-Foto im Plan: das Bild selbst, bis dahin die Kachel mit einem ruhigen Hinweis. */
.kachel-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.kachel.foto-folgt { position: relative; }
.foto-folgt-text { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: var(--t-micro); color: rgba(255, 255, 255, .82); letter-spacing: .02em; }

/* =====================================================================================
 * Apple-Stil (Paul 25.09.2026) - EIN System fuer Onboarding, Vorschau, Dein Plan, Dashboard und Einstellungen.
 * Ersetzt die Dunkel-Fassung 2 und den Hellmodus "ohne Kaesten" von heute Vormittag. Weniger ist mehr: keine
 * Rahmen um Karten, keine Verlaeufe ausser Markentoenung und Beitragskacheln, kein Glow, keine Emojis.
 * Alle Werte als Tokens; die Markenfarbe setzt start.js als --marke.
 * ===================================================================================== */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --t-display: 56px; --t-h2: 21px; --t-body: 15px; --t-small: 13px; --t-micro: 13px; --t-karte: 16px;
  --r-karte: 18px; --r-gross: 24px; --r-bild: 16px; --r-pille: 999px; --r-segment: 11px; --r-segment-innen: 8px;
  --rand-desktop: 64px; --oben: 56px; --abstand: 40px; --spalte-abstand: 20px; --rand: 20px;
  --marke: #0066CC;

  --grund: #F5F5F7; --karte: #FFFFFF; --flaeche: #E8E8ED; --segment-aktiv: #FFFFFF; --wash: #E8E8ED;
  --text: #1D1D1F; --text-2: #6E6E73; --text-3: #86868B; --linie: rgba(0, 0, 0, .08); --linie-stark: rgba(0, 0, 0, .16);
  --aktion: #1D1D1F; --aktion-text: #FFFFFF; --auf-text: #FFFFFF; --link: #0066CC; --gut: #248A3D; --wartet: #C93400; --schlecht: #D70015;
  --karten-schatten: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .05); --segment-schatten: 0 1px 3px rgba(0, 0, 0, .12);
  --glas: rgba(251, 251, 253, .78); --marke-deckkraft: 10%;
  --karte-glas: rgba(255, 255, 255, .94); --schimmer: #E8E8ED; --tk-text: #1D1D1F; --tk-rest: #3A3A3C; --tk-mehr: #6E6E73;
  --edel: #0066CC; --licht-1: transparent; --licht-2: transparent; --licht-3: transparent;
}
@media (max-width: 700px) { :root { --t-display: 34px; --t-h2: 17px; } }
:root[data-theme="dark"] {
  --grund: #000000; --karte: #1C1C1E; --flaeche: #2C2C2E; --segment-aktiv: #48484A; --wash: #2C2C2E;
  --text: #F5F5F7; --text-2: #A1A1A6; --text-3: #6E6E73; --linie: rgba(255, 255, 255, .08); --linie-stark: rgba(255, 255, 255, .16);
  --aktion: #F5F5F7; --aktion-text: #000000; --auf-text: #000000; --link: #2997FF; --gut: #30D158; --wartet: #FF9F0A; --schlecht: #FF6961;
  --karten-schatten: none; --segment-schatten: none;
  --glas: rgba(22, 22, 23, .72); --marke-deckkraft: 20%;
  --karte-glas: rgba(28, 28, 30, .94); --schimmer: #2C2C2E; --tk-text: #F5F5F7; --tk-rest: #D1D1D6; --tk-mehr: #A1A1A6;
  --edel: #2997FF; --licht-1: transparent; --licht-2: transparent; --licht-3: transparent;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --grund: #000000; --karte: #1C1C1E; --flaeche: #2C2C2E; --segment-aktiv: #48484A; --wash: #2C2C2E;
  --text: #F5F5F7; --text-2: #A1A1A6; --text-3: #6E6E73; --linie: rgba(255, 255, 255, .08); --linie-stark: rgba(255, 255, 255, .16);
  --aktion: #F5F5F7; --aktion-text: #000000; --auf-text: #000000; --link: #2997FF; --gut: #30D158; --wartet: #FF9F0A; --schlecht: #FF6961;
  --karten-schatten: none; --segment-schatten: none;
  --glas: rgba(22, 22, 23, .72); --marke-deckkraft: 20%;
  --karte-glas: rgba(28, 28, 30, .94); --schimmer: #2C2C2E; --tk-text: #F5F5F7; --tk-rest: #D1D1D6; --tk-mehr: #A1A1A6;
  --edel: #2997FF; --licht-1: transparent; --licht-2: transparent; --licht-3: transparent;
} }
/* --- Grund: Token-Farbe, darueber ein ruhiger Schimmer der Hauptmarkenfarbe ------------------------ */
html { background: radial-gradient(1100px 420px at 50% -200px, color-mix(in srgb, var(--marke) var(--marke-deckkraft), transparent), transparent 70%) no-repeat, var(--grund); }
body { background: transparent !important; background-image: none !important; font-family: var(--sans); font-size: var(--t-body); letter-spacing: -0.01em; }
h1 { font-family: var(--sans); font-weight: 700; font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.035em; }
h2 { font-weight: 600; letter-spacing: -0.02em; }
.lede { font-size: var(--t-h2); line-height: 1.4; color: var(--text-2); letter-spacing: -0.01em; }
.small, .muted.small { font-size: var(--t-small); }
/* --- Karten: keine Rahmen, eine Flaeche, ein weicher Schatten nur im Hellen -------------------------- */
.post, .connect, .sheet, .notice, .rechte-kasten, .foto-grund, .leer, .frei-voll {
  background: var(--karte); border: 0; border-radius: var(--r-karte); box-shadow: var(--karten-schatten);
}
.sheet { border-radius: var(--r-gross) var(--r-gross) 0 0; }
.notice { border-left: 0; }
.textkarte { border: 0; background: var(--karte); }
.post-meta { background: transparent; border: 0; }
/* --- Knoepfe als Pillen, Links blau ---------------------------------------------------------------- */
.btn { border-radius: var(--r-pille); background: var(--aktion); color: var(--aktion-text); border: 0; min-height: 44px; font-weight: 500; transition: opacity 200ms ease, background-color 200ms ease; box-shadow: none; }
.btn:hover { opacity: .88; }
.btn.secondary { background: var(--flaeche); color: var(--text); border: 0; }
.btn.secondary:hover { opacity: 1; background: color-mix(in srgb, var(--flaeche) 85%, var(--text)); }
.link { color: var(--link); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.chip, .stift, .sheet-close { background: var(--flaeche); border: 0; }
.chip:has(input:checked) { background: var(--aktion); color: var(--aktion-text); }
/* --- Eingabefelder: Flaeche, feine Linie erst beim Fokus --------------------------------------------- */
.input, .textarea, select.input { background: var(--flaeche); border: 1px solid transparent; border-radius: 12px; color: var(--text); box-shadow: none; }
.input:focus, .textarea:focus { outline: none; border-color: var(--link); background: var(--karte); }
.zeile, .plan { border-color: var(--linie); }
/* --- Feste Leisten: keine Flaeche, kein Rand - nur ein unsichtbarer Uebergang zur Seitenfarbe ------- */
.sticky-actions, :root[data-theme] .sticky-actions {
  background: linear-gradient(to top, var(--grund) 0, color-mix(in srgb, var(--grund) 70%, transparent) 55%, transparent 100%) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important;
}
/* --- Kopfleiste: 64 px, volle Breite, Glas -------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 120; max-width: none; height: 64px; margin: 0; align-items: center;
  padding: 0 max(var(--rand), calc((100vw - 1180px) / 2));
  background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
}
.marke { min-height: 44px; }
.marke-name { font-family: var(--serif); font-size: 26px; letter-spacing: -0.01em; }
.marke-sub { display: none; }
.marke-kunde img, .marke-kunde.logo-hoch img, .marke-kunde.logo-kompakt img { min-height: 20px; }
.marke-kunde-name { color: var(--text-2); font-weight: 500; font-size: 14px; }
.segmente { display: flex; gap: 2px; padding: 2px; background: var(--flaeche); border-radius: var(--r-segment); font-size: 13px; }
.segment { min-height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-segment-innen); background: transparent; color: var(--text); font: 500 13px var(--sans); cursor: pointer; }
.segment[aria-current="page"] { background: var(--segment-aktiv); box-shadow: var(--segment-schatten); }
.segment[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.segment-ziel { display: inline-grid; place-items: center; min-height: 44px; }
.theme-knopf { border: 0; background: transparent; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--flaeche); color: var(--text); font: 600 13px var(--sans); border: 0; }
.avatar-ziel { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.stage, .stage.breit { padding-top: var(--oben); }
@media (min-width: 900px) { .stage.breit { max-width: 1180px; padding-left: 0; padding-right: 0; } }
@media (max-width: 899px) { .segmente { display: none; } }
.top { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; justify-content: stretch; }
.top .segmente { justify-self: center; grid-column: 3; }
.top .top-rechts { grid-column: 4; display: flex; align-items: center; gap: 4px; flex-direction: row; }
@media (max-width: 420px) { .top .top-rechts { flex-direction: row; } }
/* ===================== Dashboard im Apple-Stil (Paul 25.09.2026) ===================== */
.dash-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: var(--abstand); }
.wk-kw { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text-2); letter-spacing: -0.01em; }
.dash-kopf .lede { margin-top: 10px; }
.dash-knoepfe { display: flex; gap: 10px; }
.dash-knoepfe .btn { min-height: 44px; padding: 0 20px; width: auto; }
.wk-hinweis { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; background: var(--karte); border-radius: var(--r-karte); padding: 16px 22px; box-shadow: var(--karten-schatten); margin-bottom: var(--abstand); }
.wk-hinweis p { margin: 0; flex: 1 1 320px; }
.wk-hinweis-links { display: flex; gap: 18px; }
.wk-automatik { margin: -24px 0 var(--abstand); font-size: var(--t-small); }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; display: inline-block; }
.punkt.wartet { background: var(--wartet); }
.punkt.frei { background: var(--gut); }
.wk-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--spalte-abstand); align-items: start; }
.wk-woche { display: grid; grid-template-columns: repeat(var(--tage), minmax(0, 1fr)); gap: var(--spalte-abstand); }
.wk-tag { font-size: 15px; font-weight: 400; margin: 0 0 10px; letter-spacing: -0.01em; }
.wk-tag b { font-weight: 600; }
.wk-tag span { color: var(--text-2); }
.wk-block { margin-bottom: 16px; }
.wk { display: block; width: 100%; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; position: relative; border-radius: var(--r-karte); outline-offset: 0; }
.wk.ist-gewaehlt { box-shadow: 0 0 0 3px var(--grund), 0 0 0 5px var(--link); }
.wk-ig { aspect-ratio: 4 / 5; overflow: hidden; color: #fff; }
.wk-ig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-schleier { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 55%); }
.wk-ig img ~ .wk-schleier { display: block; }
.wk-ig .wk-h { position: absolute; left: 14px; right: 14px; bottom: 30px; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.wk-ig .wk-firma { position: absolute; left: 14px; bottom: 12px; font-size: 11px; opacity: .85; }
.wk-li { height: 168px; padding: 16px; background: var(--karte); box-shadow: var(--karten-schatten); overflow: hidden; }
.wk-kanal { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.wk-li-h { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -0.01em; }
.wk-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--text-2); min-height: 44px; }
.wk-status .haken { margin-left: auto; }
.haken { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: var(--flaeche); color: var(--text-2); cursor: pointer; position: relative; flex: none; transition: background-color 200ms ease, color 200ms ease; }
.haken::after { content: ""; position: absolute; inset: -6px; } /* 44-px-Klickflaeche */
.haken svg { width: 18px; height: 18px; }
.haken:hover { color: var(--text); }
.haken.ist-frei { background: var(--gut); color: #fff; cursor: default; }
.haken.gross { width: 40px; height: 40px; }
/* Detailansicht */
.wk-detail { position: sticky; top: 84px; background: var(--karte); border-radius: var(--r-gross); padding: 20px; box-shadow: var(--karten-schatten); }
.wk-detail-kanal { margin: 0; font-size: 13px; color: var(--text-2); }
.wk-detail-zeit { margin: 2px 0 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.wk-detail-bild { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-bild); overflow: hidden; color: #fff; }
.wk-detail-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-detail-bild .wk-h { position: absolute; left: 16px; right: 16px; bottom: 18px; font-size: 21px; font-weight: 700; line-height: 1.2; }
.wk-detail-li { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 10px; }
.wk-detail-text { color: var(--text-2); font-size: 14px; line-height: 1.5; white-space: pre-line; max-height: 220px; overflow: hidden; margin: 12px 0 16px; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.wk-freigeben { width: 100%; min-height: 48px; }
.wk-freigegeben { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; border-radius: var(--r-pille); background: color-mix(in srgb, var(--gut) 14%, transparent); color: var(--gut); font-weight: 600; }
.wk-freigegeben svg { width: 18px; height: 18px; }
.wk-bearbeiten { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 8px; min-height: 44px; font-size: 14px; }
.wk-detail-links { display: flex; gap: 8px; justify-content: center; margin: 14px 0 0; color: var(--text-3); font-size: 14px; }
.wk-detail-links .link { font-size: 14px; }
.wk-fuss { margin-top: var(--abstand); font-size: var(--t-small); }
.wk-faellig { margin-bottom: var(--abstand); }
.wk-zeile { display: flex; align-items: center; gap: 12px; background: var(--karte); border-radius: 14px; padding: 12px 16px; margin-top: 8px; box-shadow: var(--karten-schatten); }
.wk-zeile-t { flex: 1; font-weight: 600; }
.wk-tag-titel { font-size: 13px; color: var(--text-2); text-transform: uppercase; letter-spacing: .02em; font-weight: 500; margin: 0 0 6px; }
/* Handy: gruppierte Listen wie in den iPhone-Einstellungen */
.wl-liste, .wl-alle { display: none; }
@media (max-width: 899px) {
  .wk-layout { display: none; }
  .wl-liste { display: block; }
  .dash-knoepfe .btn[data-alle-freigeben] { display: none; }
  .wl-alle { display: block; position: fixed; left: 20px; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); min-height: 52px; z-index: 110; width: auto; }
  .dash { padding-bottom: 90px; }
  .wl-tag { margin-bottom: 26px; }
  .wl-titel { font-size: 13px; font-weight: 400; color: var(--text-2); letter-spacing: .02em; margin: 0 0 7px 16px; }
  .wl-gruppe { background: var(--karte); border-radius: 14px; overflow: hidden; box-shadow: var(--karten-schatten); }
  .wl-zeile { display: flex; align-items: center; gap: 10px; padding-right: 14px; position: relative; }
  .wl-zeile + .wl-zeile::before { content: ""; position: absolute; top: 0; right: 0; left: 70px; height: 1px; background: var(--linie); }
  .wl-inhalt { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 12px; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; min-height: 64px; cursor: pointer; min-width: 0; }
  .wl-bild { width: 44px; height: 55px; border-radius: 8px; object-fit: cover; flex: none; display: block; }
  .wl-text { display: grid; place-items: center; background: var(--flaeche); color: var(--text-2); font-weight: 700; font-size: 14px; }
  .wl-text-block { min-width: 0; display: grid; gap: 2px; }
  .wl-h { font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wl-meta { font-size: 13px; color: var(--text-2); }
  .dash-kopf { margin-bottom: 24px; }
}
.wk-folgt { position: absolute; left: 0; right: 0; top: 14px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .85); }
/* Dein Plan: dieselben Karten wie Woche und Dashboard, drei nebeneinander, gleich hoch */
.plan-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalte-abstand); margin-top: var(--abstand); align-items: start; }
.plan-karte-kanal { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }
.plan-karten .wk-li { height: auto; aspect-ratio: 4 / 5; }
.plan-karten .wk-li .wk-li-h { -webkit-line-clamp: 12; }
@media (max-width: 700px) { .plan-karten { grid-template-columns: 1fr; } .plan-karten .wk-li { aspect-ratio: auto; height: 168px; } }
.wk-li-text { display: none; }
.plan-karten .wk-li-text { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.plan-karten .wk-li .wk-li-h { -webkit-line-clamp: 4; }
/* Vorschau-Woche: dieselbe Kartenoptik (Bild 4:5 ohne Rahmen, LinkedIn als ruhige Karte) */
.rk-bild { aspect-ratio: 4 / 5; border-radius: var(--r-karte); }
.rk-text, :root[data-theme] .rk-text { background: var(--karte); border: 0; border-top: 0; border-radius: var(--r-karte); box-shadow: var(--karten-schatten); aspect-ratio: auto; height: 168px; padding: 16px; }
.rk-text b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.rk-kanal { font-size: 13px; color: var(--text-2); }
.segmente { align-items: center; align-self: center; }
.segment-ziel { display: contents; }
.segment { position: relative; height: 30px; min-height: 0; }
.segment::after { content: ""; position: absolute; inset: -7px 0; } /* 44-px-Klickflaeche ohne die Pille aufzublaehen */

/* ===================== Nachbesserung nach der Sichtpruefung (25.09.2026) ===================== */
/* Kundenlogo auf der Achse der Kopfleiste - die alte Ausrichtung "oben + 2,5 px" stammte aus der
   zweizeiligen Marke mit Zusatzzeile, die es im Apple-Stil nicht mehr gibt. */
.top .marke-kunde { align-self: center; height: auto; margin: 0; }
/* Nebentext auf grauer Flaeche: #6E6E73 auf #E8E8ED liegt bei 4,15:1 - unter AA. Dunkler nur im Hellen. */
:root { --text-2-flaeche: #56565B; }
:root[data-theme="dark"] { --text-2-flaeche: var(--text-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text-2-flaeche: var(--text-2); } }
.th-quelle, .wl-text { color: var(--text-2-flaeche); }
/* Handy: Kundenlogo bleibt in der Kopfleiste (keine zweite Zeile unter der festen 64-px-Leiste). */
@media (max-width: 420px) {
  .top { grid-template-columns: auto minmax(0, auto) 1fr auto; gap: 10px; }
  .top .marke-kunde { order: 0; flex-basis: auto; padding-left: 10px; border-left: 1px solid var(--linie); min-width: 0; }
  .top .marke-kunde img, .top .marke-kunde.logo-hoch img { max-width: 104px; }
  .top .marke-kunde-name { max-width: 120px; font-size: 14px; }
}
/* Ein <button> zentriert seinen Inhalt senkrecht - die LinkedIn-Karte liest sich von oben. */
.wk-li { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }

/* ===================== Pauls Entscheidungen 25.09.2026 nachmittags ===================== */
/* Verbinden: ruhige Pille in unserer Flaeche, kleines Kanalzeichen, Text in Textfarbe (AA in beiden Modi). */
.kanal-knopf.kanal-knopf-ruhig { background: var(--flaeche); color: var(--text); gap: 8px; font-weight: 500; }
.kanal-knopf.kanal-knopf-ruhig:hover { background: color-mix(in srgb, var(--flaeche) 85%, var(--text)); }
.knopf-zeichen { width: 16px; height: 16px; flex: none; }
/* Eigener Beitrag: zwei grosse Wahlflaechen. */
.eigen-wahl { display: grid; gap: 12px; }
.eigen-wahl-knopf { display: grid; gap: 4px; text-align: left; min-height: 44px; padding: 16px 18px; border: 0; border-radius: var(--r-karte); background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; }
.eigen-wahl-knopf b { font-size: 17px; font-weight: 600; }
.eigen-wahl-knopf span { font-size: var(--t-small); color: var(--text-2-flaeche); }
.eigen-wahl-knopf:hover { background: color-mix(in srgb, var(--flaeche) 85%, var(--text)); }
/* Freigabe-Haken: immer sichtbar, dezent grau; freigegeben gruen (Haken in Gruen auf zarter Gruenflaeche -
   weisser Haken auf #30D158 laege im Dunkeln unter 3:1). */
.haken { opacity: 1; visibility: visible; color: var(--text-2-flaeche); }
.haken.ist-frei { background: color-mix(in srgb, var(--gut) 18%, transparent); color: var(--gut); }
.wk-kanal-fehlt { text-align: center; margin: 8px 0 0; }
/* Kontrast AA: Nebenzeichen (Trennpunkte, Punkt-Platzhalter) nicht mehr in --text-3. */
.wk-detail-links { color: var(--text-2); }
/* Wochenansicht: Status in einer Zeile, feste Hoehe - alle Karten einer Zeile bleiben auf gleicher Hoehe. */
.wk-status { height: 44px; min-height: 0; }
.wk-status > span:not(.punkt) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ===================== Pauls Test 25.09.2026 abends ===================== */
/* Platzhalter: gleiche Groesse wie die Karte, damit Reihen und Tage ausgerichtet bleiben. */
.wk-platz { cursor: default; background: transparent; box-shadow: none; border: 1.5px dashed var(--linie-stark); }
.wk-platz.wk-entsteht, .wl-platz.wk-entsteht .wl-bild { border: 0; background: linear-gradient(100deg, var(--flaeche) 30%, color-mix(in srgb, var(--flaeche) 60%, var(--karte)) 50%, var(--flaeche) 70%); background-size: 300% 100%; animation: wk-schimmer 1.6s ease-in-out infinite; }
@keyframes wk-schimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .wk-platz.wk-entsteht, .wl-platz.wk-entsteht .wl-bild { animation: none; } }
.wl-platz { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 64px; }
.wl-platz .wl-bild { width: 44px; height: 55px; border-radius: 8px; background: var(--flaeche); flex: none; }
/* Instagram-Kachel ohne Bild: derselbe Aufbau wie das fertige Bild (Ueberschrift oben an fester Stelle,
   Firmenname unten links, Groessen relativ zur Kachel). Das Bild ist quadratisch und wird auf 4:5
   beschnitten - daher 10 % statt 18 % Rand. */
.wk-ig, .wk-detail-bild { container-type: inline-size; }
.wk-ig .wk-h, .wk-detail-bild .wk-h { position: absolute; left: 10%; right: 10%; top: 26%; bottom: auto; font-size: 10.5cqw; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.wk-ig .wk-firma, .wk-detail-bild .wk-firma { position: absolute; left: 10%; bottom: 6%; font-size: 4.6cqw; font-weight: 600; opacity: 1; }
/* "Beitraege werden erstellt" direkt unter der Zeile, lesbar und dezent bewegt. */
.wk-entsteht-zeile { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 15px; color: var(--text-2); }
.wk-puls { width: 8px; height: 8px; border-radius: 50%; background: var(--link); animation: wk-puls 1.4s ease-in-out infinite; flex: none; }
@keyframes wk-puls { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .wk-puls { animation: none; } }
/* Detailansicht: immer der ganze Text, ohne Ausblenden; die Ansicht selbst scrollt, wenn noetig. */
.wk-detail { max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; }
.wk-detail-text { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; color: var(--text); }
/* Markentoenung (Paul 25.09.2026 abends, "wirklich nur dezent"): ein Hauch oben im Seitenhintergrund,
   12 % dunkel / 7 % hell, nur auf html - Karten und Leisten haben eigene Flaechen. Gemessen ab der
   Unterkante der 64-px-Kopfleiste: ab dem Seitenrand gerechnet laege der sichtbare Teil fast ganz hinter ihr. */
html { background: radial-gradient(1100px 420px at 50% calc(64px - 200px), color-mix(in srgb, var(--marke) var(--marke-deckkraft), transparent), transparent 70%) no-repeat, var(--grund); }
:root { --marke-deckkraft: 7%; }
:root[data-theme="dark"] { --marke-deckkraft: 12%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --marke-deckkraft: 12%; } }
/* Themen-Chips in den Einstellungen: sauber umbrechen, nichts ueberlappt. */
.zeile-v .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.zeile-v .chips .chip { min-height: 34px; padding: 6px 13px; line-height: 1.3; }

/* ===================== Alle Geraete (Paul 25.09.2026, Nachtrag) =====================
   Handy (bis 599) und iPad hochkant (600-899): gruppierte Liste, Detail als Blatt.
   900-1199 (iPad quer, kleine Laptops): 5 Spalten, Detail als Blatt. Ab 1200: Detail rechts. */
@media (min-width: 900px) {
  .stage.breit { max-width: none; padding-left: max(32px, calc((100vw - 1180px) / 2)); padding-right: max(32px, calc((100vw - 1180px) / 2)); }
  .top { padding-left: max(32px, calc((100vw - 1180px) / 2)); padding-right: max(32px, calc((100vw - 1180px) / 2)); }
}
@media (max-width: 1199px) {
  .wk-layout { grid-template-columns: minmax(0, 1fr); }
  .wk-layout > .wk-detail { display: none; }
  .wk .ist-gewaehlt, .wk.ist-gewaehlt { box-shadow: none; outline: 0; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .stage.breit { max-width: 720px; }
  .wl-alle { left: 50%; right: auto; transform: translateX(-50%); width: min(420px, calc(100vw - 40px)); }
}
/* Detailansicht im Blatt: ohne eigene Karte, Bild nicht hoeher als noetig. */
#sheet-body .wk-detail { position: static; max-height: none; overflow: visible; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
#sheet-body .wk-detail-kanal { display: none; }
#sheet-body .wk-detail-bild { max-width: 360px; margin: 0 auto; }
/* Kopfleiste: Segment-Navigation auf jeder Breite, nie umbrechen; schmal wird sie kleiner. */
.segmente { display: flex !important; white-space: nowrap; flex-wrap: nowrap; }
/* 26.09.2026: das !important oben hob das hidden-Attribut auf - im Onboarding stand die leere Navigation
   als Punkt mitten in der Kopfleiste. */
.segmente[hidden] { display: none !important; }
.top { overflow: hidden; }
@media (max-width: 899px) {
  .top .marke-kunde { display: none !important; }
  .top { grid-template-columns: auto 1fr auto; gap: 8px; }
  .top .segmente { grid-column: 2; justify-self: center; }
  .top .top-rechts { grid-column: 3; }
}
@media (max-width: 599px) {
  .marke-name { font-size: 22px; }
  .segment { padding: 0 10px; font-size: 13px; }
  .avatar-ziel { display: none; }
}
@media (max-width: 359px) { .segment { padding: 0 8px; font-size: 12px; } }
/* Nirgends seitliches Scrollen der ganzen Seite. */
html, body { overflow-x: clip; }
.wl-h, .wk-li-h, .wk-detail-zeit { overflow-wrap: anywhere; }
.wk-hinweis-links .link { white-space: nowrap; }

/* ===================== Teil 2 (Paul 25.09.2026) ===================== */
/* Ziehen */
[data-ziehen] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (hover: hover) { .wk-slot[data-ziehen] .wk { cursor: grab; } }
body.zieht, body.zieht * { cursor: grabbing !important; }
/* Zweite Fassung (Paul 25.09.2026): die Karte haengt leicht angehoben am Zeiger, der Platz bleibt ruhig
   sichtbar, gueltige Ziele leuchten dezent, das unter dem Zeiger deutlicher. Nichts sonst bewegt sich. */
.zieh-geist { position: fixed; left: 0; top: 0; margin: 0; z-index: 400; pointer-events: none; will-change: transform; border-radius: var(--r-karte); box-shadow: none; outline: 0 !important; }
.zieh-geist > * { transition: transform 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease; border-radius: inherit; }
.zieh-geist.gehoben { box-shadow: 0 16px 36px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .12); scale: 1.03; transition: scale 160ms cubic-bezier(.2,.8,.2,1), box-shadow 160ms ease; }
.zieh-geist.wl-inhalt { background: var(--karte); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; }
.zieh-platz > .wk-block > .wk, .wl-zeile.zieh-platz { opacity: .28; }
.zieh-platz .wk-status { opacity: .4; }
.zieh-drueckt > .wk-block > .wk, .wl-zeile.zieh-drueckt { scale: .97; transition: scale 300ms ease; }
.ist-moeglich > .wk-block > .wk, .wl-tag.ist-moeglich .wl-gruppe { outline: 2px dashed color-mix(in srgb, var(--link) 45%, transparent); outline-offset: 3px; }
.ist-ziel > .wk-block > .wk, .wl-tag.ist-ziel .wl-gruppe { outline: 2px solid var(--link); outline-offset: 3px; background-color: color-mix(in srgb, var(--link) 6%, var(--karte)); }
body.zieht { -webkit-user-select: none; user-select: none; }
.wk img, .wl-bild { -webkit-user-drag: none; }
/* Verschieben als kleines Menue am Knopf (Desktop) */
.tag-menue { position: fixed; z-index: 300; width: 300px; max-height: calc(100vh - 24px); overflow: auto; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08); }
.tag-menue .tag-liste { background: var(--karte); }
button.tag-zeile { width: 100%; background: transparent; border: 0; color: var(--text); font: inherit; text-align: left; }
button.tag-zeile:hover, button.tag-zeile:focus-visible { background: color-mix(in srgb, var(--link) 10%, transparent); outline: 0; }
/* Uhrzeit in der Statuszeile (13 px, Nebentext) */
.wk-status-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-zeit { color: var(--text-2); }
.wk-slot { min-width: 0; }
/* Haken: gruen = freigegeben, nochmal tippen nimmt zurueck */
button.haken.ist-frei { cursor: pointer; }
button.haken.ist-frei:hover { background: color-mix(in srgb, var(--gut) 28%, transparent); }
/* Tagwahl als Liste */
.tag-liste { display: grid; background: var(--flaeche); border-radius: 14px; overflow: hidden; }
.tag-zeile { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; cursor: pointer; border-top: 1px solid var(--linie); }
.tag-zeile:first-child { border-top: 0; }
.tag-zeile input { accent-color: var(--link); width: 20px; height: 20px; flex: none; }
.tag-zeile-t { flex: 1; }
.tag-zeile-t b { font-weight: 600; }
.tag-zeile-m { font-size: 13px; color: var(--text-2-flaeche); text-align: right; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-zeile.ist-fest { opacity: .55; cursor: default; }
.tag-zeile:has(input:checked) { background: color-mix(in srgb, var(--link) 12%, transparent); }
/* Blaetter: unter 1200 px von unten (Handy, iPad), darueber mittig */
@media (max-width: 1199px) {
  .sheet-overlay { align-items: end; justify-items: center; }
  .sheet { width: min(640px, 100%); border-radius: var(--r-gross) var(--r-gross) 0 0; border-bottom: 0; }
}

/* ===================== Rhythmus-Editor (Paul 25.09.2026) ===================== */
.rh { display: grid; gap: 14px; }
.rh-schalter { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.rh-schalter input { width: 20px; height: 20px; accent-color: var(--link); }
.rh-zeile { display: grid; gap: 10px; padding: 14px 16px; background: var(--flaeche); border-radius: 14px; }
.rh-zeile[hidden] { display: none; }
.rh-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rh-name { font-weight: 600; }
.rh-uhr .input { width: 118px; min-height: 44px; background: var(--karte); }
.rh-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.rh-pille { position: relative; cursor: pointer; }
.rh-pille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rh-pille span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--r-pille); background: var(--karte); color: var(--text); font-size: 15px; font-weight: 500; transition: background-color 160ms ease, color 160ms ease; }
.rh-pille input:checked + span { background: var(--aktion); color: var(--aktion-text); }
.rh-pille input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.rh-protag { justify-self: start; min-height: 44px; font-size: 14px; }
.rh-tageszeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rh-tageszeiten[hidden], .rh-tz[hidden] { display: none; }
.rh-tz { display: flex; align-items: center; gap: 8px; }
.rh-tz span { width: 28px; color: var(--text-2-flaeche); font-size: 14px; }
.rh-tz .input { flex: 1; min-height: 44px; background: var(--karte); }
.rh-summe { margin: 0; font-size: 13px; color: var(--text-2); }
@media (max-width: 599px) {
  .rh-kopf { flex-wrap: wrap; }
  .rh-uhr, .rh-uhr .input { width: 100%; }
  .rh-pille span { min-width: 40px; padding: 0 8px; }
  .rh-pillen { gap: 4px; }
  .rh-tageszeiten { grid-template-columns: 1fr; }
}
.rueck-frage { flex-wrap: wrap; }
.rueck-frage .rueck-nein { opacity: .75; }

/* ===================== Tiefer recherchieren (Paul 25.09.2026) ===================== */
.zeile-k.mit-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tr-knopf { min-height: 36px; padding: 0 16px; font-size: 14px; position: relative; }
.tr-knopf::after { content: ""; position: absolute; inset: -4px 0; } /* 44-px-Klickflaeche */
.tr-knopf:disabled { opacity: 1; color: var(--text-2-flaeche); cursor: default; }
.tr-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); text-transform: none; letter-spacing: 0; font-weight: 400; }
.tr-satz { margin: 0 0 10px; font-size: 13px; color: var(--text-2); max-width: 60ch; }
.tr-fehler { color: var(--schlecht); }
.chip-neu { margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pille); background: color-mix(in srgb, var(--link) 16%, transparent); color: var(--link); font-size: 11px; font-weight: 600; }
.tr-hinweis { margin-bottom: 16px; }
@media (max-width: 599px) { .zeile-k.mit-kopf { align-items: flex-start; } .tr-status { white-space: normal; } }

/* ===================== Einstellungen als Tabs, Bilder-Tab (Paul 25.09.2026) ===================== */
.einst-tabs { display: inline-flex; gap: 2px; padding: 2px; margin: 18px 0 8px; background: var(--flaeche); border-radius: var(--r-segment); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.einst-tabs::-webkit-scrollbar { display: none; }
.einst-tabs .segment { white-space: nowrap; }
.einst-tabs .segment[aria-current="page"] { background: var(--segment-aktiv); box-shadow: var(--segment-schatten); }
@media (max-width: 599px) { .einst-tabs { display: flex; width: 100%; } .einst-tabs .segment-ziel { flex: 1; } .einst-tabs .segment { width: 100%; padding: 0 6px; } }
.einst-inhalt { margin-top: 8px; }
/* Zaehler */
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--flaeche); border-radius: var(--r-pille); padding: 2px; }
.stepper-k { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font: 500 22px var(--sans); cursor: pointer; }
.stepper-k:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, transparent); }
.stepper-k:disabled { color: var(--text-3); cursor: default; }
.stepper output { min-width: 32px; text-align: center; font: 600 17px var(--sans); font-variant-numeric: tabular-nums; }
/* Bildwelt-Karte */
.bw-karte, .bw-fotos { background: var(--karte); border-radius: var(--r-karte); box-shadow: var(--karten-schatten); padding: 20px; margin: 24px 0; }
.bw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bw-kopf h2, .bw-fotos h2 { margin: 0; font-size: var(--t-h2); }
.bw-karte .tr-satz { margin-top: 8px; }
.bw-gruppe { margin: 18px 0 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.bw-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bw-punkt { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; border-radius: 10px; background: var(--flaeche); }
.bw-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bw-herkunft { font-size: 12px; color: var(--text-2-flaeche); white-space: nowrap; }
.bw-knopf { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2-flaeche); cursor: pointer; display: inline-grid; place-items: center; font-size: 18px; position: relative; flex: none; }
.bw-knopf::after { content: ""; position: absolute; inset: -4px; }
.bw-knopf svg { width: 14px; height: 14px; }
.bw-knopf:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.bw-edit { gap: 8px; padding: 6px 8px; }
.bw-edit .input { flex: 1; min-height: 40px; background: var(--karte); }
.bw-regel { margin: 14px 0 18px; font-size: 13px; color: var(--text-2); }
.bw-frage { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--link) 10%, var(--karte)); }
.bw-frage span { flex: 1; min-width: 200px; }
.bw-aktionen { margin-top: 8px; }
.bw-fotos .bild-hochladen { margin-top: 14px; }
.bw-fotos .schalter { margin-top: 14px; }
@media (max-width: 599px) {
  .bw-karte, .bw-fotos { padding: 16px; margin: 18px 0; }
  .bw-punkt { flex-wrap: wrap; padding: 6px 4px 6px 12px; }
  .bw-herkunft { order: 3; width: 100%; padding-bottom: 4px; }
}
/* Themen nach Gruppen */
.themen-gruppe { margin-bottom: 12px; }
.themen-gruppe-k { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-2); }

/* ---- Vorschau-Woche wie im Dashboard (Paul 26.09.2026) -------------------------------------------
 * Dieselben Karten wie "Deine Woche"; der Knopf schwebt als Pille zentriert unten, ohne Kasten, und die
 * Seite laesst darunter so viel Platz, dass er nie Inhalte verdeckt. */
.vorschau { padding-bottom: 128px; }
.vorschau .fortschritt { margin: 14px 0 6px; }
.vorschau .langsam { margin: 0 0 10px; }
.vorschau #vorschau-woche { margin-top: 18px; }
.vorschau .wk-ig img { animation: rk-bild .9s ease; }
.vorschau .wk-entwurf { cursor: default; }
.vorschau .wk-entwurf .wk-h, .vorschau .wk-entwurf .wk-li-h { animation: rk-auf .5s ease; }
.weiter-schwebend {
  position: fixed; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%);
  z-index: 110; background: none; padding: 0; margin: 0; pointer-events: none;
}
.weiter-schwebend .btn.pille {
  pointer-events: auto; width: auto; min-width: 240px; padding: 15px 44px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12);
}
.weiter-schwebend .btn.pille:disabled { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .vorschau .wk-ig img, .vorschau .wk-entwurf .wk-h, .vorschau .wk-entwurf .wk-li-h { animation: none; } }
/* Kopfleiste (Paul 26.09.2026: Sonne/Mond-Knopf rechts abgeschnitten): rechts steht der Knopfbereich immer
   in voller Breite; schrumpfen duerfen nur Kundenlogo und Navigation. */
.top .top-rechts { flex: none; min-width: max-content; justify-self: end; }
.top > .marke, .top .marke-kunde, .top .segmente { min-width: 0; }
.top .segmente { overflow: hidden; }
/* Neutraler Hinweis unter "Vorschau erstellen" (Paul 26.09.2026): Budget-, Server- und Zeitfehler - nicht rot,
   das Adressfeld bleibt normal. Rot ist nur die ungueltige oder nicht erreichbare Adresse. */
.hinweis-neutral {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: color-mix(in srgb, #f5c542 16%, var(--karte)); color: var(--text); border: 1px solid color-mix(in srgb, #f5c542 35%, transparent);
}
.hinweis-neutral[hidden] { display: none; }

/* ---- Layout-Stabilitaet (Paul 26.09.2026): nichts springt, nichts scrollt ungewollt ------------------------
 * Die Woche nimmt die ganze Breite; die Detailansicht ist eine Ueberlagerung (Desktop: Panel rechts ueber dem
 * Inhalt, darunter Blatt von unten) und veraendert das Raster nie. */
.wk-layout, .wk-layout.vorschau-layout { grid-template-columns: minmax(0, 1fr); }
.wk-layout > .wk-detail { display: none; }
@media (min-width: 900px) {
  .sheet-overlay.seite { align-items: stretch; justify-items: end; background: color-mix(in srgb, #000 22%, transparent); }
  .sheet-overlay.seite .sheet {
    width: min(440px, 92vw); height: 100%; max-height: none; border-radius: var(--r-gross) 0 0 var(--r-gross);
    border: 0; box-shadow: -12px 0 40px rgba(0, 0, 0, .18); animation: von-rechts var(--dauer) var(--kurve) both;
    padding: 24px 24px max(24px, env(safe-area-inset-bottom));
  }
}
@keyframes von-rechts { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet-overlay.seite .sheet { animation: none; } }
#sheet-body .wk-detail-text { max-height: none; -webkit-mask-image: none; mask-image: none; }
/* Scroll-Anker: beim Austausch einer Kachel haelt der Browser die Leseposition. */
#stage { overflow-anchor: auto; }
/* Vorschau: reservierte Hoehen, damit der Wechsel "entsteht" -> "fertig" nichts verschiebt. */
.vorschau > h1 { min-height: 2.3em; }
@media (min-width: 900px) { .vorschau > h1 { min-height: 1.15em; } }
.vorschau > .lede { min-height: calc(3 * 1.4em); }
.vorschau .fortschritt { min-height: 26px; }
.vorschau .fortschritt.ist-fertig { visibility: hidden; }
.vorschau .langsam { min-height: 1.5em; }
.vorschau .langsam[hidden] { display: block; visibility: hidden; }
/* Dashboard: "Beiträge werden erstellt …" steht in der Einleitung selbst - gleiche Schrift und Hoehe wie danach. */
.lede.wk-entsteht-zeile { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: var(--t-h2); line-height: 1.4; }
.wl-bild { aspect-ratio: 4 / 5; }
.dash .dash-kopf .lede, .dash .dash-kopf .lede.wk-entsteht-zeile { margin: 14px 0 0; line-height: 1.4; min-height: 1.4em; font-size: var(--t-h2); }
/* Detail: Trennpunkte zwischen den Links auf Schrifthoehe (sassen als kleine Punkte oben). */
.wk-detail-links { align-items: center; flex-wrap: wrap; }
.wk-detail-links > span[aria-hidden="true"] { font-size: 14px; line-height: 1; color: var(--text-3); }