/* Schriften wie auf ambyt.de, selbst gehostet (Latin-Subset, SIL OFL 1.1 — /fonts/licenses/).
   Garamond nur für Überschriften, alles andere Inter (Konrad, 21.10.2026). */
@font-face{font-family:"EB Garamond"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/eb-garamond-500.woff2") format("woff2");}
@font-face{font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/inter-600.woff2") format("woff2");}

/* Farben aus dem ambyt-Branding (ambyt-website src/styles/tokens.css, Palette „Noir-Orange").
   Fünf Rohwerte, alles andere ist abgeleitet. SEO = Noir, KI/GEO = Saffron (Konrad, 21.10.2026).
   Grün/Rot für besser/schlechter bleiben bewusst — die Bedeutung muss ohne Nachdenken sitzen. */
:root, :root[data-theme="dark"], :root[data-theme="light"]{
  color-scheme: light;
  --nebel:#f8f9fa; --tinte:#0d1b22; --noir:#172b36; --wolke:#c0cce4; --saffron:#ff9932; --white:#ffffff;

  --bg:var(--nebel); --surface:var(--white);
  --sec:color-mix(in oklab, var(--noir) 4%, var(--nebel));
  --sec-hero:color-mix(in oklab, var(--wolke) 38%, var(--nebel));
  --border:color-mix(in oklab, var(--noir) 10%, transparent); --border-soft:color-mix(in oklab, var(--noir) 6%, transparent);
  --ink:var(--tinte);
  --ink-2:color-mix(in oklab, var(--tinte) 75%, var(--nebel));
  --ink-3:color-mix(in oklab, var(--tinte) 58%, var(--nebel));
  --accent:var(--noir); --on-accent:var(--nebel);
  --seo:var(--noir); --geo:var(--saffron);
  --geo-2:color-mix(in oklab, var(--saffron) 45%, var(--nebel));
  --seo-soft:color-mix(in oklab, var(--wolke) 80%, var(--nebel)); --geo-soft:color-mix(in oklab, var(--saffron) 45%, var(--nebel));
  --neutralbar:color-mix(in oklab, var(--noir) 20%, var(--nebel));
  --range:color-mix(in oklab, var(--wolke) 55%, var(--nebel));
  --up:#1a7f4e; --down:#c03535; --up-bg:rgba(26,127,78,.10); --down-bg:rgba(192,53,53,.10);
  --grid:color-mix(in oklab, var(--noir) 9%, var(--nebel));
  --shadow:0 1px 2px color-mix(in oklab, var(--tinte) 5%, transparent), 0 6px 20px color-mix(in oklab, var(--tinte) 5%, transparent);
  --radius-card:18px; --radius-ctl:9999px;
  --font-display:"EB Garamond", Garamond, Georgia, serif;
  --font-body:"Inter", system-ui, sans-serif;
}
body{background:var(--bg); color:var(--ink);
  font:15px/1.55 var(--font-body); margin:0; -webkit-font-smoothing:antialiased;}
/* Inter liegt nur bis 600 vor — fetter würde der Browser künstlich nachrechnen */
b, strong, th{font-weight:600;}
/* Überschriften in Garamond Medium, wie auf ambyt.de */
h1, section > h2, .weekbox .week{font-family:var(--font-display); font-weight:500; letter-spacing:-.01em;}
.wrap{max-width:1320px; margin:0 auto; padding:24px 18px 56px;}
header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 0 20px; flex-wrap:wrap;}
.logos{display:flex; align-items:center; gap:14px;}
.logo{display:flex; align-items:center; justify-content:center; height:40px; padding:0 16px; border:1px dashed var(--ink-3); border-radius:8px; color:var(--ink-2); font-weight:600; letter-spacing:.04em; font-size:13px;}
.logo.client{border-style:solid; border-color:var(--border); background:var(--surface); color:var(--ink); font-size:15px; letter-spacing:.02em;}
.logoimg{height:30px; width:auto; display:block;}
.x{color:var(--ink-3); font-size:17px;}
.weekbox{text-align:right;}
.weekbox .week{font-size:38px; line-height:1.1;}
.weekbox .sub{font-size:12.5px; color:var(--ink-2);}
/* Filter bar */
.filterbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0 4px; border-top:1px solid var(--border);}
/* Zeitraum und Vergleichszeitraum gehören zusammen und stehen deshalb als eine Einheit
   nebeneinander — vorher stand der Vergleich blass am anderen Ende der Zeile. */
