/* ===== MAUTRECHNER EUROPA - eigenstaendige Seite unter /toll =====
   Bewusst nicht an styles.css der App gekoppelt: die Seite ist oeffentlich und soll
   sich unabhaengig aendern lassen, ohne die angemeldete Anwendung zu beruehren. */

:root{
  --bg:#eef1f5; --bg2:#ffffff; --bg3:#f4f6f9; --bg4:#e9edf3;
  --border:#e3e7ee; --text:#0f1729; --t2:#6b7488; --t3:#8d95a8;
  --acc:#2f6bff; --acc2:#4f9cf0; --acc-weich:#eaf0ff;
  --gruen:#16a34a; --rot:#ef4444; --gelb:#f59e0b;
  --radius:14px; --schatten:0 1px 2px rgba(15,23,41,.05), 0 8px 24px rgba(15,23,41,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1117; --bg2:#161b22; --bg3:#1c2128; --bg4:#21262d;
    --border:#2d333b; --text:#e6edf3; --t2:#9aa4b2; --t3:#7d8694;
    --acc:#539bf5; --acc2:#6cb6ff; --acc-weich:#16233a;
    --gruen:#3fb950; --rot:#f85149; --gelb:#d29922;
    --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1117; --bg2:#161b22; --bg3:#1c2128; --bg4:#21262d;
  --border:#2d333b; --text:#e6edf3; --t2:#9aa4b2; --t3:#7d8694;
  --acc:#539bf5; --acc2:#6cb6ff; --acc-weich:#16233a;
  --gruen:#3fb950; --rot:#f85149; --gelb:#d29922;
  --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  line-height:1.55; font-size:15px;
}
.huelle{max-width:1060px; margin:0 auto; padding:0 16px}

/* ---- Kopf ---- */
.kopf{border-bottom:1px solid var(--border); background:var(--bg2); position:sticky; top:0; z-index:50}
.kopf-inner{display:flex; align-items:center; gap:14px; height:62px}
.marke{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.marke .zeichen{
  width:36px; height:36px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px;
}
.marke b{font-size:16px; font-weight:700; display:block; line-height:1.2}
.marke small{color:var(--t2); font-size:11px; display:block}
.kopf-rechts{margin-left:auto; display:flex; align-items:center; gap:12px}
.stand{font-size:11px; color:var(--t2); white-space:nowrap}
.knopf-thema{
  background:var(--bg3); border:1px solid var(--border); color:var(--t2);
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px; line-height:1;
}
.knopf-thema:hover{color:var(--text); border-color:var(--acc)}

/* ---- Einleitung ---- */
.hero{padding:34px 0 8px}
.hero h1{font-size:30px; line-height:1.2; font-weight:700; letter-spacing:-.02em}
.hero p{color:var(--t2); margin-top:9px; max-width:66ch; font-size:16px}
@media(max-width:600px){ .hero{padding:24px 0 4px} .hero h1{font-size:24px} .hero p{font-size:15px} }

/* ---- Karten ---- */
.karte{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; margin:18px 0; box-shadow:var(--schatten);
}
.karte > h2{font-size:17px; font-weight:700; margin-bottom:3px}
.karte > .unter{font-size:13px; color:var(--t2); margin-bottom:16px}

/* ---- Formular ---- */
.reiter{display:flex; gap:6px; margin-bottom:18px; background:var(--bg3); padding:4px; border-radius:10px}
.reiter button{
  flex:1; background:none; border:none; padding:9px 10px; border-radius:7px;
  font:inherit; font-size:13px; font-weight:600; color:var(--t2); cursor:pointer;
}
.reiter button[aria-selected="true"]{background:var(--bg2); color:var(--text); box-shadow:var(--schatten)}

.feld{margin-bottom:13px}
.feld label{display:block; font-size:11px; font-weight:600; color:var(--t2);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px}
.feld input, .feld select{
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:9px;
  padding:10px 12px; color:var(--text); font:inherit; font-size:15px; outline:none;
}
.feld input:focus, .feld select:focus{border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-weich)}
.feld .hinweis{font-size:12px; color:var(--t3); margin-top:4px}
.gitter{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.gitter-3{display:grid; grid-template-columns:repeat(3,1fr); gap:13px}
@media(max-width:620px){ .gitter, .gitter-3{grid-template-columns:1fr} }

.wegpunkt{display:flex; gap:8px; align-items:flex-end; margin-bottom:9px}
.wegpunkt .feld{flex:1; margin-bottom:0}
.knopf-weg{
  background:var(--bg3); border:1px solid var(--border); color:var(--t2);
  width:42px; height:42px; border-radius:9px; cursor:pointer; font-size:17px; flex-shrink:0;
}
.knopf-weg:hover{color:var(--rot); border-color:var(--rot)}

.knopf{
  background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; border:none;
  padding:12px 22px; border-radius:10px; font:inherit; font-size:15px; font-weight:600;
  cursor:pointer; box-shadow:0 4px 14px color-mix(in srgb,var(--acc) 30%,transparent);
}
.knopf:hover{filter:brightness(1.06)}
.knopf:disabled{opacity:.55; cursor:default; box-shadow:none}
.knopf-flach{
  background:var(--bg3); border:1px solid var(--border); color:var(--text);
  padding:9px 15px; border-radius:9px; font:inherit; font-size:14px; cursor:pointer;
}
.knopf-flach:hover{border-color:var(--acc)}
.knopf-zeile{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px}

/* ---- Hand-Eingabe ---- */
.hand-zeile{display:flex; gap:9px; align-items:flex-end; margin-bottom:9px}
.hand-zeile .feld{margin-bottom:0}
.hand-zeile .feld:first-child{flex:2}
.hand-zeile .feld:nth-child(2){flex:1}

/* ---- Ergebnis ---- */
.summe-band{
  display:flex; flex-wrap:wrap; gap:8px 32px; align-items:baseline;
  padding:18px 20px; border-radius:12px; margin-bottom:4px;
  background:linear-gradient(120deg,var(--acc-weich),transparent);
  border:1px solid var(--border);
}
.summe-haupt .zahl{font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.summe-haupt .was{font-size:12px; color:var(--t2); text-transform:uppercase; letter-spacing:.5px}
.summe-neben{display:flex; gap:28px; flex-wrap:wrap; margin-left:auto}
.summe-neben div .zahl{font-size:19px; font-weight:700}
.summe-neben div .was{font-size:11px; color:var(--t2)}

.tab-huelle{overflow-x:auto; margin:16px -4px 0; padding:0 4px}
table.maut{width:100%; border-collapse:collapse; font-size:14px; min-width:600px}
table.maut th{
  text-align:left; font-size:10px; font-weight:700; color:var(--t2);
  text-transform:uppercase; letter-spacing:.5px; padding:0 10px 8px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.maut th.r, table.maut td.r{text-align:right}
table.maut td{padding:11px 10px; border-bottom:1px solid var(--border); vertical-align:top}
table.maut tbody tr:hover{background:var(--bg3)}
table.maut .land{font-weight:600; white-space:nowrap}
table.maut .land .fl{margin-right:7px; font-size:16px}
table.maut .sys{font-size:12px; color:var(--t2); margin-top:2px}
table.maut .zahl{font-variant-numeric:tabular-nums; white-space:nowrap}
table.maut .gross{font-weight:700}
table.maut tr.frei td{color:var(--t2)}
table.maut tfoot td{padding:13px 10px; font-weight:700; border-top:2px solid var(--border); border-bottom:none}

/* Guete-Kennzeichen: ohne das koennte man Schaetzung und Primaerquelle nicht unterscheiden */
.guete{
  display:inline-block; font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px;
  text-transform:uppercase; letter-spacing:.4px; vertical-align:middle; white-space:nowrap;
}
.guete.primaer{background:color-mix(in srgb,var(--gruen) 15%,transparent); color:var(--gruen); border:1px solid color-mix(in srgb,var(--gruen) 35%,transparent)}
.guete.sekundaer{background:color-mix(in srgb,var(--acc) 13%,transparent); color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 32%,transparent)}
.guete.schaetzung{background:color-mix(in srgb,var(--gelb) 15%,transparent); color:var(--gelb); border:1px solid color-mix(in srgb,var(--gelb) 38%,transparent)}

.warnung, .info{
  display:flex; gap:11px; padding:13px 15px; border-radius:10px; font-size:13.5px; margin:16px 0;
  line-height:1.5;
}
.warnung{background:color-mix(in srgb,var(--gelb) 11%,transparent); border:1px solid color-mix(in srgb,var(--gelb) 32%,transparent)}
.info{background:var(--bg3); border:1px solid var(--border); color:var(--t2)}
.warnung .zeichen, .info .zeichen{flex-shrink:0; font-size:16px; line-height:1.3}
.fehler{background:color-mix(in srgb,var(--rot) 11%,transparent); border:1px solid color-mix(in srgb,var(--rot) 32%,transparent); color:var(--text)}

.vig-wahl{margin-top:7px}
.vig-wahl select{
  background:var(--bg2); border:1px solid var(--border); border-radius:7px;
  padding:5px 8px; color:var(--text); font:inherit; font-size:13px; max-width:100%;
}

/* ---- Laenderverzeichnis ---- */
.suche{position:relative; margin-bottom:16px}
.suche input{
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:10px;
  padding:11px 13px 11px 38px; color:var(--text); font:inherit; font-size:15px; outline:none;
}
.suche input:focus{border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-weich)}
.suche .lupe{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--t3); font-size:14px}

.land-liste{display:grid; gap:11px}
.land-karte{border:1px solid var(--border); border-radius:12px; background:var(--bg2); overflow:hidden}
.land-kopf{
  display:flex; align-items:center; gap:11px; padding:13px 15px; cursor:pointer;
  background:none; border:none; width:100%; text-align:left; font:inherit; color:var(--text);
}
.land-kopf:hover{background:var(--bg3)}
.land-kopf .fl{font-size:22px; flex-shrink:0}
.land-kopf > span:not(.fl):not(.pfeil){min-width:0}
.land-kopf .nm{display:block; font-weight:700; font-size:15px}
.land-kopf .sy{display:block; font-size:12.5px; color:var(--t2); margin-top:1px}
.land-kopf .pfeil{margin-left:auto; color:var(--t3); transition:transform .18s; flex-shrink:0}
.land-karte[open] .land-kopf .pfeil{transform:rotate(90deg)}
.land-koerper{padding:2px 15px 16px; border-top:1px solid var(--border)}
.land-koerper dl{display:grid; grid-template-columns:150px 1fr; gap:7px 14px; margin:14px 0; font-size:13.5px}
.land-koerper dt{color:var(--t2); font-weight:600}
.land-koerper dd{color:var(--text)}
@media(max-width:600px){ .land-koerper dl{grid-template-columns:1fr; gap:2px 0}
  .land-koerper dt{margin-top:9px} }
.land-koerper h4{font-size:12px; font-weight:700; color:var(--t2); text-transform:uppercase;
  letter-spacing:.5px; margin:16px 0 7px}
.land-koerper ol, .land-koerper ul{margin:0 0 0 20px; font-size:13.5px}
.land-koerper li{margin-bottom:6px}
.land-koerper a{color:var(--acc); text-decoration:none}
.land-koerper a:hover{text-decoration:underline}
.quell-zeile{font-size:12px; color:var(--t3); margin-top:14px; padding-top:11px; border-top:1px solid var(--border)}

/* ---- Fuss ---- */
.fuss{border-top:1px solid var(--border); margin-top:34px; padding:26px 0 40px;
  font-size:13px; color:var(--t2); background:var(--bg2)}
.fuss a{color:var(--acc); text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss p{margin-bottom:9px; max-width:80ch}

.lade{display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:dreh .7s linear infinite; vertical-align:-3px; margin-right:7px}
@keyframes dreh{to{transform:rotate(360deg)}}

.versteckt{display:none !important}

@media print{
  .kopf, .reiter, .knopf, .knopf-flach, .suche, .knopf-thema, .fuss .druck-weg{display:none !important}
  body{background:#fff; font-size:12px}
  .karte{box-shadow:none; border-color:#ccc; break-inside:avoid}
  .land-karte:not([open]) .land-koerper{display:none}
}

/* Offizieller Rechner des Betreibers – bei Richtwert-Ländern hervorgehoben,
   weil dort unsere Zahl die schwächste ist und seine die belastbare. */
.rechner-zeile{font-size:12.5px;color:var(--t2);margin-top:12px;padding:9px 11px;
  background:var(--bg3);border:1px solid var(--border);border-radius:8px}
.rechner-zeile.betont{background:color-mix(in srgb,var(--gelb) 10%,transparent);
  border-color:color-mix(in srgb,var(--gelb) 32%,transparent);color:var(--text)}
.rechner-zeile a{color:var(--acc);text-decoration:none;font-weight:600}
.rechner-zeile a:hover{text-decoration:underline}