/* Seiten: Anmelden, Projekte, Projekt, Einstellungen, Kanäle, Marken, Abo, Konto */

/* ---------- Anmelden ---------- */
.auth { min-height: 100dvh; display: grid; }
.auth-tafel { display: none; }
.auth-spalte { display: grid; grid-template-rows: auto 1fr; padding: max(16px, env(safe-area-inset-top)) var(--rand) 40px; }
.auth-spalte > .marke { margin: 6px 0 0; }
.auth-inhalt { display: grid; align-items: center; justify-items: center; padding: 32px 0; }
.auth-karte { display: grid; gap: 18px; width: 100%; max-width: 400px; }
.auth-karte h1 { font-size: clamp(46px, 11vw, 64px); }
.auth-karte .unter { margin-top: -6px; font-size: 16px; }
.auth-karte form { display: grid; gap: 16px; margin-top: 6px; }
.auth-wechsel { padding-top: 18px; border-top: 1px solid var(--linie); color: var(--grau); font-size: 15px; }
.auth-wechsel a { color: var(--tinte); font-weight: 700; }
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1.1fr) minmax(440px, 0.9fr); }
  .auth-spalte > .marke { visibility: hidden; }
  .auth-tafel {
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px 40px 36px; color: #e9efe9;
    background-color: var(--matte);
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 80px 80px;
  }
  .auth-spruch { font-weight: 800; font-stretch: 72%; font-size: clamp(56px, 5.8vw, 92px); line-height: 0.96; letter-spacing: -0.01em; color: var(--papier); }
  .auth-spruch em { font-style: normal; color: var(--gelb); }
  .auth-spur { display: flex; align-items: center; gap: 3px; height: 72px; padding: 0 8px; border-radius: 6px; background: var(--matte-2); }
  .auth-spur i { flex: 1; height: var(--h); border-radius: 1px; background: #6f9a85; }
  .auth-spur i:nth-child(n+9):nth-child(-n+13), .auth-spur i:nth-child(n+27):nth-child(-n+31), .auth-spur i:nth-child(n+44):nth-child(-n+47) { background: var(--gelb); }
  .auth-fuss { opacity: 0.7; }
}