.zeitraum{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.filterbar label{font-size:13px; color:var(--ink-2); font-weight:600;}
.vslabel{font-size:12.5px; color:var(--ink-3);}
select{font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-ctl); padding:7px 14px; cursor:pointer;}
select:focus-visible{outline:2px solid var(--accent);}
/* Der Vergleichszeitraum: gleiche Höhe wie der Kalender-Knopf, aber ohne Rahmen —
   sichtbar zugehörig, ohne wie ein zweiter Knopf auszusehen. */
.compnote{font-size:13.5px; font-weight:600; color:var(--ink-2); background:var(--sec);
  border:1px solid var(--border-soft); border-radius:var(--radius-ctl); padding:7px 14px;
  font-variant-numeric:tabular-nums; white-space:nowrap;}
.compnote.leer{color:var(--ink-3); font-weight:500; background:transparent; border-style:dashed;}
@media(max-width:620px){
  .zeitraum{width:100%;}
  .compnote{white-space:normal;}
}
/* Sections */
section{background:var(--sec); border-radius:24px; padding:24px 22px 24px; margin-top:20px;}
section.hero{background:var(--sec-hero);}
section > h2{font-size:34px; line-height:1.15; color:var(--ink); margin:2px 0 8px; display:flex; align-items:center; gap:9px;}
h2 .dot{width:12px; height:12px; border-radius:50%; flex:none;}
h2 .dot.seo{background:var(--seo);} h2 .dot.geo{background:var(--geo);}
.groupcap{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:600; margin:16px 2px 8px;}
/* Tiles */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr);}}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:15px 17px 13px; box-shadow:var(--shadow); position:relative;}
.tile.wide{grid-column:span 2;}
.tile .label{font-size:12.5px; color:var(--ink-2); font-weight:600;}
.tile .label .netto{font-weight:600; font-size:10.5px; color:var(--ink-3); border:1px solid var(--border);
  border-radius:5px; padding:0 4px; margin-left:3px; vertical-align:1px; white-space:nowrap;}
.card.note,
.tile.note{display:grid; align-content:center; font-size:12px; line-height:1.5; color:var(--ink-3);
  background:transparent; box-shadow:none; border-style:dashed;}
