/* ══════════════════════════════════════════════════════════════════════════
   postd · Handy-Redesign (Stefan 25.10.2026)

   Stefan: "gib mobile mal ein komplettes redesign im CI, elemente neuer, moderner und an die intuitive
   mobile nutzung besser angepasst; hintergrundaufteilung, ausgegraute buttons und footer sehen noch ein
   tick veraltet aus". Dazu die Liste: schlankes Hamburger-Menue, keine Editor-Links, Landing Richtung
   App Store, Dark Mode als Standard, Preise uebersichtlich, Download mobil zuerst, Tools wie eine App.

   WO DIESE DATEI STEHT
   scripts/kopf-einsetzen.py bindet sie auf jeder Website-Seite als LETZTES Stylesheet im <head> ein
   (hinter allen Seiten-Stilen), damit sie am Handy gewinnt. Alles steht in EINEM @media-Block bis 767 px.
   Am Schreibtisch aendert diese Datei nichts. 767 ist die Grenze, die site.css und tokens.css schon
   kennen (--edge-pad 20 px unter 768).

   REGELN
   · Nur Tokens aus assets/tokens.css, keine neuen Farben. Dunkel ist am Handy der Standard
     (assets/theme.js), Hell muss trotzdem sauber aussehen: nie ein fester Hex fuer Flaechen oder Schrift.
   · Kein Punktraster, keine abwechselnden Baender (hell/dunkel/grau): EIN Grund, Abschnitte trennt Raum.
   · Trefferflaeche mindestens 44 px, Hauptknoepfe 50 px.
   · Editor-Links gibt es am Handy nicht (der Editor braucht einen grossen Bildschirm, unter 900 px deckt
     ihn ohnehin ein Hinweis). Anmelden und Konto erstellen bleiben.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

/* ── Grund ─────────────────────────────────────────────────────────────── */
:root{
  --edge-pad:20px;
  --m-r:22px;            /* Karten */
  --m-r-s:14px;          /* Knoepfe, Felder */
  --m-kopf:58px;         /* Hoehe des Kopfes ohne Notch */
}
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--m-kopf) + 12px); }
body{
  background-image:none;
  background-color:var(--grund);
  -webkit-tap-highlight-color:transparent;
  overflow-x:clip;
}
/* Ein ruhiger Lichtfleck oben statt Punktraster und Baendern. Er scrollt nicht mit. */
body::before{
  content:""; position:fixed; left:0; right:0; top:0; height:60vh; z-index:-1; pointer-events:none;
  background:radial-gradient(110% 45% at 100% -6%, rgba(var(--signal-rgb),.05), transparent 66%);
}
html[data-theme="light"] body::before{
  background:radial-gradient(110% 45% at 100% -6%, rgba(var(--signal-rgb),.10), transparent 66%);
}
.flaeche, .sx-sec2.flaeche{ background:transparent !important; background-image:none !important; }
.textur, .tilefield{ display:none !important; }

/* Abschnitte: Raum statt Baender */
.sx-sec2, .section-tight{ padding-block:52px; }
.sx-sec2.tight{ padding-block:36px; }
.stage{ padding-inline:var(--edge-pad); }

/* Schrift: eine ruhige Leiter fuer schmale Bildschirme */
h1{ font-size:clamp(34px, 9.6vw, 44px); line-height:.98; letter-spacing:-.045em; }
h2, .d2{ font-size:clamp(28px, 8vw, 34px); line-height:1.03; letter-spacing:-.04em; }
.lead, .tl-lead{ font-size:17px; line-height:1.5; }
.sx-eyebrow, .kicker{ font-size:11px; letter-spacing:.14em; }

/* Editor-Links: gibt es am Handy nicht. Knoepfe verschwinden, Links mitten im Satz bleiben als Text stehen. */
a[href*="app.html"].pill:not([id^="buy-"]), a[href*="app.html"].hd-cta, #so-toolbox .tb-row[href*="app.html"],
.foot-cols a[href*="app.html"], .menu a[href*="app.html"], .tl-after, a.m-desk{ display:none !important; }
p a[href*="app.html"], li a[href*="app.html"], .small a[href*="app.html"]{ pointer-events:none; color:inherit; text-decoration:none; border:0; }

