:root { --blau:#32ADE6; --grund:#fff; --flaeche:#f2f3f5; --schrift:#11181c;
          --gedaempft:#5f6b73; --rand:#e3e5e8; }
  @media (prefers-color-scheme: dark) {
    :root { --grund:#0f1416; --flaeche:#1b2327; --schrift:#e9edef;
            --gedaempft:#9aa4ab; --rand:#2b3438; }
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--grund); color:var(--schrift);
    font:16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust:100%; }
  header { background:var(--blau); padding:12px 18px; display:flex;
    align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  header a { color:#fff; text-decoration:none; }
  .marke-wort { font-weight:700; font-size:19px; }
  header nav { display:flex; gap:8px; }
  header nav a { font-size:14px; font-weight:600; padding:6px 12px;
    border-radius:20px; background:rgba(255,255,255,.18); white-space:nowrap; }
  header nav a:hover { background:rgba(255,255,255,.3); }
  main { max-width:760px; margin:0 auto; padding:20px 16px 60px; }
  form { display:flex; gap:8px; margin:0 0 14px; }
  input[type=search] { flex:1; min-width:0; padding:12px 15px; font:inherit;
    border:1px solid var(--rand); border-radius:10px;
    background:var(--flaeche); color:var(--schrift); }
  button { padding:12px 20px; font:inherit; font-weight:600; border:0;
    border-radius:10px; background:var(--blau); color:#fff; cursor:pointer; }
  .treffer { display:block; padding:14px 0; border-bottom:1px solid var(--rand);
    text-decoration:none; color:inherit; }
  .treffer:hover { background:var(--flaeche); }
  .nr { color:var(--blau); font-weight:700; font-variant-numeric:tabular-nums; }
  .text { margin:3px 0 7px; }
  .marken { display:flex; flex-wrap:wrap; gap:6px; }
  .marke { font-size:13px; padding:3px 9px; border-radius:20px;
    background:var(--flaeche); color:var(--gedaempft); white-space:nowrap;
    text-decoration:none; }
  .marke.stark { background:var(--blau); color:#fff; }
  .marke.a { background:#d93025; color:#fff; }
  .marke.b { background:#b26a00; color:#fff; }
  h1 { font-size:26px; line-height:1.25; margin:0 0 6px; }
  h2 { font-size:17px; margin:28px 0 10px; }
  .zahlen { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
  .zahl { flex:1 1 110px; background:var(--flaeche); border-radius:12px; padding:12px 14px; }
  .zahl b { display:block; font-size:22px; }
  .zahl span { font-size:13px; color:var(--gedaempft); }
  .feld { background:var(--flaeche); border-radius:12px; padding:12px 14px; margin:10px 0; }
  .feld span { font-size:13px; color:var(--gedaempft); display:block; margin-bottom:2px; }
  .hinweis { color:var(--gedaempft); font-size:14px; }
  .aktuell { background:var(--flaeche); border-left:3px solid var(--blau); padding-left:11px; }
  /* Die Tatbestandsnummer ist das, wonach gesucht und was abgeschrieben
     wird — sie steht deshalb groesser als der Sachverhalt darunter. */
  .grossenummer { color:var(--blau); font-weight:800; font-size:34px;
    font-variant-numeric:tabular-nums; letter-spacing:-.5px; margin:0 0 2px; }
  .zeichenbild { max-width:240px; width:100%; height:auto; }
  .zeichengitter { display:grid; gap:10px;
    grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); }
  .zeichenkachel { display:flex; flex-direction:column; align-items:center;
    gap:6px; padding:14px 10px; border-radius:14px; background:var(--flaeche);
    text-decoration:none; color:inherit; text-align:center; }
  .zeichenkachel:hover { outline:2px solid var(--blau); }
  .zeichenkachel img { width:62px; height:62px; object-fit:contain; }
  /* Zwei Zeilen, danach drei Puenktchen. Entscheidend ist max-width und
     overflow-wrap: Ein Wort wie "Parkraumbewirtschaftungszone" sprengt den
     Kasten sonst ueber die Kachel hinaus — dann greift auch die
     Zeilenbegrenzung nicht mehr und der Text laeuft in die Nachbarkachel. */
  .zeichenkachel .bez { font-size:12px; color:var(--gedaempft); line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; max-width:100%; overflow-wrap:anywhere; hyphens:auto; }
  /* min-width:0 erlaubt dem Rasterfeld ueberhaupt erst zu schrumpfen. */
  .zeichenkachel { justify-content:flex-start; min-width:0; }
  .einstiege { display:grid; gap:12px; margin:26px auto 0; max-width:620px;
    grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }
  .einstiege a { display:flex; align-items:center; gap:13px; text-align:left;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
    color:#fff; text-decoration:none; padding:14px 16px; border-radius:16px;
    transition:transform .12s, background .12s; }
  .einstiege a:hover { background:rgba(255,255,255,.26); transform:translateY(-2px); }
  /* Kein Hintergrund und keine Rundung: Die Verkehrszeichen sind freigestellt,
     ein weisses Kaestchen dahinter saehe nach Fehler aus. Das App-Symbol
     bringt seine runden Ecken selbst mit. */
  .einstiege img { width:46px; height:46px; flex:0 0 auto; object-fit:contain; }
  .einstiege span { display:flex; flex-direction:column; font-size:13px;
    line-height:1.35; opacity:.9; }
  .einstiege b { font-size:17px; opacity:1; margin-bottom:1px; }
  .zweispalten { display:grid; gap:30px; align-items:start;
    grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }
  .zweispalten h2 { margin-top:0; }
  .zweispalten .karten { grid-template-columns:1fr; }
  .zweispalten .zeichengitter { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
  /* Startseite */
  .buehne { background:linear-gradient(160deg,#32ADE6,#2563eb); color:#fff;
    padding:52px 20px 44px; text-align:center; }
  /* Mitwachsend, damit der lange Name auch auf schmalen Geraeten passt. */
  .buehne h1 { font-size:clamp(27px,8vw,42px); margin:0 0 10px; letter-spacing:-.5px;
    overflow-wrap:anywhere; }
  .buehne p { margin:0 auto; max-width:460px; opacity:.92; font-size:17px; }
  .buehne form { max-width:460px; margin:26px auto 0; }
  .buehne input { background:#fff; color:#11181c; border:0; }
  .buehne button { background:#11181c; }
  .karten { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
  .karte { display:block; background:var(--flaeche); border-radius:14px;
    padding:14px 16px; text-decoration:none; color:inherit; }
  .karte:hover { outline:2px solid var(--blau); }
  .apps { display:flex; gap:18px; align-items:center; flex-wrap:wrap;
    background:var(--flaeche); border-radius:16px; padding:20px; margin-top:14px; }
  .apps img { width:76px; height:76px; border-radius:17px; }
  .appknopf { display:inline-block; padding:11px 18px; border-radius:10px;
    background:var(--blau); color:#fff; text-decoration:none; font-weight:600; }
  footer { max-width:760px; margin:0 auto; padding:0 16px 40px;
    color:var(--gedaempft); font-size:13px; }
  footer a { color:var(--blau); }