.card.note strong,
.tile.note strong{color:var(--ink-2);}
.tile .value{font-size:26px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin:2px 0 4px;}
.tile.wide .value{font-size:31px;}
.tile .unit{font-size:15px; font-weight:600; color:var(--ink-2);}
.tile .sub{font-size:12px; color:var(--ink-3); font-weight:600; margin-top:3px;}
.tile .sub:empty{display:none;}
/* Kalender-Zeitraumwahl */
.calwrap{position:relative;}
.calbtn{font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-ctl); padding:7px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
.calbtn:focus-visible{outline:2px solid var(--accent);}
.calbtn .car{color:var(--ink-3); font-size:11px;}
.cal-pop{position:absolute; top:calc(100% + 6px); left:0; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:0 20px 50px color-mix(in oklab, var(--tinte) 14%, transparent); padding:18px; width:600px; max-width:calc(100vw - 40px); display:none;}
.cal-pop.open{display:block;}
.cal-inputs{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.cal-inputs .ci{flex:1; border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface);}
.cal-inputs .arr{color:var(--ink-3);}
.cal-months{display:flex; gap:22px;}
.cal-m{flex:1;}
.cal-head{display:flex; align-items:center; justify-content:center; position:relative; font-weight:600; font-size:14px; margin-bottom:8px;}
.cal-nav{position:absolute; top:-2px; background:none; border:none; font-size:16px; color:var(--ink-2); cursor:pointer; padding:2px 8px; border-radius:6px;}
.cal-nav:hover{background:var(--border-soft);} .cal-nav:disabled{color:var(--border); cursor:default; background:none;}
.cal-nav.prev{left:0;} .cal-nav.next{right:0;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:13px; row-gap:2px;}
.cal-grid .dow{font-size:11px; font-weight:600; color:var(--ink-3); padding:4px 0;}
.cal-grid .d{padding:7px 0; cursor:pointer; position:relative; color:var(--ink); font-variant-numeric:tabular-nums;}
.cal-grid .d.off{color:var(--border); cursor:default;}
.cal-grid .d.inrange{background:var(--range);}
.cal-grid .d.rs{background:var(--accent); color:var(--on-accent); border-radius:99px 0 0 99px; font-weight:600;}
.cal-grid .d.re{background:var(--accent); color:var(--on-accent); border-radius:0 99px 99px 0; font-weight:600;}
.cal-grid .d.rs.re{border-radius:99px;}
.cal-grid .d.inrange:hover{background:var(--wolke);}
.cal-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border-soft);}
.cal-foot button{font:inherit; font-size:13.5px; font-weight:600; border-radius:var(--radius-ctl); padding:8px 18px; cursor:pointer;}
.cal-cancel{background:var(--surface); border:1px solid var(--border); color:var(--ink);}
.cal-apply{background:var(--accent); border:1px solid var(--accent); color:var(--on-accent);}
.cal-hint{font-size:12px; color:var(--ink-3); margin-top:8px;}
.delta{display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; border-radius:99px; padding:2px 9px; font-variant-numeric:tabular-nums;}
.delta.up{color:var(--up); background:var(--up-bg);} .delta.down{color:var(--down); background:var(--down-bg);}
.delta.flat{color:var(--ink-3); background:var(--border-soft);}
.delta .vs{font-weight:500; color:var(--ink-3);}
.footnote{font-size:12px; color:var(--ink-3); margin:10px 2px 0;}
/* Aufklappbare Umsatz-Aufteilung (klassische Suche vs. Google-Shopping-Einträge) */
.split{border:1px solid var(--border); border-radius:10px; margin:4px 0 10px;}
.split summary{display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; list-style:none;}
.split summary::-webkit-details-marker{display:none;}
.split summary::marker{content:"";}
.split summary::before{content:""; flex:none; width:0; height:0; border-left:5px solid var(--ink-3); border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .15s ease;}
.split[open] summary::before{transform:rotate(90deg);}
.split[open] summary{border-bottom:1px solid var(--border);}
.split-rows{padding:2px 12px 6px;}
.split-row{display:grid; grid-template-columns:1fr auto auto; align-items:baseline; gap:14px; font-size:12.5px; padding:7px 0; border-bottom:1px solid var(--border);}
.split-row:last-child{border-bottom:none;}
.split-row span:first-child{color:var(--ink-2); min-width:0;}
.split-row b{font-variant-numeric:tabular-nums; text-align:right;}
.split-row .split-v{color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
/* Cards & charts */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
@media(max-width:760px){.grid2{grid-template-columns:1fr;}}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); padding:16px 18px 10px; box-shadow:var(--shadow);}
.card.full{grid-column:1 / -1;}
.card h3{font-size:15.5px; margin:0 0 3px; font-weight:600;}
.card .hint{font-size:12.5px; color:var(--ink-2); margin:0 0 8px;}
.legend{display:flex; gap:14px; font-size:12px; color:var(--ink-2); margin:0 0 4px; flex-wrap:wrap;}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
.legend i.dash{height:0; border-top:2.5px dashed var(--ink-2); border-radius:0; vertical-align:2px;}
svg{display:block; width:100%; height:auto;}
table{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums;}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); text-align:left; font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border);}
td{padding:7px 8px; border-bottom:1px solid var(--border-soft);}
tr:last-child td{border-bottom:0;}
td.num,th.num{text-align:right;}
.chg{font-weight:600; font-size:12.5px;} .chg.up{color:var(--up);} .chg.down{color:var(--down);} .chg.flat{color:var(--ink-3);}
details{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); margin-top:12px; box-shadow:var(--shadow);}
details summary{cursor:pointer; padding:13px 18px; font-weight:600; font-size:14px; list-style:none; display:flex; align-items:center; gap:8px;}
details summary::-webkit-details-marker{display:none;}
details summary::before{content:"▸"; color:var(--ink-3); transition:transform .15s;}
details[open] summary::before{transform:rotate(90deg);}
details summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--radius-card);}
details .inner{padding:2px 18px 16px; border-top:1px solid var(--border-soft);}
details .inner p{color:var(--ink-2); font-size:13px; margin:10px 0 8px;}
footer{margin-top:32px; padding-top:18px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--ink-2); font-size:13px;}
footer a{color:var(--accent); text-decoration:none;} footer a:hover{text-decoration:underline;}

