/* Vamos Meli & Ivis
 * Farbwelt: helle, freundliche Blautöne — Himmel, Dunst, Aqua.
 * Schrift: Cormorant Garamond für Überschriften und große Zahlen,
 * Lato für alles, was gelesen und getippt wird.
 */

:root {
  --hintergrund: #f2f8fd;
  --flaeche:     #ffffff;
  --flaeche-2:   #e8f2fb;
  --rand:        #cfe3f2;
  --schrift:     #1d3c53;
  --schrift-2:   #5f7f96;
  --akzent:      #4a90c2;
  --akzent-2:    #64bcd0;
  --akzent-3:    #7f9fd4;

  --gruen: #3f8f6f; --gelb: #bb8a2b; --rot: #c25450;
  --blau: #3f7fae; --lila: #7b74b8; --grau: #8298a8;

  --radius: 14px;
  --schatten: 0 1px 2px rgba(29,60,83,.06), 0 6px 18px rgba(29,60,83,.07);
  --font: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-zier: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
  --leiste: 252px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hintergrund: #101c26; --flaeche: #172733; --flaeche-2: #1f3442; --rand: #2c4759;
    --schrift: #e6f0f7; --schrift-2: #9ab4c6;
    --akzent: #7ab8e0; --akzent-2: #74cfe0; --akzent-3: #9db9e8;
    --gruen: #63b894; --gelb: #d9ab52; --rot: #e07c78;
    --blau: #79b3d9; --lila: #a79fd8; --grau: #90a8b8;
    --schatten: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --hintergrund: #101c26; --flaeche: #172733; --flaeche-2: #1f3442; --rand: #2c4759;
  --schrift: #e6f0f7; --schrift-2: #9ab4c6;
  --akzent: #7ab8e0; --akzent-2: #74cfe0; --akzent-3: #9db9e8;
  --gruen: #63b894; --gelb: #d9ab52; --rot: #e07c78;
  --blau: #79b3d9; --lila: #a79fd8; --grau: #90a8b8;
  --schatten: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }

/* MUSS vor allen display-Regeln stehen: das hidden-Attribut setzt display:none
   nur im Browser-Standardstylesheet — jede eigene display-Regel sticht es sonst
   aus, und die Anmeldemaske bliebe über der App stehen. */
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--hintergrund); color: var(--schrift);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }

/* ── Anmeldung ──────────────────────────────────────────────────────────── */

.mitte {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6rem; padding: 2rem 16px;
}
.tor-titel { font-size: clamp(1.6rem,6vw,2.3rem); font-weight: 600; letter-spacing: -.01em; }
.tor-titel .amp, .marke-titel .amp { color: var(--akzent); }
.tor-text { color: var(--schrift-2); margin: 0 0 1.4rem; }
.tor {
  display: flex; flex-direction: column; width: 100%; max-width: 330px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--schatten);
  text-align: center;
}
.tor label {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--schrift-2); margin: .8rem 0 .3rem;
}
.tor input {
  font: inherit; font-size: 16px;      /* unter 16px zoomt iOS beim Tippen */
  padding: .6rem .7rem; border-radius: 8px;
  background: var(--hintergrund); color: var(--schrift); border: 1px solid var(--rand);
}
.tor input:focus { outline: none; border-color: var(--akzent); }
.tor-fehler { color: var(--rot); font-size: .87rem; margin: .9rem 0 0; min-height: 1.2em; }

/* ── Grundgerüst ────────────────────────────────────────────────────────── */

#app { display: grid; grid-template-columns: var(--leiste) 1fr; min-height: 100dvh; }

#sidebar {
  display: flex; flex-direction: column;
  background: var(--flaeche); border-right: 1px solid var(--rand);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.marke { padding: 1.1rem 1.1rem .8rem; border-bottom: 1px solid var(--rand); }
