/* ============================================================
   heyfreiheit — Abgaben. Tokens aus dem Designsystem, dazu die
   Bausteine, die diese Anwendung braucht.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* — Basis — */
  --hf-cream:      #FAF6F3;
  --hf-white:      #FFFFFF;
  --hf-ink:        #242121;
  --hf-sand:       #DBD2C8;
  --hf-sand-soft:  #EFE9E2;
  --hf-line:       #E7E0D8;
  --hf-muted:      #8A827B;

  /* — Marken-Teal — */
  --hf-teal-deep:  #1E5C70;
  --hf-teal:       #1C839B;
  --hf-aqua:       #8FD8DF;
  --hf-lime:       #DCFF92;
  --hf-lime-deep:  #CDF56E;

  --hf-gradient: radial-gradient(150% 150% at -5% -10%, #E4DCCB 0%, rgba(224,217,202,.88) 14%, rgba(199,201,190,.5) 30%, rgba(150,178,184,.2) 46%, rgba(120,170,182,0) 64%), linear-gradient(135deg, #5197A8 0%, #1E7D95 58%, #1A647C 100%);
  --hf-dunkel: radial-gradient(78% 96% at 15% 82%, #1f5c6d 0%, rgba(31,92,109,.30) 45%, rgba(11,35,43,0) 74%), linear-gradient(158deg, #0a2027 0%, #0d2b34 55%, #0b242c 100%);

  /* — Ampel. Gedeckt gehalten, damit sie neben Cream und Teal nicht schreit. — */
  --hf-gruen:      #2F7D5E;  --hf-gruen-bg:  #E7F0EB;  --hf-gruen-line: #C6DDD1;
  --hf-gelb:       #9C6B0B;  --hf-gelb-bg:   #F7EFDD;  --hf-gelb-line:  #E6D6B4;
  --hf-rot:        #A63D2F;  --hf-rot-bg:    #F6E6E2;  --hf-rot-line:   #E7C9C1;

  /* — Typo — */
  --hf-font-sans:  'Poppins', system-ui, -apple-system, sans-serif;
  --hf-font-serif: 'Instrument Serif', Georgia, serif;
  --hf-track-head: -0.03em;
  --hf-track-label: 0.2em;

  /* — Raum — */
  --hf-space-2: 8px;  --hf-space-3: 12px; --hf-space-4: 16px; --hf-space-5: 22px;
  --hf-space-6: 30px; --hf-space-7: 40px; --hf-space-8: 52px; --hf-space-9: 62px;
  --hf-container: 1180px;
  --hf-gutter: 30px;

  --hf-radius-sm: 12px; --hf-radius-md: 18px; --hf-radius-lg: 20px;
  --hf-radius-xl: 26px; --hf-radius-pill: 100px;
  --hf-shadow-sm: 0 1px 2px rgba(36,33,33,.04);
  --hf-shadow-md: 0 8px 30px rgba(36,33,33,.06);
  --hf-shadow-lg: 0 18px 50px rgba(36,33,33,.10);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--hf-cream);
  color: var(--hf-ink);
  font-family: var(--hf-font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--hf-teal); text-decoration: none; }
a:hover { color: var(--hf-teal-deep); }

h1, h2, h3 { font-weight: 600; letter-spacing: var(--hf-track-head); line-height: 1.1; }
h1 { font-size: 40px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; letter-spacing: -0.02em; }

.serif { font-family: var(--hf-font-serif); font-style: italic; font-weight: 400; font-size: 1.1em; }

/* ————————————————————————————————— Kopf */
.kopf {
  background: var(--hf-dunkel);
  color: #fff;
  padding: 20px var(--hf-gutter);
}
.kopf-innen {
  max-width: var(--hf-container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--hf-space-5);
}
.kopf img { height: 24px; display: block; }
.kopf nav { display: flex; align-items: center; gap: var(--hf-space-5); flex-wrap: wrap; }
.kopf nav a { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; }
.kopf nav a:hover, .kopf nav a.an { color: #fff; }
.kopf nav a.an { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--hf-aqua); }