/* GSC-style tooltip */
#tip{position:fixed; pointer-events:none; background:var(--surface); color:var(--ink); border:1px solid var(--border);
  box-shadow:0 12px 32px color-mix(in oklab, var(--tinte) 14%, transparent); border-radius:14px; padding:10px 14px; opacity:0; transition:opacity .08s;
  z-index:9; font-size:13px; min-width:190px; font-variant-numeric:tabular-nums;}
#tip .tt-h{font-weight:600; font-size:13px; margin-bottom:7px;}
#tip .tt-r{display:flex; align-items:center; gap:8px; padding:2.5px 0;}
#tip .tt-r i{width:9px; height:9px; border-radius:50%; flex:none;}
#tip .tt-r span{color:var(--ink-2); margin-right:auto; padding-right:16px;}
#tip .tt-r b{font-weight:600;}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;} }

/* Login */
.login-page{min-height:100vh; display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; background:var(--bg);}
.legal{font-size:12.5px; color:var(--ink-3);}
.legal a{color:var(--ink-3); text-decoration:none;} .legal a:hover{text-decoration:underline;}
.login-card{background:var(--surface); border:1px solid var(--border); border-radius:28px; box-shadow:var(--shadow); padding:36px 40px; width:380px; max-width:calc(100vw - 40px); text-align:center;}
.login-card .logos{justify-content:center; margin-bottom:20px;}
.login-card h1{font-size:34px; line-height:1.1; margin:0 0 8px;}
.login-card p{font-size:13.5px; color:var(--ink-2); margin:0 0 20px;}
.login-card p a{color:var(--noir); text-decoration:underline; text-decoration-color:var(--saffron); text-underline-offset:3px; font-weight:600; text-decoration:none;}
.login-card input{width:100%; box-sizing:border-box; font:inherit; padding:11px 16px; border:1px solid var(--border); border-radius:var(--radius-ctl); margin-bottom:12px;}
.login-card input:focus-visible{outline:2px solid var(--saffron); outline-offset:1px;}
.login-card button{width:100%; font:inherit; font-weight:600; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius-ctl); padding:12px; cursor:pointer;}
.login-error{color:var(--down); font-size:13px; margin:0 0 12px;}
.logout{background:none; border:none; color:var(--ink-3); font:inherit; font-size:12.5px; cursor:pointer; padding:0; text-decoration:underline;}

/* Interner Agentur-Bereich: Wochenwerte als Tabelle nachtragen */
.admin-page{min-height:100vh; background:var(--bg); padding:40px 20px; display:flex; justify-content:center;}
.admin-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:32px 36px; width:640px; max-width:100%;}
.admin-card .logos{justify-content:center; margin-bottom:18px;}
.admin-card h1{font-size:32px; margin:0 0 6px; text-align:center;}
.admin-card > p{font-size:13px; color:var(--ink-2); margin:0 0 18px; text-align:center; line-height:1.5;}
.admin-ok{color:var(--up)!important; font-weight:600;}
.admin-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.admin-tab{font-size:13.5px; font-weight:600; color:var(--ink-2); text-decoration:none; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 14px;}
.admin-tab.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.admin-table th[scope=row]{font-size:13px; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:600; white-space:nowrap; border-bottom:1px solid var(--border-soft);}
.admin-table td{width:33%;}
.admin-table input{width:100%; box-sizing:border-box; font:inherit; font-size:13.5px; font-variant-numeric:tabular-nums; text-align:right; padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink);}
.admin-table input:focus-visible{outline:2px solid var(--accent);}
.admin-card button{width:100%; font:inherit; font-weight:600; background:var(--accent); color:var(--on-accent); border:none; border-radius:var(--radius-ctl); padding:12px; cursor:pointer; margin-top:18px;}
.admin-hint{font-size:12.5px; color:var(--ink-3); text-align:center; margin:12px 0 0;}

/* ------------------------------------------------------------------
   Handy (bis 560px) — iPhone & Co.
   Ziel: mehr Platz für die Inhalte (schmalere Ränder), nichts, was in
   zwei Zeilen zerfällt, und Bedienelemente, die man mit dem Daumen trifft.
   Die Diagramme selbst rechnen ihre Größe in dashboard.js aus.
   ------------------------------------------------------------------ */
