/* ═══════════════════════════════════════════════════════════════════
   gDesign · Zentrales Stylesheet für alle gTools
   ───────────────────────────────────────────────────────────────────
   Ablage:   /libs/gdesign.css
   Einbindung im Tool (im <head>, NACH dem Font-preload):
       <link rel="stylesheet" href="/libs/gdesign.css">

   Diese Datei ist die EINZIGE Quelle für Farben, Typografie, Layout,
   Komponenten, Mobile- und Druck-Regeln. Änderungen hier gelten sofort
   für alle Tools (siehe libs/.htaccess für die Cache-Steuerung).

   Tool-spezifisches CSS gehört NICHT hierher, sondern in einen kleinen
   <style>-Block im jeweiligen Tool.

   Pflicht (nicht entfernen):
     - Self-hosted @font-face (/fonts/, WOFF2, latin + latin-ext)
     - Metrisch angepasste Fallback-Fonts (CLS-Schutz)
     - Farbschema folgt immer dem System (prefers-color-scheme)
     - @media print
   ═══════════════════════════════════════════════════════════════════ */

/* gFonts: self-hosted fonts (latin + latin-ext) — ersetzt Google Fonts */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/playfair-display-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/playfair-display-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/playfair-display-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/playfair-display-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/playfair-display-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/playfair-display-600-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/playfair-display-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/playfair-display-700-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/ibm-plex-sans-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/ibm-plex-sans-300-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-600-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* /gFonts */


/* ═══════════════════════════════════════════════════════════════════
   gDesign · Metrisch angepasste Fallback-Fonts (CLS-Schutz)
   ───────────────────────────────────────────────────────────────────
   Verhindert Layout-Shift beim Font-Swap (display=swap): Der lokale
   Fallback belegt exakt denselben Platz wie die Web-Schrift, bis diese
   geladen ist. Werte aus echten Font-Metriken (capsize), fontaine-Formel.
   NICHT entfernen — sonst kehrt der CLS beim Schriftwechsel zurück.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Playfair Fallback';src:local('Times New Roman'),local('Times');size-adjust:111.26%;ascent-override:97.25%;descent-override:22.56%;line-gap-override:0%;}
@font-face{font-family:'Plex Sans Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:101.17%;ascent-override:101.32%;descent-override:27.18%;line-gap-override:0%;}


/* ═══════════════════════════════════════════════════════════════════
   gDesign · Farb-Variablen
   ───────────────────────────────────────────────────────────────────
   Immer System-Farbschema (kein Umschalter, kein localStorage):
   Dunkel ist Standard, Hell greift über prefers-color-scheme.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark light;
  --bg:        #0c1410;
  --surface:   #13201a;
  --surface2:  #192b22;
  --border:    #284a36;
  --accent:    #5d9e7a;
  --accent-lt: #89c4a2;
  --accent-dim:rgba(93,158,122,0.13);
  --text:      #ddeee5;
  --text-muted:#6e9480;
  --text-soft: #9fc4b0;   /* Beschreibungstexte (Card) — heller für bessere Lesbarkeit im Dark Mode */
}
@media(prefers-color-scheme:light){
  :root{
    --bg:        #f0f7f3;
    --surface:   #ffffff;
    --surface2:  #e6f2eb;
    --border:    #bdd8c8;
    --accent:    #2e7a50;
    --accent-lt: #1e5c3a;
    --accent-dim:rgba(46,122,80,0.10);
    --text:      #0f1f16;
    --text-muted:#3f6b50;
    --text-soft: #3f6b50;   /* im Hellmodus unverändert = --text-muted */
  }
}

*{box-sizing:border-box;margin:0;padding:0;}

/* ═══════════════════════════════════════════════════════════════════
   Body + Hintergrund-Gitter
   ═══════════════════════════════════════════════════════════════════ */
body{
  background:var(--bg);color:var(--text);
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-weight:300;
  min-height:100vh;padding:12px 20px 12px;
  transition:background .25s,color .25s;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(93,158,122,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(93,158,122,0.04) 1px,transparent 1px);
  background-size:40px 40px;
}

.container{max-width:760px;margin:0 auto;position:relative;z-index:1;}