/* ————————————————————————————————— Layout */
.huelle { max-width: var(--hf-container); margin: 0 auto; padding: var(--hf-space-8) var(--hf-gutter) var(--hf-space-9); }
.huelle.schmal { max-width: 780px; }
.huelle.sehr-schmal { max-width: 460px; }

.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: var(--hf-track-label);
  text-transform: uppercase; color: var(--hf-muted);
}
.label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hf-teal); }

.hinweis { color: var(--hf-muted); font-size: 15px; }
.mini { font-size: 13px; color: var(--hf-muted); }

.kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hf-space-5); flex-wrap: wrap; margin-bottom: var(--hf-space-6); }

/* ————————————————————————————————— Karten */
.karte {
  background: var(--hf-white);
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-radius-lg);
  padding: var(--hf-space-6);
  box-shadow: var(--hf-shadow-sm);
}
.karte + .karte { margin-top: var(--hf-space-5); }
.karte-sand { background: var(--hf-sand-soft); border-color: var(--hf-sand); }
.karte-dunkel { background: var(--hf-dunkel); color: #fff; border: 0; }
.karte-dunkel .hinweis, .karte-dunkel .mini { color: rgba(255,255,255,.75); }
.karte-dunkel .label { color: rgba(255,255,255,.82); }
.karte-dunkel .label::before { background: var(--hf-aqua); }

.raster { display: grid; gap: var(--hf-space-5); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ————————————————————————————————— Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--hf-radius-pill);
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1;
  background: var(--hf-ink); color: #fff; border: 1px solid var(--hf-ink);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.knopf:hover { background: #000; color: #fff; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf-zweit { background: transparent; color: var(--hf-ink); border-color: var(--hf-sand); }
.knopf-zweit:hover { background: var(--hf-sand-soft); color: var(--hf-ink); }
.knopf-teal { background: var(--hf-teal); border-color: var(--hf-teal); }
.knopf-teal:hover { background: var(--hf-teal-deep); border-color: var(--hf-teal-deep); }
.knopf-warn { background: transparent; color: var(--hf-rot); border-color: var(--hf-rot-line); }
.knopf-warn:hover { background: var(--hf-rot-bg); color: var(--hf-rot); }
.knopf-klein { padding: 8px 16px; font-size: 13.5px; }
.knopf-reihe { display: flex; gap: var(--hf-space-3); flex-wrap: wrap; align-items: center; }

/* ————————————————————————————————— Formular */
.feld { margin-bottom: var(--hf-space-5); }
.feld > label, .feld-titel {
  display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px;
}
.feld .erklaerung { font-size: 13.5px; color: var(--hf-muted); margin-bottom: 10px; line-height: 1.5; }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
select, textarea {
  width: 100%; padding: 12px 15px;
  font-family: inherit; font-size: 15px; color: var(--hf-ink);
  background: var(--hf-white); border: 1px solid var(--hf-line);
  border-radius: var(--hf-radius-sm); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--hf-teal);
  box-shadow: 0 0 0 3px rgba(28,131,155,.13);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
textarea.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.65; min-height: 380px;
}
input[type=file] {
  width: 100%; padding: 20px; font-family: inherit; font-size: 14px;
  background: var(--hf-sand-soft); border: 1px dashed var(--hf-sand);
  border-radius: var(--hf-radius-sm); cursor: pointer;
}
.zaehler { font-size: 12.5px; color: var(--hf-muted); text-align: right; margin-top: 5px; }
.zaehler.zuviel { color: var(--hf-rot); }

.ankreuz { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.5; }
.ankreuz input { margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--hf-teal); }