@media(max-width:560px){
  html{-webkit-text-size-adjust:100%;}
  .wrap{padding:14px 10px 36px;}
  /* Kopfzeile: Logos oben, Titel darunter linksbündig statt rechtsbündig ins Leere */
  header{flex-direction:column; align-items:flex-start; gap:10px; padding:2px 0 14px;}
  .logoimg{height:28px;}
  .weekbox{text-align:left;}
  .weekbox .week{font-size:31px;}
  /* Zeitraumwahl: Beschriftung auf eigener Zeile, Knopf über die volle Breite */
  .filterbar{gap:8px; padding:10px 0 2px;}
  .filterbar label{width:100%;}
  .zeitraum{gap:8px;}
  .calwrap{flex:1 1 100%;}
  .calbtn{width:100%; justify-content:space-between; padding:10px 12px;}
  .vslabel{font-size:12px;}
  .compnote{padding:6px 10px;}
  /* Kalender: zwei Monate untereinander statt nebeneinander, größere Tagesfelder */
  /* box-sizing: sonst käme das Innenpolster zur Breite hinzu und der Kalender ragte rechts raus */
  .cal-pop{box-sizing:border-box; left:0; width:calc(100vw - 20px); max-width:calc(100vw - 20px); padding:14px;}
  .cal-months{flex-direction:column; gap:16px;}
  .cal-grid .d{padding:9px 0;}
  .cal-foot{gap:8px;}
  .cal-foot button{flex:1; padding:11px 10px;}
  /* Abschnitte und Karten: schmalere Innenränder = breitere Diagramme */
  section{padding:14px 10px 16px; margin-top:16px; border-radius:14px;}
  section > h2{font-size:27px;}
  .groupcap{margin:14px 0 7px;}
  .card{padding:14px 12px 10px;}
  .card h3{font-size:15px;}
  .card .hint{font-size:12px;}
  .legend{gap:12px; font-size:11.5px;}
  .grid2{gap:10px;}
  /* Kacheln: zwei nebeneinander; eine einzeln übrig bleibende geht über die volle Breite */
  .tiles{gap:10px;}
  .tile{padding:12px 12px 10px;}
  .tiles > .tile:last-child:nth-child(odd){grid-column:1 / -1;}
  .tile .label{font-size:12px;}
  .tile .value{font-size:23px;}
  .tile.wide .value{font-size:26px;}
  .tile .unit{font-size:14px;}
  /* Die Veränderung darf nicht in zwei Zeilen zerbrechen. Der Zusatz „vs. Vorwoche" entfällt —
     mit welchem Zeitraum verglichen wird, steht schon oben in der Zeitraumzeile. Hinweis-Pillen
     („noch nicht gemessen") bestehen dagegen nur aus diesem Text und bleiben, dürfen dafür
     aber umbrechen. */
  .delta{white-space:nowrap;}
  .delta .vgl{display:none;}
  .delta.hinweis{white-space:normal;}
  .footnote{font-size:11.5px;}
  .split-row{gap:8px; font-size:12px;}
  footer{font-size:12.5px; gap:8px;}
  #tip{max-width:calc(100vw - 24px); font-size:12.5px;}
  /* Login und interner Bereich */
  /* 16px verhindert, dass iPhone-Safari beim Antippen eines Eingabefelds hineinzoomt */
  .login-card input, .admin-table input{font-size:16px;}
  .login-card{padding:28px 22px;}
  .admin-page{padding:20px 10px;}
  .admin-card{padding:22px 14px;}
  .admin-tabs{gap:6px;}
}

/* ---- Erklärseite /kennzahlen (öffentlich, ohne Login) ---------------------- */
/* Die Seite bildet das Dashboard nach: dieselben Kacheln und Karten, aber jede lässt sich
   aufklappen. Alle Regeln hängen an .erklseite — das Dashboard selbst bleibt unberührt.
   Bewusst ohne JavaScript: <details> kann das von Haus aus. */
/* Volle Breite der Abschnittskachel (Konrad, 1. September 2026): Ein schmaler Textblock
   in einer breiten Karte sah aus wie ein Fehler. */
.sekhinweis{margin:4px 0 2px; font-size:13px; color:var(--ink-2);}
h2 .dot.neutral{background:var(--ink-3);}