/* ═══════════════════════════════════════════════════════════════════
   gAuth-Anmeldeleiste (falls /libs/gauth.js eingebunden ist)
   ───────────────────────────────────────────────────────────────────
   top:12px bringt die Leiste auf dieselbe Oberkante wie der Titelblock.
   gauth.js hängt sein eigenes CSS erst zur Laufzeit an <head> an —
   "html #gauth-bar" erhöht die Spezifität, um das zu überschreiben.
   Der Block greift nur, wenn #gauth-bar existiert — in Tools ohne
   Anmeldung kann er entfallen, ohne dass es schadet.
   ═══════════════════════════════════════════════════════════════════ */
html #gauth-bar{top:12px;}

/* ═══════════════════════════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════════════════════════ */
header{text-align:center;margin-bottom:8px;}
h1{
  font-family:'Playfair Display','Playfair Fallback',serif;
  font-size:clamp(26px,5vw,44px);font-weight:600;line-height:1.15;
  color:var(--text);margin-bottom:8px;
}
h1 .accent{color:var(--text);}
.header-meta{
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
}
.subtitle{
  margin:0;font-size:12px;color:var(--text-muted);
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;
}
.gtools-badge{
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:10px;
  color:var(--text-muted);text-decoration:none;
  padding:3px 10px;border:1px solid var(--border);
  transition:color .2s,border-color .2s;
}
.gtools-badge:hover{color:var(--accent);border-color:var(--accent);}

/* ═══════════════════════════════════════════════════════════════════
   Section-Label (Kategorie-Überschrift)
   ═══════════════════════════════════════════════════════════════════ */
.section-label{
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:10px;
  letter-spacing:3px;text-transform:uppercase;color:var(--text-muted);
  margin:18px 0 8px;padding:11px 18px;
  border:1px solid var(--border);border-left:3px solid var(--accent);
  background:var(--surface);
  display:flex;align-items:center;gap:10px;
  width:100%;box-sizing:border-box;
}
.section-label .sl-num{font-size:9px;letter-spacing:2px;color:var(--text-muted);margin-right:4px;}
.section-label .sl-title{
  flex:1;font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;
  font-size:14px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
   Card (einzelnes Item)
   ═══════════════════════════════════════════════════════════════════ */
.card{
  background:var(--surface);border:1px solid var(--border);
  padding:20px 24px;margin-bottom:8px;
  position:relative;transition:background .25s,border-color .25s;
}
.card::before{
  content:'';position:absolute;top:0;left:0;
  width:3px;height:100%;background:var(--accent);
}
.card-cat{
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:9px;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:5px;
}
.card-name{
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:1.1rem;font-weight:600;
  color:var(--text);margin-bottom:8px;
}
.card-text{
  font-size:12px;color:var(--text-soft);line-height:1.7;
}

/* ═══════════════════════════════════════════════════════════════════
   Tags / Chips
   ═══════════════════════════════════════════════════════════════════ */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.tag{
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:9px;
  letter-spacing:1px;text-transform:uppercase;
  padding:3px 7px;border:1px solid var(--border);color:var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   Form-Elemente (Labels, Inputs, Selects, Checkbox)
   ═══════════════════════════════════════════════════════════════════ */
.field{margin-bottom:12px;}
.field-row{display:flex;gap:10px;flex-wrap:wrap;}
.field-row > .field{flex:1;min-width:140px;margin-bottom:0;}

label{
  display:block;font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}

input[type="text"],input[type="number"],input[type="date"],
input[type="email"],input[type="tel"],input[type="url"],
input[type="password"],input[type="search"],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);
  color:var(--text);font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;
  font-size:12px;padding:10px 14px;outline:none;letter-spacing:0.5px;
  transition:border-color .2s,background .25s;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:0.6;}

/* Native Controls (Datumsfeld etc.) folgen automatisch dem System —
   geregelt über color-scheme:dark light in :root, keine Extra-Regeln nötig. */

select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236e9480' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:30px;cursor:pointer;
}

/* Checkbox */
.check-row{display:flex;align-items:center;gap:10px;padding:6px 0;}
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;background:var(--bg);
  border:1px solid var(--border);cursor:pointer;
  position:relative;flex-shrink:0;
  transition:border-color .2s,background .2s;
}
input[type="checkbox"]:checked{
  background:var(--accent-dim);border-color:var(--accent);
}
input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:4px;top:0;
  width:5px;height:10px;border:solid var(--accent);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check-row label{margin-bottom:0;cursor:pointer;}