/* ── Knoepfe ───────────────────────────────────────────────────────────── */
.pill{ min-height:50px; padding:0 22px; border-radius:var(--m-r-s); font-size:16px; letter-spacing:-.005em; }
.pill-loud{ background:var(--signal); color:var(--on-signal); box-shadow:0 10px 26px -12px rgba(var(--signal-rgb),.55); }
.pill-loud:active{ transform:scale(.97); }
/* Der leere Rahmenknopf war grau und wirkte gesperrt. Jetzt: klare Kante, Schrift in Tinte, Druck-Antwort. */
.pill-outline{ background:color-mix(in srgb, var(--ink) 6%, transparent); border:1.5px solid color-mix(in srgb, var(--ink) 38%, transparent); color:var(--ink); }
.pill-outline:active{ background:color-mix(in srgb, var(--ink) 14%, transparent); }
.pill-quiet{ background:color-mix(in srgb, var(--ink) 8%, transparent); border:0; color:var(--ink); }
/* Gesperrt heisst hier "kommt noch": gestrichelter Rahmen und Punkt, nicht ausgegraut */
.pill[disabled], .pill[aria-disabled="true"]{
  opacity:1; background:transparent; color:var(--ink-2);
  border:1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent);
}
.pill[disabled]::before, .pill[aria-disabled="true"]::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--daten); margin-right:-2px; flex:none;
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */
#so-toolbox{
  height:calc(var(--m-kopf) + env(safe-area-inset-top, 0px));
  padding:env(safe-area-inset-top, 0px) 14px 0 16px;
  gap:8px;
  --wm-size:24px;
  background:color-mix(in srgb, var(--grund) 78%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
:root{ --h-kopf:calc(var(--m-kopf) + env(safe-area-inset-top, 0px)); }
/* Auf der Startseite liegt der Kopf transparent ueber dem Bild, bis der Hero oben hinaus ist (startseite.js) */
body.seite-start #so-toolbox:not(.solid){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; }
#so-toolbox .mark{ height:26px; }
#so-toolbox .ed-word{ font-size:24px; }
/* Der Knopf in den Editor entfaellt. Dafuer bleibt Anmelden/Konto erstellen als einziger lauter Knopf. */
#so-toolbox .hd-cta{ display:none !important; }
#so-toolbox[data-konto="anon"] .tb-pill{
  display:inline-flex; order:6; height:36px; padding:0 16px; border-radius:var(--m-r-s);
  background:var(--signal); color:var(--on-signal); font:700 13.5px/1 var(--font-display); letter-spacing:-.005em;
}
#so-toolbox[data-konto="anon"] .tb-pill:hover{ background:var(--acc-400, #BCF945); color:var(--on-signal); }
/* DE/EN: kleiner, ruhiger */
#so-toolbox .lang-kopf{ order:4; padding:2px; background:color-mix(in srgb, var(--ink) 7%, transparent); border-color:transparent; }
#so-toolbox .lang-kopf button{ min-width:30px; min-height:28px; padding:0 8px; font-size:10.5px; }
#so-toolbox[data-konto="an"] .lang-kopf{ display:flex; }
#so-toolbox .thema-btn{ width:34px; height:34px; border-radius:50%; background:color-mix(in srgb, var(--ink) 7%, transparent); order:5; }
/* Artikel, Blog und Werkzeuge laden theme.js nicht (immer dunkel): dort bliebe der Knopf leer. */
#so-toolbox .thema-btn:empty{ display:none; }
#so-toolbox .tb-avatar{ width:36px; height:36px; }
/* Das Kontomenue am Handy: bis an den Rand, unter dem Kopf */
#so-toolbox .tb-menu{ position:fixed; top:calc(var(--m-kopf) + env(safe-area-inset-top, 0px) + 6px); right:12px; left:12px; }
#so-toolbox #tb-menu{ max-width:none; min-width:0; }

/* ── Vollbild-Menue: ein schlankes Blatt von oben ──────────────────────── */
html:root .menu{
  inset:0 0 auto 0; height:auto; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:calc(var(--m-kopf) + env(safe-area-inset-top, 0px) + 6px) 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background:rgba(14,14,14,.94) !important;
  -webkit-backdrop-filter:blur(26px) saturate(150%) !important; backdrop-filter:blur(26px) saturate(150%) !important;
  border-radius:0 0 28px 28px; border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.7);
  --ink:#F2F2F0; --ink-2:#D2D2CE; --ink-3:#A8A8A4; --hair:rgba(255,255,255,.12);
}
.menu .tilefield{ display:none !important; }
/* Hinter dem Blatt dunkelt die Seite ab; ein Tipp daneben schliesst es (assets/kopf.js) */
body.menu-open::after{
  content:""; position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.52);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.menu-rows{ margin:0; display:flex; flex-direction:column; }
.menu-rows a{
  display:flex; align-items:center; justify-content:space-between;
  font-size:23px; line-height:1.1; font-weight:700; letter-spacing:-.03em;
  padding:0; min-height:58px; border:0; border-bottom:1px solid var(--hair);
  color:#F2F2F0 !important; text-decoration:none !important;
}
.menu-rows a::after{
  content:""; width:9px; height:9px; margin-right:6px; flex:none;
  border-top:2px solid rgba(242,242,240,.5); border-right:2px solid rgba(242,242,240,.5); transform:rotate(45deg);
}
.menu-rows a:active{ background:rgba(255,255,255,.06); }
.menu-rows a:last-of-type{ border-bottom:0; }
/* Reihenfolge am Handy: Tools zuerst (laeuft am Handy), dann die Seiten */
.menu-rows a[href*="werkzeuge"], .menu-rows a[href*="/tools"]{ order:-1; }
.menu-foot{ display:block; border:0; padding:6px 0 0; margin:0; }
.menu-foot .lnks, .menu-foot .lang{ display:none !important; }
.menu-social{ display:flex; gap:30px; margin-top:4px; padding-top:6px; border-top:1px solid var(--hair); }
.ms-pill{
  flex:none; display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0; border:0; background:none;
  color:#F2F2F0; text-decoration:none; font:600 16px/1 var(--font-display); letter-spacing:-.01em;
}
.ms-pill svg{ width:22px; height:22px; flex:none; }
.ms-pill:active{ opacity:.55; }