/* ---------- Projekte ---------- */
.p-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.p-raster.ist-leer { display: block; }
.p-karte { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); text-decoration: none; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.p-karte:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .p-karte:hover { border-color: var(--tinte); } .p-karte:hover h2 { text-decoration: underline; text-decoration-thickness: 1.5px; } }
.p-bild {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
  background-color: var(--matte);
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
[data-status="fehler"] .p-bild { background-color: #3a372d; }
[data-status="wartet"] .p-bild { background-color: #2c3f36; }
.p-stapel { position: absolute; top: 9%; bottom: 9%; left: 50%; aspect-ratio: 9 / 16; transform: translateX(-50%); }
.p-stapel img { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.p-stapel::before, .p-stapel::after { content: ""; position: absolute; inset: 7% 4%; border-radius: 5px; background: #e9e4d6; opacity: 0.16; }
.p-stapel::before { transform: translateX(-40%) rotate(-3deg); }
.p-stapel::after { transform: translateX(40%) rotate(3deg); }
.p-stapel[data-mehr="1"]::before, .p-stapel[data-mehr="1"]::after, .p-stapel[data-mehr="2"]::before { display: none; }
.p-dauer { position: absolute; z-index: 3; left: 10px; bottom: 9px; padding: 2px 6px; border-radius: 3px; background: rgba(22,21,15,.55); color: #e9efe9; font-size: 12px; }
.p-text { display: grid; gap: 10px; padding: 14px 16px 16px; }
/* Ganze Karte klickbar über den Titel-Link; Knöpfe liegen darüber */
.p-link { color: inherit; text-decoration: none; }
.p-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.p-link:focus-visible { outline: none; }
.p-karte:has(.p-link:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; }
.p-aktionen { position: relative; z-index: 2; }
.knopf-zusatz { margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.4); font-size: 12.5px; font-weight: 500; }
[data-status="vorschlag"] .p-bild { background-color: #2c3f36; }
[data-status="vorschlag"] .punkt { background: var(--gelb); box-shadow: 0 0 0 3px rgba(241,211,107,.35); }
[data-status="vorschlag"] .spur-welle i { opacity: 0.28; }
.p-text h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 22px; font-stretch: 78%; font-weight: 750; line-height: 1.08; }
.p-quelle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; color: var(--grau); }
.p-quelle .ic { width: 16px; height: 16px; }
.p-quelle.gross { margin-top: 14px; font-size: 15px; }
.p-quelle a { color: var(--tinte); font-weight: 600; }
.hinweis-box.vorschlag { max-width: 720px; margin-bottom: 32px; background: #f6ecc4; }
.hinweis-box .p-aktionen { margin-top: 14px; }
.hinweis-box .p-aktionen .knopf { margin-top: 0; }

/* Tonspur mit Kopfzeiger (laufende Projekte) */
.spur { position: absolute; inset: 24% 7%; }
.spur-welle { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.spur-welle i { flex: 1; min-width: 1px; height: var(--h); border-radius: 1px; background: #6f9a85; opacity: 0.5; transition: background-color 300ms ease, opacity 300ms ease; }
.spur-welle i.durch { background: var(--gelb); opacity: 1; }
[data-status="wartet"] .spur-welle i { opacity: 0.28; }
[data-status="fehler"] .spur-welle i { background: #8d8778; opacity: 0.35; }
.spur-kopf { position: absolute; top: -10%; bottom: -10%; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); transition: left 900ms var(--ease-out); }

/* Leerzustand Projekte: langes Video wird zu Hochkant-Clips */
.leer-bild { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.leer-bild .lang { width: 132px; aspect-ratio: 16 / 9; border: 1.5px dashed var(--linie-2); border-radius: 6px; }
.leer-bild .pfeil { font: 500 20px var(--mono); color: var(--signal); }
.leer-bild .hoch { width: 34px; aspect-ratio: 9 / 16; border-radius: 4px; background: var(--tinte); }
.leer-bild .hoch:nth-child(4) { background: var(--signal); }
.leer-bild .hoch:nth-child(5) { background: var(--gelb); }

/* ---------- Neues Projekt / Kanal-Formular ---------- */
.neu { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 980px; }
.block { display: grid; gap: 16px; min-width: 0; }
.block-titel { display: flex; align-items: baseline; gap: 12px; font-size: clamp(28px, 3.6vw, 36px); }
.block-titel .nr { font-size: 15px; color: var(--signal-text); }
.quelle { display: grid; gap: 14px; }
.ablage { position: relative; display: grid; justify-items: center; gap: 6px; padding: 32px 16px; border: 1.5px dashed #a59d8a; border-radius: 10px; background: var(--flaeche); color: var(--tinte-2); text-align: center; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.ablage .ic { width: 28px; height: 28px; margin-bottom: 4px; color: var(--signal); }
.ablage-text { font-size: 17px; }
.ablage.drueber { border-color: var(--signal); background: #fbe9e1; }
@media (hover: hover) and (pointer: fine) { .ablage:hover { border-color: var(--tinte); } }
.ablage:focus-within { outline: 2px solid var(--signal); outline-offset: 3px; }
.datei-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 16px; border: 1.5px solid var(--tinte); border-radius: 10px; background: #fff; }
.datei-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.oder { display: flex; align-items: center; gap: 12px; color: var(--grau); font-size: 14px; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.hoch-fortschritt { display: grid; gap: 8px; padding: 16px; border-radius: 10px; background: var(--papier-2); }
.hoch-fortschritt .knopf-text { justify-self: start; min-height: 40px; padding: 0 2px; }
.leiste-unten { position: sticky; bottom: var(--unten); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: -8px; padding: 14px 0 16px; border-top: 1.5px solid var(--tinte); background: var(--papier); }
.leiste-unten .knopf { min-width: 200px; }
@media (max-width: 559px) { .leiste-unten { flex-wrap: nowrap; padding: 10px 0 12px; } .leiste-unten .hinweis { font-size: 13px; } .leiste-unten .knopf { min-width: 0; flex: none; } }
@media (min-width: 900px) { .leiste-unten { bottom: 0; } }

/* Einstellungs-Feld: Zeilen wie auf einem Datenblatt */
.einst { border-top: 1.5px solid var(--tinte); }
.einst-zeile { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--linie); }
.einst-zeile > legend, .einst-zeile > .legende { float: left; padding: 0; font-weight: 700; font-size: 16px; }
.einst-wert { display: grid; gap: 10px; min-width: 0; justify-items: start; }
.einst-wert > .wahl, .einst-wert > .chips, .einst-wert > select, .einst-wert > .regler { justify-self: stretch; }
.einst-wert > select { max-width: 420px; }
@media (min-width: 760px) { .einst-zeile { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } .einst-zeile > legend, .einst-zeile > .legende { padding-top: 10px; } }
.anzahl .schalter { justify-self: start; }
.untertitel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seg seg" "emo handy"; align-items: start; gap: 12px 16px; }
.untertitel-regler { display: contents; }
.untertitel .segment { grid-area: seg; justify-self: start; }
.untertitel .schalter { grid-area: emo; }
.untertitel .handy { grid-area: handy; }
@media (min-width: 760px) { .untertitel { grid-template-areas: "seg handy" "emo handy"; grid-template-rows: auto 1fr; } }

/* Mini-Handy mit Untertiteln (wie „Untertitel“ auf der Startseite) */
.handy { --hl: var(--gelb); position: relative; width: 112px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 9px; background: #2e2b23; }
.handy::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 76%; height: 42%; border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: #4a463b; transform: translateX(-50%); }
.handy::after { content: ""; position: absolute; left: 50%; bottom: 38%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #4a463b; transform: translateX(-50%); }
.handy-text { position: absolute; z-index: 1; left: 7px; right: 7px; top: 66%; transform: translateY(-50%); text-align: center; color: #fff; line-height: 1.12; }
.handy-text .emoji { display: none; }
.handy.emoji-an .emoji { display: inline; }
.handy[data-stil="fett"] .handy-text { font-weight: 900; font-stretch: 75%; font-size: 15px; text-transform: uppercase; text-shadow: 0 1.5px 0 #000; }
.handy[data-stil="fett"] span.jetzt { color: var(--hl); }
.handy[data-stil="kasten"] .handy-text { font-weight: 700; font-size: 11px; line-height: 1.75; }
.handy[data-stil="kasten"] span:not(.emoji) { padding: 1px 3px; border-radius: 2px; background: var(--papier); color: var(--tinte); }
.handy[data-stil="kasten"] span.jetzt { background: var(--signal); color: #fff; }
.handy[data-stil="schlicht"] .handy-text { font-weight: 600; font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.handy[data-stil="schlicht"] span.jetzt { text-decoration: underline 2px var(--signal); text-underline-offset: 3px; }
.handy[data-stil="aus"] .handy-text { display: none; }
@media (min-width: 760px) { .handy { width: 128px; } .handy[data-stil="fett"] .handy-text { font-size: 17px; } }

/* Layout-Schemata */
.layout { justify-items: start; }
.schema { width: 30px; height: 54px; margin-bottom: 8px; }
.schema .rahmen { fill: var(--papier-2); stroke: var(--linie-2); stroke-width: 1.5; }
.schema .fig > * { fill: #a59d8a; }
.schema .pfeil, .schema .hilfe, .schema .trenn { fill: none; stroke: #a59d8a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.schema .schirm { fill: none; stroke: #a59d8a; stroke-width: 1.5; }
.wahl-karte:has(:checked) .schema .rahmen { stroke: var(--tinte); fill: #fff; }
.wahl-karte:has(:checked) .schema .fig > * { fill: var(--tinte); }
.wahl-karte:has(:checked) .schema .pfeil { stroke: var(--signal); fill: none; }
.wahl-karte:has(:checked) .schema .hilfe, .wahl-karte:has(:checked) .schema .trenn, .wahl-karte:has(:checked) .schema .schirm { stroke: var(--tinte); fill: none; }

/* ---------- Projekt-Detail ---------- */
.projekt-kopf h1 { font-size: clamp(36px, 5.2vw, 60px); }
.arbeit { display: grid; gap: 20px; margin-bottom: 36px; padding: 16px; border-radius: 12px; background: var(--tinte); color: var(--papier); }
.arbeit-spur { position: relative; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 8px; background: var(--matte); background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 32px 32px; }
.arbeit-spur .spur { inset: 20% 4%; }
.arbeit-text { display: grid; align-content: start; gap: 16px; padding: 4px 4px 6px; }
.arbeit .status-text { font-size: 18px; }
.arbeit .status-text b { font-size: 16px; }
.arbeit .balken { background: #3a372d; }
.arbeit .hinweis { color: #a29c8d; }
.stufen { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: #8d8778; }
.stufen li { display: flex; align-items: center; gap: 10px; }
.stufen li::before { content: ""; width: 14px; height: 14px; flex: none; border: 1.5px solid #5a564b; border-radius: 3px; }
.stufen li[data-zustand="fertig"] { color: #c9c3b5; }
.stufen li[data-zustand="fertig"]::before { border-color: #6f9a85; background: #6f9a85 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2316150f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.stufen li[data-zustand="jetzt"] { color: var(--papier); font-weight: 700; }
.stufen li[data-zustand="jetzt"]::before { border-color: var(--signal); background: var(--signal); animation: blinken 1s steps(2, jump-none) infinite; }
@media (min-width: 820px) { .arbeit { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); padding: 20px; gap: 28px; } }

.c-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; padding-top: 16px; border-top: 1.5px solid var(--tinte); }
.c-kopf h2 { font-size: 30px; }
.c-raster { display: grid; gap: 28px 18px; grid-template-columns: repeat(auto-fill, minmax(232px, 300px)); }
.c-karte { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.c-medium { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: #24221b; }
.c-medium video { display: block; width: 100%; height: 100%; object-fit: cover; background: #24221b; }
.c-play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.c-play .ic { width: 60px; height: 60px; padding: 18px 16px 18px 20px; border-radius: 50%; background: rgba(22,21,15,.62); fill: currentColor; stroke: none; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.c-play:active .ic { transform: scale(0.93); }
@media (hover: hover) and (pointer: fine) { .c-play:hover .ic { background: var(--signal); } }
.c-play:focus-visible { outline-offset: -4px; }
.wert { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 8px 4px; border-radius: 4px; background: var(--tinte); color: var(--papier); pointer-events: none; }
.wert-name { font-size: 11px; font-weight: 700; opacity: 0.8; }
.wert b { font-size: 19px; line-height: 1; }
.wert[data-stufe="spitze"] { background: var(--signal); color: #fff; }
.wert[data-stufe="gut"] { background: var(--gelb); color: var(--tinte); }
.wert[data-stufe="mittel"] { background: var(--papier); color: var(--tinte); }
.wert[data-stufe="schwach"] { background: #4a473d; color: #d6cfbf; }
.c-dauer { position: absolute; top: 10px; right: 10px; padding: 3px 6px; border-radius: 3px; background: rgba(22,21,15,.6); color: #fff; font-size: 12px; pointer-events: none; }
.c-schleier { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; padding: 14px; background: linear-gradient(transparent 40%, rgba(22,21,15,.85)); color: #fff; font-weight: 700; font-size: 14px; }
.c-schleier .punkt { background: var(--signal); animation: blinken 1s steps(2, jump-none) infinite; margin-bottom: 5px; }
.c-schleier.fehler { color: #ffd9cc; }
[data-status="rendert"] video { filter: saturate(0.4) brightness(0.8); }
.c-info { display: grid; align-content: start; gap: 8px; min-width: 0; }
.c-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--grau); }
.c-titel { width: calc(100% + 12px); margin: 0 -6px; padding: 4px 6px; border: 1.5px solid transparent; border-radius: 6px; background: transparent; font-weight: 750; font-stretch: 82%; font-size: 20px; line-height: 1.12; resize: none; field-sizing: content; min-height: 2.6em; transition: border-color 140ms ease, background-color 140ms ease; }
@media (hover: hover) and (pointer: fine) { .c-titel:hover { border-color: var(--linie); } }
.c-titel:focus { outline: none; border-color: var(--signal); background: #fff; }
.c-hook { font-size: 15px; color: var(--tinte-2); }
.c-grund { font-size: 13.5px; color: var(--grau); }
.c-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 4px; }
.c-knoepfe .c-bearbeiten { grid-column: 1 / -1; }
@media (max-width: 559px) {
  .c-raster { grid-template-columns: 1fr; gap: 24px; }
  .c-karte { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-rows: none; align-items: start; gap: 14px; }
  .c-titel { font-size: 18px; }
  .c-knoepfe .knopf { padding: 0 10px; font-size: 14px; }
}

/* Bearbeiten-Schublade */
.bearbeiten { display: grid; gap: 28px; }
.b-teil { display: grid; gap: 14px; }
.b-teil h3 { font-size: 24px; }
.zeitleiste { display: grid; gap: 6px; }
.zl-spur { position: relative; height: 56px; border-radius: 6px; background: var(--matte); overflow: hidden; }
.zl-spur > i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); }
.zl-alt { position: absolute; top: 8px; bottom: 8px; border: 1.5px dashed rgba(241,211,107,.6); border-radius: 3px; }
.zl-neu { position: absolute; top: 0; bottom: 0; background: rgba(229,72,31,.32); border-left: 3px solid var(--signal); border-right: 3px solid var(--signal); transition: left 180ms var(--ease-out), width 180ms var(--ease-out); }
.zl-skala { display: flex; justify-content: space-between; font-size: 12px; color: var(--grau); }
.zeit-zeile { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px 12px; }
.zeitwert { font-size: 22px; }
.nudge { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (min-width: 420px) { .zeit-zeile { grid-template-columns: 64px 104px 1fr; } .nudge { grid-column: auto; } }
.haeppchen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.haeppchen li { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; }
.haeppchen label { font-size: 12px; color: var(--grau); }
.haeppchen .feld-eingabe { min-height: 44px; border-width: 1px; border-color: var(--linie-2); }

/* ---------- Kanäle ---------- */
.kanal-liste { display: grid; gap: 14px; }
.kanal { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px 16px; align-items: center; padding: 18px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); transition: border-color 160ms ease; }
.kanal-bild { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; transition: filter 200ms ease, opacity 200ms ease; }
.kanal-bild.leer { display: grid; place-items: center; background: var(--tinte); color: var(--papier); font-weight: 800; font-size: 22px; }
.kanal[data-aktiv="nein"] .kanal-bild { filter: grayscale(1); opacity: 0.55; }
.kanal-kopf { min-width: 0; }
.kanal-kopf h2 { font-size: 26px; font-stretch: 78%; }
.kanal-kopf .hinweis { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plattform { font-weight: 700; color: var(--tinte-2); }
.kanal-schalter { grid-column: 1 / -1; justify-self: start; font-weight: 700; }
.kanal-daten { grid-column: 1 / -1; display: grid; gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--linie); }
.kanal-daten div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.kanal-daten dt { font-size: 13.5px; color: var(--grau); }
.kanal-daten dd { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14.5px; }
.kanal-daten a { color: inherit; }
.kanal-regel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; border-radius: 6px; background: var(--papier-2); font-size: 14px; color: var(--tinte-2); }
.kanal-regel .legende { font-size: 13px; }
.kanal > .knoepfe { grid-column: 1 / -1; }
.kanal-fehler { grid-column: 1 / -1; padding: 10px 12px; border-radius: 6px; background: #f7dfd5; color: #7a2409; font-size: 14px; font-weight: 600; }
.kanal-klein { grid-template-columns: 56px 1fr; background: #fff; }
@media (min-width: 760px) {
  .kanal { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 20px 22px; }
  .kanal-schalter { grid-column: auto; justify-self: end; }
  .kanal-daten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .kanal-daten div { grid-template-columns: none; gap: 2px; }
}
.werbung { display: grid; gap: 24px; align-items: center; margin-bottom: 28px; padding: clamp(22px, 4vw, 40px); border-radius: 12px; color: #e9efe9; background-color: var(--matte); background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 40px 40px; }
.werbung h2 { font-size: clamp(32px, 4.4vw, 48px); color: var(--papier); margin-bottom: 12px; }
.werbung p { max-width: 520px; color: #d7e3db; margin-bottom: 20px; }
@media (min-width: 820px) { .werbung { grid-template-columns: 220px 1fr; gap: 40px; } }
.werbung-bild { display: flex; align-items: center; gap: 8px; }
.kanal-punkt { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(229,72,31,.25); }
.werbung-bild .linie { flex: 1; min-width: 24px; height: 0; border-top: 2px dashed currentColor; opacity: 0.5; }
.werbung-bild .hoch { width: 28px; flex: none; aspect-ratio: 9 / 16; border-radius: 3px; background: var(--papier); }
.werbung-bild .hoch:last-child { background: var(--gelb); }
.leer .werbung-bild { width: 220px; color: var(--grau); margin-bottom: 8px; }
.leer .werbung-bild .hoch { background: var(--tinte); }

/* ---------- Marken ---------- */
.marken-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.marke-karte { display: grid; justify-items: start; gap: 10px; padding: 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); text-decoration: none; transition: border-color 160ms ease, transform 160ms var(--ease-out); }
.marke-karte:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .marke-karte:hover { border-color: var(--tinte); } }
.marke-karte .mini { width: 100%; }
.marke-name { font-weight: 750; font-stretch: 82%; font-size: 19px; }
.farb-reihe { display: flex; gap: 4px; }
.farb-reihe i { width: 18px; height: 18px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(22,21,15,.15); }
.mini { --grund: #24493a; --text: #f2eee4; --akzent: #f1d36b; position: relative; display: flex; flex-direction: column; justify-content: center; width: 160px; aspect-ratio: 9 / 16; padding: 14px; overflow: hidden; border-radius: 10px; background: var(--grund); color: var(--text); transition: background-color 200ms ease, color 200ms ease; }
.mini-gross { width: min(260px, 70vw); padding: 20px; border-radius: 14px; }
.logo-platz { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; max-width: 45%; height: 22px; padding: 2px 6px; border: 1px dashed currentColor; border-radius: 3px; font-size: 10px; font-weight: 600; }
.logo-platz:has(img) { padding: 0; border: 0; }
.logo-platz img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.mini-gross .logo-platz { top: 16px; left: 16px; height: 30px; font-size: 12px; }
.mini[data-logo="rechts"] .logo-platz { left: auto; right: 10px; }
.mini-gross[data-logo="rechts"] .logo-platz { right: 16px; }
.mini[data-logo="aus"] .logo-platz { display: none; }
.mini-text { font-weight: 900; font-stretch: 75%; font-size: 19px; line-height: 1.05; text-transform: uppercase; text-align: center; }
.mini-gross .mini-text { font-size: 30px; }
.mini-text b { color: var(--akzent); transition: color 200ms ease; }
.mini[data-stil="kasten"] .mini-text { font-weight: 700; font-stretch: 100%; font-size: 13px; line-height: 1.8; text-transform: none; }
.mini-gross[data-stil="kasten"] .mini-text { font-size: 19px; }
.mini[data-stil="kasten"] .mini-text > * { padding: 1px 4px; border-radius: 3px; background: var(--text); color: var(--grund); }
.mini[data-stil="kasten"] .mini-text b { background: var(--akzent); color: var(--grund); }
.mini[data-stil="schlicht"] .mini-text { font-weight: 600; font-stretch: 100%; font-size: 14px; text-transform: none; }
.mini-gross[data-stil="schlicht"] .mini-text { font-size: 20px; }
.mini[data-stil="schlicht"] .mini-text b { color: inherit; text-decoration: underline 3px var(--akzent); text-underline-offset: 4px; }
.mini[data-stil="aus"] .mini-text { visibility: hidden; }
.mini .balken { position: absolute; left: 0; bottom: 0; width: 62%; height: 5px; border-radius: 0; background: var(--akzent); overflow: visible; transition: opacity 200ms ease; }
.mini-gross .balken { height: 7px; }
.mini.ohne-balken .balken { opacity: 0; }
.marke-bau { display: grid; gap: 32px; }
.marke-form { display: grid; gap: 24px; max-width: 560px; }
.marke-vorschau { display: grid; justify-items: center; gap: 12px; align-content: start; padding: 24px; border-radius: 12px; background: var(--papier-2); }
@media (min-width: 1000px) { .marke-bau { grid-template-columns: minmax(0, 560px) minmax(300px, 1fr); gap: 48px; } .marke-vorschau { position: sticky; top: 24px; } }
.logo-wahl { display: flex; align-items: center; gap: 14px; }
.logo-bild { display: flex; align-items: center; justify-content: center; width: 96px; height: 56px; padding: 6px; border: 1px dashed var(--linie-2); border-radius: 8px; background: #fff; }
.logo-bild { overflow: hidden; }
.logo-bild img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.logo-wahl { flex-wrap: wrap; }
.logo-wahl .knopf { position: relative; }
.logo-wahl label.knopf:focus-within { outline: 2px solid var(--signal); outline-offset: 3px; }
.farben { display: flex; gap: 8px; margin-bottom: 4px; }
.farbe-vorlage { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1px rgba(22,21,15,.15); cursor: pointer; transition: transform 150ms var(--ease-out); }
.farbe-vorlage:active { transform: scale(0.93); }
.farben-felder { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.farbe-feld { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px 6px 7px; border: 1.5px solid var(--linie); border-radius: 8px; background: #fff; cursor: pointer; }
.farbe-feld input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.farbe-muster { width: 40px; height: 40px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(22,21,15,.14); }
.farbe-feld > span:last-child { display: grid; line-height: 1.2; }
.farbe-feld b { font-size: 14px; }
.hex { font-size: 12px; color: var(--grau); }
.form-ende { padding-top: 8px; }

/* ---------- Abo ---------- */
.verbrauch { display: grid; gap: 10px; max-width: 720px; margin-bottom: 32px; }
.verbrauch-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; }
.verbrauch h2 { font-size: 26px; }
.verbrauch-kopf b { font-size: 22px; }
.takt { display: flex; width: max-content; max-width: 100%; margin-bottom: 20px; padding: 4px; border-radius: 8px; background: var(--papier-2); }
.takt button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 6px; background: transparent; font-weight: 600; font-size: 15px; color: var(--grau); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.takt button[aria-pressed="true"] { background: #fff; color: var(--tinte); box-shadow: 0 1px 0 rgba(22,21,15,.08); }
.takt span { color: var(--signal-text); }
.plaene { display: grid; gap: 14px; }
@media (min-width: 640px) { .plaene { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .plaene { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1.5px solid var(--tinte); border-radius: 12px; }
.plan header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan h2 { font-size: 32px; }
.plan-marke { font: 500 12px var(--mono); padding: 3px 7px; border-radius: 3px; background: var(--gelb); color: var(--tinte); }
.plan-meiner { background: var(--tinte); color: var(--papier); }
.preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.preis b { font-weight: 800; font-stretch: 72%; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; }
.preis > span { color: var(--grau); font-size: 15px; }
.plan-meiner .preis > span, .plan-meiner .preis-zusatz { color: #b8b2a4; }
.rabatt { padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px; color: var(--signal-text) !important; font-size: 12px !important; }
.plan-meiner .rabatt { color: var(--gelb) !important; }
.preis-zusatz { margin-top: -6px; font-size: 14px; color: var(--grau); }
.preis-zusatz s { text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; }
.plan ul { display: grid; gap: 9px; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--linie); list-style: none; font-size: 15px; }
.plan-meiner ul { border-color: #34312a; }
.plan li { position: relative; padding-left: 22px; }
.plan li::before { content: ""; position: absolute; left: 1px; top: 0.45em; width: 10px; height: 5px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }
.plan-fuss { margin-top: auto; padding-top: 8px; }
.plan-meiner .ist-aktiv { color: var(--papier); box-shadow: inset 0 0 0 1.5px #5a564b; opacity: 1; }
.plan-meiner .knopf-rand:not(.ist-aktiv) { color: var(--papier); box-shadow: inset 0 0 0 1.5px var(--papier); }
.plaene-fuss { margin-top: 18px; }

/* ---------- Konto ---------- */
.konto { display: grid; max-width: 760px; }
.konto-teil { display: grid; gap: 14px; justify-items: start; padding: 26px 0; border-top: 1.5px solid var(--tinte); }
.konto-teil h2 { font-size: 30px; }
.konto-teil > p { max-width: 600px; color: var(--tinte-2); }
.daten { display: grid; gap: 10px; width: 100%; margin: 0; }
.daten div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.schluessel { display: grid; gap: 10px; width: 100%; padding: 16px; border-radius: 8px; background: var(--gelb); }
.schluessel-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.schluessel code { flex: 1; min-width: 0; padding: 10px 12px; background: #fff; font-size: 14px; user-select: all; }
.gefahr-zone h2 { color: var(--signal-text); }
.name-form { width: 100%; max-width: 480px; }
.zeile-feld { display: flex; gap: 8px; }
.zeile-feld .feld-eingabe { flex: 1; min-width: 0; }
.weg-form { display: grid; gap: 12px; width: 100%; max-width: 380px; }
.weg-form .knopf { justify-self: start; }
/* Handy: Vorschau oben und kleiner, damit man beim Einstellen sieht, was passiert */
@media (max-width: 999px) {
  .marke-vorschau { order: -1; padding: 16px; }
  .marke-vorschau .mini-gross { width: 150px; padding: 14px; }
  .marke-vorschau .mini-gross .mini-text { font-size: 19px; }
  .marke-vorschau .mini-gross[data-stil="kasten"] .mini-text { font-size: 13px; }
  .marke-vorschau .mini-gross[data-stil="schlicht"] .mini-text { font-size: 14px; }
  .marke-vorschau .mini-gross .logo-platz { top: 10px; left: 10px; height: 22px; font-size: 10px; }
  .marke-vorschau .mini-gross[data-logo="rechts"] .logo-platz { left: auto; right: 10px; }
  .farben-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .farbe-feld { gap: 8px; padding: 5px 8px 5px 5px; }
  .farbe-muster { width: 30px; height: 30px; }
}
.plan-gewuenscht { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.plan-marke.wahl { background: var(--signal); color: #fff; }

/* Laufendes Projekt: Ausschnitt/Restzeit, mitgeschriebene Wörter, Clips, die noch geschnitten werden */
.arbeit-zusatz { font-size: 14.5px; color: #c9c3b5; }
.live-text { display: flex; justify-content: flex-end; overflow: hidden; white-space: nowrap; font-size: 15px; color: #a29c8d; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); }
.live-innen span:last-child { color: var(--papier); }
.live-innen .neu { display: inline-block; animation: wort-kommt 360ms var(--ease-out) both; }
@keyframes wort-kommt { from { opacity: 0; transform: translateY(4px); } }
[data-status="ausstehend"] .c-medium { background-color: var(--matte); background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 24px 24px; }
[data-status="ausstehend"] video { visibility: hidden; }
.c-wartet { background: none; color: #e9efe9; }
.c-wartet .punkt { background: var(--gelb); }
[data-status="ausstehend"] .c-titel { color: var(--tinte-2); }
.c-karte.frisch .c-medium { animation: aufdecken 420ms var(--ease-out) both; }
@keyframes aufdecken { from { opacity: 0.35; transform: scale(0.97); } }

/* Kanäle als Übersicht: Kacheln oben, Zahlen und Zeiten je Kanal */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (min-width: 760px) { .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kachel { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.kachel b { font-size: 26px; line-height: 1.1; }
.kachel span, .kachel a { font-size: 14px; color: var(--tinte-2); }
.kachel a { color: var(--tinte); font-weight: 600; }
.kanal-zustand { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
[data-aktiv="ja"] .kanal-zustand .punkt { background: var(--matte); }
[data-aktiv="nein"] .kanal-zustand { color: var(--grau); }
[data-aktiv="nein"] .kanal-zustand .punkt { background: #a59d8a; }
.kanal-stat { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--linie); }
.kanal-stat div { display: grid; gap: 2px; min-width: 0; }
.kanal-stat dt { font-size: 13px; color: var(--grau); }
.kanal-stat dd { margin: 0; font-size: 17px; }
@media (min-width: 760px) { .kanal-stat { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kanal-zustand { grid-column: auto; justify-self: end; } }
.kanal-auto { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.kanal-auto .legende { font-size: 14px; }
.kanal-ziele { display: inline-flex; gap: 6px; }
.kanal-ziele .ic { width: 18px; height: 18px; }
.kanal-zeiten { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 13.5px; }
.kanal-zeiten b { color: var(--tinte); font-weight: 600; }