/* ═══════════════════════════════════════════════════════════════════
   Buttons (filter-btn Stil)
   ═══════════════════════════════════════════════════════════════════ */
.btn{
  background:transparent;border:1px solid var(--border);
  color:var(--text-muted);font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 16px;cursor:pointer;transition:all .2s;
  display:inline-flex;align-items:center;gap:7px;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{border-color:var(--accent);color:var(--accent);}
.btn.active{
  background:#2e7a50;border-color:#2e7a50;color:#fff;
  font-weight:600;box-shadow:0 2px 10px var(--accent-dim);
}
.btn.primary{
  background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
}
.btn.primary:hover{background:var(--accent);color:var(--bg);}
.btn:disabled{opacity:0.4;cursor:not-allowed;}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}

/* ═══════════════════════════════════════════════════════════════════
   Reset-Knopf (rechtsbündig, direkt nach Header)
   ═══════════════════════════════════════════════════════════════════ */
.reset-row{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px;}
.reset-btn{
  background:none;border:none;font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;
  font-size:10px;color:var(--text-muted);cursor:pointer;
  padding:4px 10px;transition:color .2s;
}
.reset-btn:hover{color:var(--accent);}

/* ═══════════════════════════════════════════════════════════════════
   Modal (Reset-Bestätigung — kein window.confirm, iOS-Safari-sicher)
   ═══════════════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  display:none;align-items:center;justify-content:center;z-index:2000;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--surface);border:1px solid var(--border);
  padding:24px;max-width:320px;width:calc(100% - 40px);
  text-align:center;
}
.modal-text{
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:12px;
  color:var(--text);line-height:1.6;margin-bottom:18px;
}
.btn-sec,.btn-pri{
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 16px;cursor:pointer;transition:all .2s;margin:0 4px;
}
.btn-sec{background:transparent;border:1px solid var(--border);color:var(--text-muted);}
.btn-sec:hover{border-color:var(--accent);color:var(--accent);}
.btn-pri{
  background:#2e7a50;border:1px solid #2e7a50;color:#fff;
  font-weight:600;box-shadow:0 2px 10px var(--accent-dim);
}
.btn-pri:hover{opacity:0.9;}

/* ═══════════════════════════════════════════════════════════════════
   Tabelle (für Ergebnisse, Auflistungen)
   ═══════════════════════════════════════════════════════════════════ */
.tbl{
  width:100%;border-collapse:collapse;
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:11px;
}
.tbl th,.tbl td{
  text-align:right;padding:8px 10px;
  border-bottom:1px solid var(--border);
}
.tbl th{
  color:var(--text-muted);font-weight:400;
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
}
.tbl th:first-child,.tbl td:first-child{text-align:left;}
.tbl td{color:var(--text);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tfoot td{
  border-top:1px solid var(--accent);border-bottom:none;
  color:var(--accent);padding-top:10px;
}

/* ═══════════════════════════════════════════════════════════════════
   Hint (kleiner Hinweistext)
   ═══════════════════════════════════════════════════════════════════ */
.hint{
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:10px;
  color:var(--text-muted);line-height:1.6;letter-spacing:0.3px;
  margin-top:10px;
}

/* ═══════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════ */
footer{
  text-align:center;padding:24px 0 8px;
  font-family:'IBM Plex Sans','Plex Sans Fallback',sans-serif;font-size:10px;
  letter-spacing:1px;color:var(--text-muted);
}
footer a{color:var(--text-muted);text-decoration:none;}

/* ═══════════════════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* Oben bündig: Titelblock (und ggf. gauth-Leiste) auf 12px. */
  body{padding:12px 14px;}
  h1{font-size:clamp(22px,5vw,32px);}
  .card{padding:16px 18px;}
  .section-label{padding:10px 14px;}
  .field-row > .field{min-width:100%;}
}

@media print{
  :root{
    --bg:        #f0f7f3;
    --surface:   #ffffff;
    --surface2:  #e6f2eb;
    --border:    #bdd8c8;
    --accent:    #2e7a50;
    --accent-lt: #1e5c3a;
    --accent-dim:rgba(46,122,80,0.10);
    --text:      #0f1f16;
    --text-muted:#3f6b50;
    --text-soft: #3f6b50;
  }
  body{padding:12px 0;}
  body::before{display:none;}
  .reset-row,.no-print{display:none!important;}
  .card{page-break-inside:avoid;}
  a{color:var(--text);text-decoration:none;}
}