.seitennav{display:flex; gap:6px; flex-wrap:wrap;}
.seitennav a{font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:7px 12px; text-decoration:none;}
.seitennav a:hover{border-color:var(--ink-3);}
.navhinweis{font-size:12.5px; color:var(--ink-3); flex:1 1 260px; min-width:0;}

/* Drei Kacheln nebeneinander statt drei in einem Vierer-Raster mit Lücke. */
.erklseite .tiles.three{grid-template-columns:repeat(3,1fr);}
/* Nur die aufgeklappte Kachel wächst — sonst zieht sie ihre Nachbarn mit in die Höhe. */
.erklseite .tiles{align-items:start;}

/* Aufklappbare Kachel / Karte.
   Achtung: Weiter oben steht eine allgemeine Regel `details summary` für die Aufklapp-Kästen
   im internen Bereich — die legt den Inhalt nebeneinander, setzt Innenabstände und ein
   Pfeil-Zeichen davor. Für die Kacheln muss das alles zurückgenommen werden, sonst stehen
   Beschriftung, Wert und Veränderung in einer Zeile und die Kachel schiebt sich aus dem
   Bildschirm (am 1. September 2026 genau so passiert). */
details.erkl{background:var(--surface); margin-top:0;}
details.erkl > summary{display:block; padding:0; gap:0; align-items:initial; font-weight:400;
  font-size:inherit; color:inherit; list-style:none; cursor:pointer;}
details.erkl > summary::before{content:none;}
details.erkl > summary::marker{content:"";}
details.erkl > summary::-webkit-details-marker{display:none;}
details.erkl > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px;}
details.erkl:hover{border-color:var(--ink-3);}
details.erkl[open]{border-color:var(--ink-3);}
/* Der Aufklapp-Knopf muss als Knopf erkennbar sein — als blasser Text wurde er übersehen. */
/* display:flex statt inline-flex: der Knopf steht immer auf einer eigenen Zeile, sonst
   rutscht er in breiten Kacheln neben die Veränderung und die Kacheln wirken uneinheitlich. */
.aufklapp{display:flex; width:fit-content; align-items:center; gap:7px; margin-top:10px;
  font-size:13.5px; font-weight:600; color:var(--accent);
  background:var(--surface); border:1.5px solid var(--accent); border-radius:9px; padding:7px 12px;}
/* Der Pfeil ist gezeichnet, kein Schriftzeichen: „▾" fiel je nach Schrift dünn und winzig
   aus. Zwei Rahmenkanten im 45-Grad-Winkel ergeben ein sauberes Winkelzeichen, das die
   Farbe des Knopfes übernimmt und beim Öffnen nach oben zeigt. */
.aufklapp::after{content:""; width:6px; height:6px; margin:-3px 1px 0;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .15s ease, margin .15s ease;}
/* Der Knopf beschriftet sich selbst um — sonst stünde „anzeigen" über einem offenen Text. */
.txt-auf{display:none;}
details.erkl[open] .txt-zu{display:none;}
details.erkl[open] .txt-auf{display:inline;}
details.erkl > summary:hover .aufklapp{background:var(--accent); color:var(--on-accent);}
details.erkl[open] .aufklapp{color:var(--ink-2); border-color:var(--border);}
details.erkl[open] .aufklapp::after{transform:rotate(-135deg); margin:1px 1px -1px;}
details.erkl[open] > summary:hover .aufklapp{background:var(--sec); color:var(--ink);}

/* „optional": erscheint nur bei Kunden, für die diese Kennzahl gemessen wird. */
.badge.verlauf{color:var(--accent); background:transparent; border-color:var(--accent); opacity:.75;}
.badge{display:inline-block; margin-left:6px; vertical-align:1px;
  font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); background:var(--sec); border:1px solid var(--border);
  border-radius:99px; padding:2px 7px;}
.card.erkl > summary h3{margin:0 0 2px;}
.card.erkl > summary .hint{margin:0;}

.erkl-body{border-top:1px solid var(--border-soft); margin-top:10px; padding-top:10px;}
.erkl-body .zeigt{margin:0 0 10px; font-size:14px; max-width:70ch;}
.erkl-body a{color:var(--accent);}
.erkl-body p{overflow-wrap:break-word;}
.fakten{margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:baseline;}
/* Kein Umbruchverbot: „Woher die Zahl kommt" ist breiter als eine Kachelspalte auf dem
   Handy und würde die Kachel sonst aus dem Bildschirm schieben. */