/* ── Fuss ──────────────────────────────────────────────────────────────── */
footer.foot{
  margin-top:40px; border:0; border-top:1px solid var(--hair);
  background:var(--panel); border-radius:28px 28px 0 0;
  padding:34px 0 calc(26px + env(safe-area-inset-bottom, 0px));
}
footer.foot .stage{ padding-inline:22px; }
.foot-cols{ grid-template-columns:1fr 1fr; gap:30px 18px; }
.foot-brand{ grid-column:1 / -1; }
.foot-brand .head-l{ margin-bottom:12px !important; }
.foot-brand .small{ max-width:30ch; color:var(--ink-2); }
.foot-brand .small.foot-claim{ max-width:none; color:var(--ink); font-size:20px; }
.foot-social{ display:flex; gap:22px; margin-top:14px; }
.foot-social a{
  display:inline-flex; align-items:center; justify-content:flex-start; width:30px; height:44px; padding:0;
  border:0; border-radius:0; background:none; color:var(--ink-2);
}
.foot-social a:active{ background:none; color:var(--ink); }
.foot-social svg{ width:26px; height:26px; }
.foot .foot-h{ margin:0 0 8px; color:var(--ink-3); }
.foot-cols a{ font-size:15.5px; padding:7px 0; color:var(--ink-2); }
/* Rechtliches: eine eigene Reihe ueber die ganze Breite, kleiner, eng gesetzt */
.foot-cols > div:last-child{ grid-column:1 / -1; padding-top:20px; border-top:1px solid var(--hair); }
.foot-cols > div:last-child a{ display:inline-block; font-size:13.5px; padding:6px 0; margin-right:16px; color:var(--ink-3); }
.foot-bar{ margin-top:22px; padding-top:0; border:0; justify-content:flex-start; gap:6px 18px; font-size:11px; color:var(--ink-3); }