.marke-titel { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.marke-datum { display: block; font-size: .8rem; color: var(--schrift-2); margin-top: .15rem; }

#menue { flex: 1; padding: .7rem .6rem; }
.m-eintrag, .m-kopf {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .52rem .7rem; border-radius: 8px; text-decoration: none;
  color: var(--schrift); font: inherit; font-size: .93rem;
  background: none; border: none; cursor: pointer; text-align: left;
}
.m-eintrag:hover, .m-kopf:hover { background: var(--flaeche-2); }
.m-eintrag.aktiv { background: var(--flaeche-2); color: var(--akzent); font-weight: 600; }
.m-eintrag.kind { padding-left: 1.6rem; font-size: .89rem; }
.m-icon { width: 1.3em; text-align: center; flex: none; }
.m-kopf { font-weight: 600; color: var(--schrift-2); font-size: .8rem;
          text-transform: uppercase; letter-spacing: .05em; }
.m-pfeil { margin-left: auto; transition: transform .15s; font-size: .8em; }
.m-gruppe:not(.auf) .m-pfeil { transform: rotate(-90deg); }
.m-gruppe:not(.auf) .m-kinder { display: none; }

.sidebar-fuss {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .8rem 1rem; border-top: 1px solid var(--rand);
}
.wer { font-size: .82rem; color: var(--schrift-2); flex: 1; }

#schleier { display: none; }

#inhalt { min-width: 0; padding: 0 20px 4rem; }
#kopf {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.2rem 0 1rem; position: sticky; top: 0; z-index: 5;
  background: var(--hintergrund); border-bottom: 1px solid var(--rand); margin-bottom: 1.3rem;
}
#seitentitel { margin: 0; font-size: 1.3rem; font-weight: 600; }
.zustand { margin-left: auto; font-size: .8rem; color: var(--schrift-2); }
.zustand.gespeichert { color: var(--gruen); }
.zustand.neu { color: var(--akzent); font-weight: 600; }
.zustand.fehler {
  color: var(--rot); font-weight: 600;
  border: 1px solid var(--rot); border-radius: 7px; padding: .2rem .5rem;
}
.nur-schmal { display: none; }
h2.abschnitt {
  font-size: .82rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--schrift-2); margin: 2rem 0 .7rem;
}

/* ── Dashboard-Karten ───────────────────────────────────────────────────── */

.karten { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); }
.karte {
  display: block; text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--schatten);
  transition: border-color .12s, transform .12s;
}
.karte:hover { border-color: var(--akzent); transform: translateY(-1px); }
.karte.weit { grid-column: span 2; }
.karte.ampel-gruen { border-color: var(--gruen); }
.karte.ampel-gelb  { border-color: var(--gelb); }
.karte.ampel-rot   { border-color: var(--rot); }
.k-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--schrift-2); }
.k-gross { font-size: 1.85rem; font-weight: 600; line-height: 1.2; margin-top: .1rem; }
.k-mittel { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin-top: .1rem; }
.k-fuss { font-size: .82rem; color: var(--schrift-2); margin-top: .15rem; }
.offen { color: var(--schrift-2); font-weight: 400; }

.kachel {
  background: var(--flaeche); border: 2px solid var(--rand);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  box-shadow: var(--schatten); margin: 1rem 0;
}
.kachel-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--schrift-2); }
.kachel-zahl { font-size: 2rem; font-weight: 600; line-height: 1.15; }
.kachel-fuss { font-size: .82rem; color: var(--schrift-2); margin-top: .1rem; }
.kachel.ampel-gruen { border-color: var(--gruen); }
.kachel.ampel-gelb  { border-color: var(--gelb); }
.kachel.ampel-rot   { border-color: var(--rot); }

.balken { height: 7px; background: var(--flaeche-2); border-radius: 4px; overflow: hidden; margin: .6rem 0 .45rem; }
.balken-fuell { height: 100%; border-radius: 4px; transition: width .25s; }

/* ── Szenario-Wahl ──────────────────────────────────────────────────────── */

.sz-wahl { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(185px,1fr)); }
.sz-knopf {
  display: grid; gap: .05rem; text-align: left; cursor: pointer; font: inherit;
  padding: .6rem .8rem; background: var(--flaeche); color: var(--schrift);
  border: 2px solid var(--rand); border-radius: var(--radius);
}
.sz-knopf:hover { border-color: var(--akzent-2); }
.sz-knopf.aktiv { border-color: var(--akzent); background: var(--flaeche-2); }
.sz-knopf b { font-size: .72rem; letter-spacing: .12em; color: var(--schrift-2); }
.sz-knopf.aktiv b { color: var(--akzent); }
.sz-knopf span { font-weight: 600; font-size: .9rem; }
.sz-knopf em { font-style: normal; font-size: 1.08rem; font-weight: 600; }
.sz-info { color: var(--schrift-2); font-size: .88rem; margin: .7rem .2rem 0; }