.fakten dt{font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-3); padding-top:2px;}
.fakten dd{margin:0; font-size:13.5px; color:var(--ink-2); min-width:0; overflow-wrap:break-word;}
.fakten dd.bsp{background:var(--sec); border-radius:8px; padding:7px 10px; color:var(--ink);
  font-variant-numeric:tabular-nums;}
/* In Kacheln steht die Beschriftung immer über dem Text — auch aufgeklappt ist eine Kachel
   schmaler als eine Karte, zwei Spalten würden dort quetschen. */
.tile.erkl .fakten{grid-template-columns:1fr; gap:1px 0;}
.tile.erkl .value{overflow-wrap:break-word;}
.tile.erkl summary .label{overflow-wrap:break-word;}
.tile.erkl .fakten dd{margin-bottom:8px;}

/* Häufige Fragen: dieselbe Karte, nur ohne Unterzeile — die Frage ist die Überschrift. */
.card.erkl > summary h3{max-width:60ch;}
.erkl-body p{font-size:14px; color:var(--ink-2); max-width:70ch; margin:0 0 10px;}
.erkl-body p:last-child{margin-bottom:0;}

@media(max-width:860px){
  /* Zwei Kacheln nebeneinander wie im Dashboard. */
  .erklseite .tiles.three{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
  /* Auf dem Handy eine Kachel pro Zeile: Die Breite ändert sich beim Aufklappen nie, und der
     Erklärtext steht nicht als drei Wörter breites Band in einer 165px-Spalte. */
  .erklseite .tiles, .erklseite .tiles.three{grid-template-columns:1fr;}
  .card.erkl .fakten{grid-template-columns:1fr; gap:1px 0;}
  .card.erkl .fakten dd{margin-bottom:8px;}
}

/* Startseite app.ambyt.de - Verlauf wie im Kopf von ambyt.de (Hero: oben rechts Saffron,
   unten links Cloud), Karte linksbündig wie die Formulare der Website. */
.start-page{background:
  radial-gradient(1100px 800px at 92% 0%, var(--saffron-35) 0%, var(--saffron-35) 20%, transparent 70%),
  radial-gradient(1000px 760px at 0% 100%, var(--wolke) 0%, var(--wolke) 20%, transparent 70%),
  var(--nebel); padding:24px 16px; box-sizing:border-box;}
:root{--saffron-35:color-mix(in oklab, var(--saffron) 35%, var(--nebel));}
.start-card{width:440px; box-sizing:border-box; max-width:100%; text-align:left; padding:40px 40px 36px;
  box-shadow:0 24px 60px color-mix(in oklab, var(--tinte) 14%, transparent); border-color:transparent;}
.start-logo{display:inline-block; margin-bottom:28px;}
/* Die Kennzeile ist zugleich die Seitenüberschrift (h1), sieht aber aus wie ein Eyebrow */
.start-card .eyebrow{font-family:var(--font-body); font-size:11.5px; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 8px;}
.start-card > p{font-size:14.5px; margin:0 0 22px;}
.start-card .start-intro{color:var(--ink);}
.start-card label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin:0 0 6px 4px;}
.start-card input{margin-bottom:16px;}
.start-card button{margin-top:4px;}
.start-fehler{background:color-mix(in oklab, var(--saffron) 14%, var(--white)); border:1px solid color-mix(in oklab, var(--saffron) 45%, var(--white));
  border-radius:16px; padding:12px 16px; font-size:13.5px; line-height:1.5; color:var(--ink); margin:0 0 20px;}
.start-fehler strong{display:block; margin-bottom:2px;}
.start-fehler a{color:var(--ink); text-decoration-color:var(--saffron); text-underline-offset:3px;}
.start-gast{margin-top:26px; padding-top:22px; border-top:1px solid var(--border);}
.start-gast p{font-size:13.5px; color:var(--ink-2); margin:0 0 14px;}
.btn-saffron{display:inline-flex; align-items:center; gap:8px; background:var(--saffron); color:var(--tinte);
  font-weight:600; font-size:14.5px; text-decoration:none; border-radius:9999px; padding:11px 20px;}
.btn-saffron:hover{background:color-mix(in oklab, var(--saffron) 88%, var(--tinte));}
.start-page .legal a{color:var(--ink-2);}
@media(max-width:520px){
  .start-card{padding:30px 22px 26px;}
}