/* ── Preise: kleines Karussell (assets/seiten.js: "Alle Leistungen", Pro mittig) ───────────────────── */
.sx-plans{
  display:flex; flex-direction:row; gap:12px; margin:26px -20px 0; padding:16px 20px 8px; overflow-x:auto; align-items:stretch;
  scroll-snap-type:x mandatory; scroll-padding-inline:20px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.sx-plans::-webkit-scrollbar{ display:none; }
.sx-plans .sx-plan{ flex:0 0 76%; scroll-snap-align:center; padding:20px 18px 18px; gap:4px; border-radius:22px; transform:none !important; }
.sx-plan[data-p] .nm{ padding:6px 11px 6px 9px; font-size:11.5px; }
.sx-plan[data-p] .why{ margin-top:6px; min-height:0; font-size:13.5px; line-height:1.35; color:var(--ink-2); }
.sx-plan .pr{ margin-top:10px !important; font-size:40px !important; letter-spacing:-.05em; }
.sx-plan .pr small{ font-size:13px; }
.sx-plan[data-p="enterprise"] .pr{ font-size:26px !important; padding-top:8px; }
.sx-plan ul{ margin:14px 0 6px; padding-top:14px; gap:9px; flex:1 1 auto; }
.sx-plan li{ font-size:14px; line-height:1.35; }
.sx-plans:not([data-offen]) .sx-plan li:nth-child(n+5){ display:none; }
.sx-mehr{
  display:block; margin:10px auto 0; padding:10px 4px; border:0; background:none; cursor:pointer;
  font:600 14px/1 var(--font-display); color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--edge);
}
.sx-plan .pill{ margin-top:auto; min-height:48px; }
.sx-plan .badge{ top:-11px; left:18px; padding:6px 9px; border-radius:6px; font-size:9.5px; }
.sx-dots{ display:none !important; }
/* Vergleich: alle Tarife nebeneinander, seitlich wischbar, Leistungsspalte bleibt stehen (Kopie .sx-tblm aus seiten.js) */
.sx-tblwrap{ display:none; }
.sx-tblm{
  display:block; position:relative; margin-top:24px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 30px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
.sx-tblm::-webkit-scrollbar{ display:none; }
.sx-tblm .sx-tbl{ min-width:548px; margin:0; }
.sx-tblm th, .sx-tblm td{ padding:15px 10px; font-size:14px; line-height:1.3; vertical-align:middle; }
.sx-tblm td:last-child, .sx-tblm th:last-child{ padding-right:34px; }
/* Leistungsspalte: fett, bleibt links stehen */
.sx-tblm tbody th[scope="row"]{
  position:sticky; left:0; z-index:3; width:124px; min-width:124px; max-width:124px; padding-left:0; padding-right:10px;
  overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto;
  background:var(--grund); font-size:14px; font-weight:800; letter-spacing:-.015em; color:var(--ink);
  box-shadow:10px 0 14px -12px rgba(0,0,0,.7);
}
.sx-tblm td{ width:106px; color:var(--ink); font-weight:600; }
.sx-tblm td.n{ color:var(--ink-3); font-weight:500; }
.sx-tblm td.sx-wie{ color:var(--ink-3); font-weight:500; font-size:12.5px; }
/* Pro stoert nicht, Pro traegt: die Spalte bekommt etwas mehr Farbe */
.sx-tblm td:nth-child(3){ background:color-mix(in srgb, var(--signal) 9%, transparent); }
/* Gruppen: Balken in Limette, darueber Luft; rechts die Tarifnamen in ihren Farben */
.sx-tblm tr.grp th{ padding-top:34px; padding-bottom:12px; background:none; border-bottom:2px solid var(--ink); }
.sx-tblm tr.grp th:first-child{
  position:sticky; left:0; z-index:3; padding-left:0; background:var(--grund);
  font:700 11px/1.25 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
}
.sx-tblm tr.grp th:first-child::before{ content:""; display:block; width:22px; height:4px; margin-bottom:9px; border-radius:2px; background:var(--signal); }
.sx-tblm th.sx-gh{
  font:800 12px/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase; color:var(--pl-label);
  box-shadow:inset 0 4px 0 var(--pl-bar); vertical-align:bottom;
}
.sx-tblm th.sx-gh::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--pl-dot); vertical-align:0; }
/* Haken: Plaketten in der Farbe des Tarifs */
.sx-tblm td.y{ position:relative; }
.sx-tblm td.y::before{ content:""; display:inline-block; width:24px; height:24px; margin:0; border-radius:8px; outline:0; vertical-align:middle; background:var(--signal); }
.sx-tblm td.y::after{
  content:""; position:absolute; left:19px; top:50%; width:6px; height:12px; border:solid #131313; border-width:0 2.6px 2.6px 0;
  transform:translateY(-64%) rotate(45deg);
}
.sx-tblm td.y:nth-child(2)::before{ background:color-mix(in srgb, var(--ink) 30%, transparent); }
.sx-tblm td.y:nth-child(2)::after{ border-color:var(--ink); }
.sx-tblm td.y:nth-child(4)::before{ background:#2f7a55; }
.sx-tblm td.y:nth-child(4)::after{ border-color:#EAF6EF; }
.sx-tblm td.y:nth-child(5)::before{ background:linear-gradient(135deg, #f1f3f5, #9ea3aa); }

/* ── Startseite: Hero mit den vier Slides wie am Schreibtisch ────────────────────────────────────────
   Stefan 25.10.: "hero section trotzdem mit den Slides, die wir auf Desktop haben, die sind schoen und wichtig".
   Also laufen Text, Fenster-Vorschau und die vier Reiter wie am Schreibtisch (assets/startseite.js), nur untereinander
   statt nebeneinander. Die Knoepfe in den Editor entfallen. Der App-Block steht danach als eigener Abschnitt. */
html:root .sx-start{ min-height:0; display:block; background-color:transparent; --bh0:calc((100vw - 20px) / 4.9); }
.sx-start .in{ padding:calc(var(--h-kopf) + 30px) 20px 0; }
.sx-start .copy{ max-width:none; }
.sx-start h1, .sx-start .sx-h{ font-size:clamp(38px, 10.6vw, 48px); line-height:.95; letter-spacing:-.05em; margin:18px 0 14px; }
.sx-start .lede{ font-size:17px; line-height:1.45; }
.sx-start .soon, .sx-start .acts, .sx-start .fine, .sx-start .pp{ display:none !important; }
/* Fenster-Vorschau: unter dem Text, rechts buendig wie am Schreibtisch */
html:root .sx-start .scene{ display:block; position:relative; inset:auto; width:auto; margin:4px 0 26px 20px; z-index:1; }
.sx-start .stack{ height:calc(3.43 * var(--bh0)); }
.sx-start .win{ top:0; }
/* Reiter der vier Bereiche: schlichte Chips ohne Glas, seitlich wischbar */
html:root .sx-start .cats2{
  display:flex; gap:8px; padding:0 20px 110px; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:20px; scrollbar-width:none;
}
.sx-start .cats2::-webkit-scrollbar{ display:none; }
html:root .sx-start .cat, html:root .sx-start .cat.barmat{
  flex:0 0 auto; min-width:0; height:50px; grid-template-columns:auto auto; gap:10px; padding:0 18px 0 9px; scroll-snap-align:center;
  background:rgba(255,255,255,.08); color:#F2F2F0; border:0; box-shadow:none; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html:root .sx-start .cat:hover{ background:rgba(255,255,255,.12); }
/* Der Hero ist in Hell und Dunkel eine dunkle Insel: die Reiter tragen immer helle Schrift, der gewaehlte ist hell mit dunkler Schrift */
html:root .sx-start .cat[aria-selected="true"]{ background:#F2F2F0; color:#131313; }
.sx-start .cat .ic{ width:32px; height:32px; }
.sx-start .cat .t{ font-size:14.5px; }
.sx-start .cat .ch2{ display:none; }
.sx-start .cat .pg{ left:22px; right:22px; height:3px; }
/* Ruhiger Grund (Stefan: "zu knallig, typischer Look"): Graphit mit einem kaum sichtbaren Lichtsaum, kein Gruen-Orange-Verlauf */
.sx-start .bg .g0, .sx-start .bg .g1, .sx-start .bg .g2, .sx-start .bg .g3{
  inset:0; animation:none;
  /* Oben ein leichter Schein, in der Mitte nichts, ganz unten kommt er sacht wieder (Stefan 25.10.) */
  background:
    radial-gradient(560px 460px at 88% 0, rgba(var(--signal-rgb),.15), transparent 72%),
    radial-gradient(520px 420px at 6% calc(100% - 90px), rgba(var(--signal-rgb),.11), transparent 72%),
    #131313;
}
.sx-start .shade, .sx-start .tint{ display:none; }
/* Keine harten Kanten (Stefan 25.10.): der Hero laeuft unten weich in die Seite aus. Der Inhalt (Reiter) endet VOR dem
   Verlauf; der Verlauf selbst hat mehrere Stufen, damit er in der hellen Seite nicht als graues Band steht. */
.sx-start .bg{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 110px), rgba(0,0,0,.72) calc(100% - 86px), rgba(0,0,0,.4) calc(100% - 58px), rgba(0,0,0,.14) calc(100% - 30px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 110px), rgba(0,0,0,.72) calc(100% - 86px), rgba(0,0,0,.4) calc(100% - 58px), rgba(0,0,0,.14) calc(100% - 30px), transparent 100%);
}
.sx-start::after{ content:none; }
/* Hellmodus: dunkler Hero auf heller Seite. Ein Verlauf wird hier zum grauen Band, also eine klare Kante mit grossem Radius
   (Stefan 25.10.: "probiers mal mit einer Kante"). Die Rundung passt zum Fuss, der oben genauso rund beginnt. */
html[data-theme="light"] .sx-start{ background-color:#131313; border-radius:0 0 32px 32px; }
html[data-theme="light"] .sx-start .bg{ -webkit-mask-image:none; mask-image:none; }
html[data-theme="light"] .sx-start .cats2{ padding-bottom:56px; }
html[data-theme="light"] .m-appsek{ margin-top:0; padding-top:36px; }

/* App-Block als eigener Abschnitt hinter dem Hero: ohne Rahmen, in Seitenfarben (hell und dunkel) */
.m-appsek{ display:block; padding:0 0 20px; margin-top:-24px; position:relative; }
.m-app{ display:block; margin:0; padding:0; border:0; }
.m-app-top{ display:flex; align-items:center; gap:14px; }
.m-app-icon{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center; flex:none;
  background:#0B0B0B; color:var(--signal); border:1px solid color-mix(in srgb, var(--ink) 16%, transparent); box-shadow:0 10px 26px -14px rgba(0,0,0,.9);
}
.m-app-icon svg{ width:26px; height:19px; fill:currentColor; display:block; }
.m-app-tag{ display:inline-flex; align-items:center; gap:9px; font:600 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.m-app-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--daten); }
.m-app-h{ margin:18px 0 8px; font:900 31px/1 var(--font-display); letter-spacing:-.045em; color:var(--ink); }
.m-app-p{ margin:0 0 20px; font-size:16px; line-height:1.45; color:var(--ink-2); }
.m-app .stores{ margin:0 0 14px; }
/* Eintragsfeld: Eingabe und Knopf in einem Streifen */
.m-app .wl{ max-width:none; gap:8px; }
.m-app .wl-feld{
  display:flex; align-items:center; gap:6px; padding:6px; min-height:62px; border-radius:18px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
}
.m-app .wl-feld:focus-within{ box-shadow:0 0 0 2px var(--signal-tx); }
.m-app .wl-in{ flex:1 1 auto; min-width:0; min-height:50px; padding:0 12px; border:0; background:transparent; color:var(--ink); box-shadow:none; }
.m-app .wl-in::placeholder{ color:var(--ink-3); }
.m-app .wl-in:focus{ box-shadow:none; }
.m-app .wl-go{ width:auto; flex:none; min-height:50px; padding:0 18px; border-radius:13px; font-size:15.5px; }
.m-app .wl-fine{ color:var(--ink-3); margin-top:4px; }
.m-app-alt{ display:flex; align-items:center; gap:12px; margin:18px 0 0; font:600 14.5px/1.2 var(--font-display); color:var(--ink-3); }
.m-app-alt a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--edge); text-underline-offset:4px; }

/* ── Download: Handy zuerst, darunter die Warteliste fuer den Schreibtisch ──────────────────────────── */
.dl{ gap:16px; }
.dl-h1{ margin:8px 0 6px; }
.dl-mobil{ order:-1; margin:0; padding:0; border:0; }
.dl-desk{ order:0; }
.dl-teil{ padding:22px 20px 24px; border-radius:var(--m-r); background:var(--panel); border:1px solid var(--hair); }
.dl-teil .upd{ font-size:11px; letter-spacing:.14em; margin:0; padding:0; border:0; }
.dl-teil .dl-h{ font-size:26px; line-height:1.03; margin:12px 0 12px; }
.dl-teil p{ font-size:16px; line-height:1.5; }
.dl-knoepfe .pill{ flex:1 1 140px; }
.dl-chips .pill{ flex:1 1 130px; }
.dl-jetzt{ display:none; }
.dl-mobil .wl, .dl-desk .wl{ max-width:none; }

/* ══ Tools: am Handy wie eine App ══════════════════════════════════════════════════════════════════════
   Stefan: "die TOOLS page muss wie eine interaktive app page sein, die micro tools komplett angepasst und
   optimiert fuer mobile". Zwei Bausteine, beide ohne neues Markup je Werkzeug:
   1. Uebersicht = Startbildschirm: zwei Spalten, Symbol, Name, ein Satz.
   2. Werkzeug = App-Bildschirm: Zurueck-Link statt Kicker und Fliesstext, die Arbeitsflaeche ganz vorn,
      die Einstellungen als abgerundete Flaeche, die Hauptaktion unten angeheftet (position:sticky, bleibt
      stehen, solange das Werkzeug im Bild ist, und scrollt mit ihm weg). Der Erklaertext steht darunter. */

/* 1 · Uebersicht: vier Gruppen, je Werkzeug eine Zeile mit farbigem Symbol, kurzem Namen und einem Satz */
.tl-hero{ padding-block:14px 28px; }
.tl-hero .kicker{ margin:0 0 6px; }
.tl-hero h1{ font-size:30px; line-height:1.02; letter-spacing:-.04em; margin-bottom:10px; }
[data-abschnitt="uebersicht"] .tl-lead{ display:block !important; margin:0; font-size:15.5px; line-height:1.45; color:var(--ink-2); -webkit-line-clamp:unset; }
.tl-kacheln{ display:block; margin-top:4px; }
.tl-gruppe{ display:block; margin-top:30px; }
.tl-gruppe-h{ display:block; margin:0 0 2px; font:600 11px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.tl-kachel{ position:relative; flex-direction:row; align-items:center; gap:16px; min-height:0; padding:13px 0; border:0; border-bottom:1px solid var(--hair); border-radius:0; background:transparent; }
.tl-gruppe .tl-kachel:last-child{ border-bottom:0; }
.tl-kachel:active{ background:color-mix(in srgb, var(--ink) 5%, transparent); }
.tl-kachel .tl-txt{ display:block; flex:1 1 auto; min-width:0; color:inherit; font-size:inherit; line-height:inherit; }
.tl-kachel strong span{ color:inherit; font-size:inherit; line-height:inherit; }
.tl-kachel strong{ display:block; font-size:17px; line-height:1.2; letter-spacing:-.02em; }
.tl-kachel .tl-n-l, .tl-kachel .tl-blurb{ display:none; }
.tl-kachel .tl-n-k{ display:inline; }
.tl-kachel .tl-satz{ display:block; margin-top:3px; font-size:14px; line-height:1.35; color:var(--ink-2); }
.tl-pfeil{ display:block; width:18px; height:18px; flex:none; fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tl-kachel .tl-ico{
  display:grid; place-items:center; flex:none; width:54px; height:54px; margin:0; border-radius:16px; color:#131313;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px -10px rgba(0,0,0,.6);
}
.tl-kachel .tl-ico svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tl-kachel[data-g="bauen"] .tl-ico{ background:linear-gradient(150deg, #CBFB5E, #A8F517); }
.tl-kachel[data-g="pruefen"] .tl-ico{ background:linear-gradient(150deg, #C0B4F7, #9B8AE6); }
.tl-kachel[data-g="format"] .tl-ico{ background:linear-gradient(150deg, #63E0D4, #1FB5A8); }
.tl-kachel[data-g="text"] .tl-ico{ background:linear-gradient(150deg, #FFC27A, #FF9A3D); }
.tl-hubtext{ margin-top:34px; font-size:14px; color:var(--ink-3); }
.tl-hubtext a{ pointer-events:none; color:inherit; text-decoration:none; }
/* Block "Weitere Werkzeuge" am Ende eines Werkzeugs: zwei Spalten, nur Symbol und Name */
.tl-kacheln-doc{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.tl-kacheln-doc .tl-kachel{ gap:10px; padding:10px; border:1px solid var(--hair); border-radius:16px; background:var(--panel); }
.tl-kacheln-doc .tl-kachel .tl-ico{ width:40px; height:40px; border-radius:12px; }
.tl-kacheln-doc .tl-kachel .tl-ico svg{ width:22px; height:22px; }
.tl-kacheln-doc .tl-kachel strong{ font-size:14px; line-height:1.2; }
.tl-kacheln-doc .tl-kachel .tl-satz, .tl-kacheln-doc .tl-kachel .tl-pfeil{ display:none; }

/* 2 · Werkzeug */
.tl-back{ display:inline-flex; align-items:center; gap:4px; min-height:40px; margin:0 0 2px -6px; padding:0 12px 0 4px;
  font:600 14px/1 var(--font-display); color:var(--ink-2); text-decoration:none; }
.tl-back svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tl-back:active{ color:var(--ink); }
.tl-back{ border:0 !important; }
.tl-hero .tl-s > .kicker{ display:none; }
.tl-card ~ *, .tl-hero{ position:relative; }
.tl-hero h1{ font-size:27px; margin:0 0 14px; }
.tl-lead, .tl-chips, .tl-flow{ display:none !important; }
/* Werkzeug-Streifen: bis an den Rand, kleine Reiter */
.tl-tabs-wrap{ margin:0 -16px 14px; }
.tl-tabs{ padding:4px 16px; scroll-padding-inline:16px; gap:6px; }
.tl-tab{ padding:8px 13px 8px 10px; font-size:13px; background:transparent; }
.tl-tab[aria-current]{ background:var(--signal); border-color:var(--signal); color:var(--on-signal); }
/* Die Karte wird zur Buehne: kein Rahmen, die Teile darin sind selbst Flaechen */
.tl-card{ display:flex; flex-direction:column; padding:0; background:transparent; border:0; border-radius:0; }
.tl-card > *{ min-width:0; }
.tl-priv{ order:99; margin-top:22px; padding-top:0; border:0; font-size:12.5px; line-height:1.45; color:var(--ink-3); }
/* Ablegen: gross, ein Tipp, Fotos waehlen */
.tl-drop{ min-height:220px; border-radius:24px; border-width:2px; gap:6px; }
.tl-drop strong{ font-size:20px; }
.tl-slim{ min-height:60px; border-radius:18px; }
/* Beispiel-Hinweis: angeheftet am unteren Rand, solange das Beispiel steht */
.tl-demo{
  order:98; position:sticky; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:20;
  flex-wrap:nowrap; gap:12px; margin:14px 0 0; padding:10px 10px 10px 16px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--edge); border-radius:22px; box-shadow:0 18px 40px -16px rgba(0,0,0,.65);
}
.tl-demo[hidden]{ display:none; }
.tl-demo p{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tl-card .tl-demo .pill.tl-own{ width:100%; flex:1 1 auto; min-height:52px; padding:0 18px; border-radius:15px; font-size:16.5px;
  background:var(--signal); border-color:var(--signal); color:var(--on-signal); }
.tl-card .tl-demo .pill.tl-own:hover{ background:var(--acc-400, #BCF945); border-color:var(--acc-400, #BCF945); }
.tl-demo{ padding:10px; }
/* Der Hinweis "Das ist ein Beispiel" steht als Plakette auf der Vorschau */
.tl-card:has(.tl-demo:not([hidden])) .tl-prev-wrap, .tl-card:has(.tl-demo:not([hidden])) .fg-phone{ position:relative; }
.tl-card:has(.tl-demo:not([hidden])) .tl-prev-wrap::after{
  position:absolute; right:10px; top:10px; padding:6px 10px; border-radius:999px; pointer-events:none;
  background:rgba(14,14,14,.78); color:#F2F2F0; font:600 10.5px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
html:lang(de) .tl-card:has(.tl-demo:not([hidden])) .tl-prev-wrap::after{ content:"Beispiel"; }
html:lang(en) .tl-card:has(.tl-demo:not([hidden])) .tl-prev-wrap::after{ content:"Example"; }
/* Arbeitsflaeche */
.tl-bar{ margin-bottom:12px; }
.tl-prev-wrap{ border-radius:20px; }
.tl-main{ gap:14px; }
.tl-a-ctl{ padding:18px 16px 20px; gap:22px; background:var(--panel); border:1px solid var(--hair); border-radius:24px; }
.tl-f{ gap:10px; }
.tl-l{ font-size:11px; }
.tl-seg{ padding:4px; gap:4px; border-radius:15px; }
.tl-seg button{ min-height:44px; border-radius:11px; font-size:13.5px; }
.tl-lay button{ flex:1 1 calc(25% - 4px); min-height:56px; }
.tl-sw{ width:42px; height:42px; border-radius:14px; }
.tl-bgrow input[type=color]{ width:50px; height:42px; border-radius:14px; }
.tl-in{ min-height:46px; font-size:16px; border-radius:14px; }
.tl-ta{ font-size:16px; min-height:180px; border-radius:18px; }
/* Regler: dicke Spur, grosser Griff */
.tl-card input[type=range]{ -webkit-appearance:none; appearance:none; height:40px; background:transparent; accent-color:var(--ink); }
.tl-card input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:6px; background:var(--edge); }
.tl-card input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:28px; height:28px; margin-top:-11px; border-radius:50%;
  background:var(--ink); border:3px solid var(--panel); box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.tl-card input[type=range]::-moz-range-track{ height:6px; border-radius:6px; background:var(--edge); }
.tl-card input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--ink); border:3px solid var(--panel); }
.tl-chk{ min-height:48px; }
/* Hauptaktion unten angeheftet */
.tl-a-act{
  position:sticky; bottom:0; z-index:15; margin:2px -16px 0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--grund) 86%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--hair);
}
.tl-a-act .tl-act{ display:grid; gap:8px; margin:0; }
.tl-act .pill{ flex:none; width:100%; }
.tl-act .pill-loud{ min-height:54px; font-size:17px; border-radius:16px; }
.tl-act .pill-outline, .tl-act .pill-quiet{ min-height:46px; }
.tl-card:has(.tl-demo:not([hidden])) .tl-a-act{ display:none; }
.tl-status{ margin:0; font-size:13px; }
.tl-thumbs{ margin-top:0; }
.tl-th{ border-radius:12px; }
/* Text unter dem Werkzeug: ruhig, lesbar */
.tl-doc{ padding-block:30px 40px; border-top:1px solid var(--hair); }
.tl-doc .doc h2{ font-size:21px; margin-top:30px; }
.tl-doc .doc p, .tl-doc .doc li{ font-size:16px; line-height:1.6; }

/* ── Posty: kleiner, sicher im Bild, auf Werkzeugseiten aus dem Weg ─────────────────────────────────── */
#pv{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
#pv-dot{ width:62px; height:55px; }
#pv-dot svg{ width:100%; height:100%; }
/* Dort sitzt unten die Hauptaktion des Werkzeugs; Posty wuerde sie verdecken */
body:has(.tl-card) #pv:not(.open){ display:none; }

/* ── Konto: Anmelden und Konto erstellen (die Registrierung bleibt am Handy) ───────────────────────── */
#gate{ padding:calc(var(--m-kopf) + env(safe-area-inset-top, 0px) + 16px) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
#gate .c{ max-width:none; padding:26px 20px 22px; border:1px solid var(--hair); border-radius:28px; background:var(--panel); }
#gate .gate-tabs{ gap:4px; padding:4px; border:0; border-radius:16px; background:var(--box); }
#gate .gate-tabs button{ min-height:44px; border-radius:12px; }
#gate .gate-tabs button + button{ border-left:0; }
#gate input, #gate select{ min-height:52px; border:1.5px solid var(--edge); border-radius:14px; background:var(--box); font-size:16px; }
#gate input:focus, #gate select:focus{ outline:0; border-color:var(--signal-tx); box-shadow:0 0 0 3px rgba(var(--signal-rgb),.22); }
#gate .agbrow input{ min-height:0; }
#gate .go{ min-height:54px; border-radius:16px; font-size:1.05rem; font-weight:700; }
#gate .gate-alt{ min-height:50px; border:1.5px solid var(--edge); border-radius:16px; }

/* ── Chip-Leisten: umbrechen statt abschneiden ───────────────────────────────────────────────────────── */
.sx-sub{ position:static; margin-block:0 28px; }
.sx-sub .sx-card{
  display:flex; flex-wrap:wrap; gap:8px; padding:0; max-width:none; overflow:visible;
  border:0; border-radius:0; background:none !important; box-shadow:none !important;
  -webkit-backdrop-filter:none; backdrop-filter:none; -webkit-mask-image:none; mask-image:none;
}
.sx-sub .sx-card::before, .sx-sub .sx-card::after{ display:none; }
.sx-sub a{ padding:11px 15px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.sx-sub a.on{ background:var(--ink); color:var(--paper); }
.sx-faqgrid .cats{ display:flex; flex-wrap:wrap; gap:8px; overflow:visible; }
.sx-faqgrid .cats button{ padding:11px 14px; border-radius:999px; background:color-mix(in srgb, var(--ink) 8%, transparent); }
.sx-faqgrid .cats button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

} /* Ende @media (max-width:767px) */