/* ── Listen ─────────────────────────────────────────────────────────────── */

.liste {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
}
.l-zeile {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .65rem .9rem; border-bottom: 1px solid var(--rand);
  background: none; border-left: none; border-right: none; border-top: none;
  color: inherit; font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
}
.l-zeile:last-child { border-bottom: none; }
.l-zeile:hover { background: var(--flaeche-2); }
.l-zeile.spaet { background: color-mix(in srgb, var(--rot) 9%, transparent); }
.l-haupt { flex: 1; min-width: 0; }
.l-haupt small { display: block; font-size: .78rem; color: var(--schrift-2); }
.l-neben { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.l-datum { font-variant-numeric: tabular-nums; color: var(--schrift-2); font-size: .85rem; min-width: 96px; }
.chip {
  font-size: .75rem; padding: .1rem .5rem; border-radius: 99px;
  background: var(--flaeche-2); border: 1px solid var(--rand); white-space: nowrap;
}

/* ── Budget-Posten ──────────────────────────────────────────────────────── */

.kat-block { margin-bottom: 1.1rem; }
.kat-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 .4rem; padding: 0 .2rem; font-size: .95rem; font-weight: 600;
}
.kat-summe { color: var(--akzent); font-variant-numeric: tabular-nums; }
.kat-block .p-zeile:first-of-type { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.kat-block .p-zeile:last-of-type { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }

.p-zeile {
  display: grid; grid-template-columns: 1fr auto 112px 106px;
  gap: .7rem; align-items: center; width: 100%;
  padding: .62rem .9rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-bottom: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.kat-block .p-zeile:last-of-type { border-bottom: 1px solid var(--rand); }
.p-zeile:hover { background: var(--flaeche-2); }
.p-name { min-width: 0; font-weight: 500; }
.p-name small { display: block; font-size: .78rem; color: var(--schrift-2); font-weight: 400; }
.p-summe { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-faellig { font-size: .84rem; color: var(--schrift-2); font-variant-numeric: tabular-nums; }

/* ── Bausteine ──────────────────────────────────────────────────────────── */

.knopf {
  font: inherit; font-size: .88rem; cursor: pointer;
  padding: .45rem .85rem; border-radius: 8px;
  background: var(--flaeche); color: var(--schrift); border: 1px solid var(--rand);
}
.knopf:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf.klein { padding: .3rem .5rem; font-size: .9rem; }
.knopf.gross { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.knopf.gross:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.knopf.warn:hover:not(:disabled) { border-color: var(--rot); color: var(--rot); }

.leiste { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin: 1.2rem 0 .9rem; }
.wachs { flex: 1; }
.hinweis-klein { font-size: .82rem; color: var(--schrift-2); }
.hinweis-block {
  background: var(--flaeche-2); border-left: 3px solid var(--akzent-2);
  border-radius: 8px; padding: .7rem .9rem; font-size: .88rem;
  color: var(--schrift-2); margin: 0 0 1rem;
}
.leer { color: var(--schrift-2); font-size: .9rem; padding: 1rem .2rem; }

.pille {
  display: inline-block; font-size: .73rem; font-weight: 500;
  padding: .12rem .55rem; border-radius: 99px; white-space: nowrap;
  border: 1px solid currentColor;
}
.pille.grau { color: var(--grau); }   .pille.blau { color: var(--blau); }
.pille.lila { color: var(--lila); }   .pille.gelb { color: var(--gelb); }
.pille.gruen { color: var(--gruen); } .pille.rot { color: var(--rot); }

.ampel-gruen { color: var(--gruen); } .ampel-gelb { color: var(--gelb); } .ampel-rot { color: var(--rot); }
.ampel-bg-gruen { background: var(--gruen); } .ampel-bg-gelb { background: var(--gelb); } .ampel-bg-rot { background: var(--rot); }
.kachel.ampel-gruen .kachel-zahl, .kachel.ampel-gelb .kachel-zahl,
.kachel.ampel-rot .kachel-zahl, .karte.ampel-gruen .k-gross,
.karte.ampel-gelb .k-gross, .karte.ampel-rot .k-gross { color: inherit; }

/* ── Einstellungen ──────────────────────────────────────────────────────── */

.e-block {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem;
  box-shadow: var(--schatten); margin-bottom: 1rem;
}
.e-block h3 { margin: 0 0 .2rem; font-size: 1rem; }
.e-block > .hinweis-klein { display: block; margin-bottom: .8rem; }
.e-gitter { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); margin-top: .7rem; }
.e-feld.breit { grid-column: 1 / -1; }
/* Nur die Feldbeschriftung selbst - NICHT die <label> der Ankreuzfelder
   darin, sonst stehen die Optionsnamen in Grossbuchstaben. */
.e-feld > label, .dlg-feld > label {
  display: block; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--schrift-2); margin-bottom: .3rem;
}

/* ── Dialog ─────────────────────────────────────────────────────────────── */

dialog {
  border: 1px solid var(--rand); border-radius: 14px; padding: 0;
  background: var(--flaeche); color: var(--schrift);
  width: min(620px, calc(100vw - 24px)); max-height: 88dvh;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
#dialog-form { display: flex; flex-direction: column; max-height: 88dvh; }
.dialog-kopf {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--rand);
}
.dialog-kopf h2 { margin: 0; font-size: 1.1rem; flex: 1; }
.dialog-zu {
  background: none; border: none; cursor: pointer; font-size: 1.1rem;
  color: var(--schrift-2); padding: .2rem .4rem; border-radius: 6px;
}
.dialog-zu:hover { color: var(--rot); background: var(--flaeche-2); }

.dialog-felder {
  padding: 1rem 1.1rem; overflow-y: auto;
  display: grid; gap: .85rem; grid-template-columns: 1fr 1fr;
}
.dlg-feld.breit, .dialog-hinweis, .dialog-fehler { grid-column: 1 / -1; }
.dialog-hinweis {
  margin: 0; font-size: .85rem; color: var(--schrift-2);
  background: var(--flaeche-2); border-radius: 8px; padding: .6rem .8rem;
}
.dialog-fehler {
  margin: 0; font-size: .87rem; color: var(--rot); font-weight: 600;
  border: 1px solid var(--rot); border-radius: 8px; padding: .5rem .8rem;
}

.feld-zeile { display: flex; align-items: center; gap: .4rem; }
.feld-zeile input, .feld-zeile select, .feld-zeile textarea {
  font: inherit; font-size: 16px;      /* unter 16px zoomt iOS beim Tippen */
  width: 100%; padding: .48rem .6rem; border-radius: 8px;
  background: var(--hintergrund); color: var(--schrift); border: 1px solid var(--rand);
}
.feld-zeile textarea { resize: vertical; }
.feld-zeile input:focus, .feld-zeile select:focus, .feld-zeile textarea:focus {
  outline: none; border-color: var(--akzent);
}
.feld-zeile input[type="number"], .feld-zeile input.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.feld-einheit { font-size: .8rem; color: var(--schrift-2); white-space: nowrap; }
.feld-hinweis { display: block; font-size: .75rem; color: var(--schrift-2); margin-top: .2rem; }

.haken { display: flex; flex-wrap: wrap; gap: .4rem; }
.haken-eins {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .34rem .65rem; border: 1px solid var(--rand); border-radius: 8px;
  font-size: .85rem; background: var(--hintergrund); line-height: 1.3;
}
.haken-eins input { flex: none; }
.haken-eins:has(input:checked) { border-color: var(--akzent); background: var(--flaeche-2); }
.haken-eins input { accent-color: var(--akzent); }

.dialog-fuss {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 1.1rem; border-top: 1px solid var(--rand); background: var(--flaeche-2);
}

/* ── Schmale Geräte ─────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  #app { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--leiste); z-index: 40;
    transform: translateX(-102%); transition: transform .2s ease;
  }
  #app.schublade-auf #sidebar { transform: none; }
  #app.schublade-auf #schleier {
    display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.45);
  }
  .nur-schmal { display: inline-block; }
  #inhalt { padding: 0 16px 4rem; }
  /* Drei Spalten statt voller Breite - lieber enger und umbrechend als eine
     Kachel pro Bildschirmzeile. */
  .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .karte { padding: .6rem .55rem; border-radius: 10px; overflow-wrap: break-word; }
  .karte.weit { grid-column: span 1; }
  .karte .balken { height: 5px; margin: .35rem 0 .3rem; }

  /* Auch die Einstellungsfelder dreispaltig - nur was breit markiert ist,
     laeuft ueber die ganze Zeile. */
  .e-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .e-feld > label { font-size: .62rem; letter-spacing: .03em; line-height: 1.25; }
  .e-gitter .feld-zeile input, .e-gitter .feld-zeile select { padding: .4rem .45rem; font-size: 15px; }
  .e-block { padding: .8rem .7rem 1rem; }

  /* Die vier Optionen als 2x2-Raster: alle gleichzeitig sichtbar, ohne
     seitliches Scrollen und ohne die halbe Seite zu fuellen. */
  .sz-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .sz-knopf { padding: .5rem .6rem; min-width: 0; }
  .sz-knopf b { font-size: .68rem; }
  .sz-knopf span { font-size: .8rem; overflow-wrap: break-word; }
  .sz-knopf em { font-size: 1rem; }
  .sz-info { font-size: .84rem; margin-top: .55rem; }
  .dialog-felder { grid-template-columns: 1fr; }
  .p-zeile {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name summe" "faellig status";
    row-gap: .3rem;
  }
  .p-name { grid-area: name; } .p-summe { grid-area: summe; }
  .p-faellig { grid-area: faellig; } .p-zeile .pille { grid-area: status; justify-self: end; }
}


/* ── Typografie ─────────────────────────────────────────────────────────── */

.tor-titel, .marke-titel, #seitentitel, .dialog-kopf h2,
.e-block h3, .kat-kopf > span:first-child {
  font-family: var(--font-zier);
  font-weight: 600;
  letter-spacing: .005em;
}
.tor-titel, .marke-titel { font-weight: 400; }
.tor-titel { font-size: clamp(2rem, 7vw, 2.9rem); }
.marke-titel { font-size: 1.28rem; }
#seitentitel { font-size: 1.62rem; }
.dialog-kopf h2 { font-size: 1.35rem; }
.e-block h3, .kat-kopf > span:first-child { font-size: 1.16rem; }

.tor-titel .amp, .marke-titel .amp {
  font-family: var(--font-zier); font-style: italic; font-weight: 400;
}

/* Grosse Zahlen in der Zierschrift - klein bliebe sie zu zart.
   lining-nums ist Pflicht: Cormorant setzt sonst Mediaevalziffern, dann tanzt
   die Grundlinie und die Null sieht aus wie ein kleines o. */
.k-gross, .kachel-zahl {
  font-family: var(--font-zier); font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.k-gross { font-size: 2.15rem; }
.kachel-zahl { font-size: 2.4rem; }

/* Eingaben und Listen bleiben in der Grotesk - dort zaehlt Lesbarkeit */
input, select, textarea, .p-summe, .p-faellig, .l-datum, .chip, .pille { font-family: var(--font); }


/* Schmale Geraete: muss ganz am Ende stehen, sonst ueberschreibt der
   Typografie-Block oben die verkleinerten Groessen wieder. */
@media (max-width: 880px) {
  .k-label  { font-size: .58rem; letter-spacing: .04em; line-height: 1.25; }
  .k-gross  { font-size: 1.15rem; line-height: 1.2; }
  .k-mittel { font-size: .92rem;  line-height: 1.25; }
  .k-fuss   { font-size: .66rem;  line-height: 1.32; }
  .kachel-zahl { font-size: 1.75rem; }
  #seitentitel { font-size: 1.32rem; }
  .kat-kopf > span:first-child { font-size: 1rem; }
}