/* ————————————————————————————————— Ampel */
.ampel {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 11px; border-radius: var(--hf-radius-pill);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.ampel::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ampel-gruen { color: var(--hf-gruen); background: var(--hf-gruen-bg); border-color: var(--hf-gruen-line); }
.ampel-gelb  { color: var(--hf-gelb);  background: var(--hf-gelb-bg);  border-color: var(--hf-gelb-line); }
.ampel-rot   { color: var(--hf-rot);   background: var(--hf-rot-bg);   border-color: var(--hf-rot-line); }
.ampel-grau  { color: var(--hf-muted); background: var(--hf-sand-soft); border-color: var(--hf-line); }

/* ————————————————————————————————— Tabelle */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th {
  text-align: left; padding: 11px 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--hf-muted);
  border-bottom: 1px solid var(--hf-line); white-space: nowrap;
}
.tabelle td { padding: 14px; border-bottom: 1px solid var(--hf-line); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--hf-cream); }
.tabelle .rechts { text-align: right; }
.rollt { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ————————————————————————————————— Meldungen */
.meldung {
  padding: 14px 18px; border-radius: var(--hf-radius-sm); font-size: 14.5px;
  border: 1px solid; margin-bottom: var(--hf-space-5); line-height: 1.55;
}
.meldung-ok   { background: var(--hf-gruen-bg); border-color: var(--hf-gruen-line); color: #1F5A43; }
.meldung-warn { background: var(--hf-gelb-bg);  border-color: var(--hf-gelb-line);  color: #7A5309; }
.meldung-fehler { background: var(--hf-rot-bg); border-color: var(--hf-rot-line);   color: #83301F; }
.meldung-info { background: var(--hf-sand-soft); border-color: var(--hf-sand); color: var(--hf-ink); }

/* ————————————————————————————————— Kriterien-Balken */
.kriterium { padding: var(--hf-space-4) 0; border-bottom: 1px solid var(--hf-line); }
.kriterium:last-child { border-bottom: 0; }
.kriterium-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hf-space-4); margin-bottom: 7px; }
.kriterium-titel { font-weight: 500; font-size: 15px; }
.kriterium-punkte { font-size: 13px; font-weight: 600; color: var(--hf-muted); white-space: nowrap; }
.balken { height: 6px; background: var(--hf-sand-soft); border-radius: 3px; overflow: hidden; margin-bottom: 9px; }
.balken > span { display: block; height: 100%; border-radius: 3px; background: var(--hf-teal); }
.balken.voll > span { background: var(--hf-gruen); }
.balken.mager > span { background: var(--hf-gelb); }
.balken.leer > span { background: var(--hf-rot); }
.kriterium .beleg {
  font-size: 13.5px; color: var(--hf-muted); border-left: 2px solid var(--hf-sand);
  padding-left: 12px; margin-top: 8px; font-style: italic;
}

/* ————————————————————————————————— Diverses */
.trenner { height: 1px; background: var(--hf-line); margin: var(--hf-space-6) 0; border: 0; }
.chip {
  display: inline-block; padding: 4px 11px; border-radius: var(--hf-radius-pill);
  background: var(--hf-sand-soft); border: 1px solid var(--hf-line);
  font-size: 12.5px; font-weight: 500; color: var(--hf-muted);
}
.bild-vorschau {
  max-width: 100%; border-radius: var(--hf-radius-sm);
  border: 1px solid var(--hf-line); display: block; background: var(--hf-white);
}
details.aufklapp > summary {
  cursor: pointer; font-size: 14px; font-weight: 500; color: var(--hf-muted);
  padding: 10px 0; list-style: none;
}
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary::before { content: '▸ '; }
details.aufklapp[open] > summary::before { content: '▾ '; }

.fuss {
  border-top: 1px solid var(--hf-line); margin-top: var(--hf-space-9);
  padding: var(--hf-space-6) var(--hf-gutter);
  font-size: 13px; color: var(--hf-muted);
}
.fuss-innen { max-width: var(--hf-container); margin: 0 auto; display: flex; justify-content: space-between; gap: var(--hf-space-5); flex-wrap: wrap; }

@media (max-width: 720px) {
  h1 { font-size: 30px; }
  h2 { font-size: 22px; }
  .huelle { padding: var(--hf-space-6) 18px var(--hf-space-8); }
  .kopf { padding: 16px 18px; }
  .kopf-innen { flex-direction: column; align-items: flex-start; gap: 14px; }
}