/* FormDialog — Design-Vorlagen und Schriftpaare für öffentliche Formulare.
   Lädt nach base.css und vor form.css.

   Aufbau: Eine Vorlage (.bth-*) überschreibt die Farbtokens aus base.css,
   ein Schriftpaar (.bfn-*) die Schrifttokens. Alles Übrige zieht dadurch
   von selbst nach — Karten, Felder, Dialog und Erfolgsansicht gleichermaßen.

   Alle Schriften liegen im Projekt. Der Browser lädt eine Datei erst, wenn
   eine Vorlage sie wirklich benutzt. */

/* ------------------------------------------------------------- Schriften */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+20AC;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var-latinext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-var-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-var-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+20AC;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-var-latinext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-var-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+20AC;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-var-latinext.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-var-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+20AC;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-var-latinext.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/spacemono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/spacemono-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* --------------------------------------------------------- Schriftpaare */

/* standard = Hausschrift aus base.css, hier nur der Vollständigkeit halber */
.bfn-standard {
  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body: 'Figtree', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
}
.bfn-klassik {
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --titel-weight: 600;
}
.bfn-modern {
  --font-display: 'Archivo', 'Segoe UI', sans-serif;
  --font-body: 'Figtree', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
}
.bfn-elegant {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;
  --titel-weight: 600;
  --titel-scale: 1.18;      /* Serifen wirken bei gleicher Größe kleiner */
}
.bfn-technik {
  --font-display: 'Space Mono', Consolas, monospace;
  --font-body: 'Archivo', 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', Consolas, monospace;
  --titel-weight: 700;
  --titel-scale: .92;       /* Monospace baut breit */
}

/* Titelgröße folgt dem Schriftpaar */
.bform__title {
  font-weight: var(--titel-weight, 650);
  font-size: calc(clamp(1.35rem, 1.15rem + 1vw, 1.75rem) * var(--titel-scale, 1));
}

/* ------------------------------------------------------- Farbvorlagen */

/* Papier — der Standard: warmes Weiß, weiße Karten */
.bth-papier {
  --paper: #F6F5F1;
  --card: #FFFFFF;
  --ink: #1B201D;
  --ink-soft: #5C635E;
  --line: #DEDCD2;
  --line-strong: #C6C4B8;
  --feld-bg: #FBFAF7;
}

/* Sand — warm und ruhig, für Handwerk und Gastlichkeit */
.bth-sand {
  --paper: #F3EBDF;
  --card: #FFFCF7;
  --ink: #2A2118;
  --ink-soft: #6B5D4C;
  --line: #E2D5C2;
  --line-strong: #CBB79C;
  --feld-bg: #FBF6EE;
}

/* Schiefer — kühl und sachlich, für Technik und Beratung */
.bth-schiefer {
  --paper: #EDF1F4;
  --card: #FFFFFF;
  --ink: #17202A;
  --ink-soft: #5A6875;
  --line: #D8E0E7;
  --line-strong: #B6C3CE;
  --feld-bg: #F7FAFC;
}

/* Salbei — weich und begrünt, für Gesundheit und Natur */
.bth-salbei {
  --paper: #EAF0EA;
  --card: #FFFFFF;
  --ink: #17241B;
  --ink-soft: #556B59;
  --line: #D3E0D4;
  --line-strong: #B0C6B3;
  --feld-bg: #F6FAF6;
}

/* Nacht — dunkel, ruhig, mit hellem Text */
.bth-nacht {
  --paper: #101315;
  --card: #191E21;
  --ink: #ECEFEA;
  --ink-soft: #98A29E;
  --line: #262D31;
  --line-strong: #39433F;
  --feld-bg: #10171A;
  --marker-soft: #3A3520;
  --red-tint: #2E1B1A;
  --green-tint: #17282A;
}

/* Leinen — warmes Grau mit Textilcharakter, zurückhaltend und wertig */
.bth-leinen {
  --paper: #EFEBE3;
  --card: #FBF9F5;
  --ink: #242019;
  --ink-soft: #665D4E;
  --line: #E0D9CB;
  --line-strong: #C4B9A4;
  --feld-bg: #F7F4EE;
}

/* Bordeaux — gedecktes Rot, für Kanzleien, Weingüter, Manufakturen */
.bth-bordeaux {
  --paper: #F5EEEE;
  --card: #FFFDFD;
  --ink: #241417;
  --ink-soft: #6B4A50;
  --line: #E7D8D9;
  --line-strong: #CDB0B3;
  --feld-bg: #FBF6F6;
}

/* Marine — tiefes Blau auf kühlem Weiß, sachlich und verlässlich */
.bth-marine {
  --paper: #ECF0F5;
  --card: #FFFFFF;
  --ink: #111C28;
  --ink-soft: #4E5F73;
  --line: #D7DFE9;
  --line-strong: #B0BECF;
  --feld-bg: #F6F9FC;
}

/* Kupfer — dunkel und warm, das Gegenstück zu Nacht */
.bth-kupfer {
  --paper: #17130F;
  --card: #211B15;
  --ink: #F0E8DE;
  --ink-soft: #A5968A;
  --line: #2F271F;
  --line-strong: #453A2E;
  --feld-bg: #191410;
  --marker-soft: #3B2E1A;
  --red-tint: #2E1A16;
  --green-tint: #26201A;
}

/* Tinte — hoher Kontrast, klare Kanten */
.bth-tinte {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #0B0B0C;
  --ink-soft: #55575C;
  --line: #DCDDE0;
  --line-strong: #0B0B0C;
  --feld-bg: #FFFFFF;
  --radius-s: 3px;
  --radius-m: 4px;
  --radius-l: 5px;
}
.bth-tinte .bform-card { box-shadow: none; border-width: 1.5px; border-color: var(--ink); }
.bth-tinte .bfield__input,
.bth-tinte .bfield__file { border-width: 1.5px; border-radius: 3px; }
.bth-tinte .bform__submit,
.bth-tinte .bchip { border-radius: 3px; }

/* Die Vorlage liegt öffentlich am <body>, in der Builder-Vorschau dagegen an
   der Karte selbst. Damit die Textfarbe in beiden Fällen greift, nimmt ein
   Element, das eine Vorlage trägt, seine Farben ausdrücklich auf. */
[class*="bth-"] { color: var(--ink); }
.bform-card[class*="bth-"] { background: var(--card); }

/* Eingabeflächen folgen der Vorlage */
.bfield__input,
.bfield__file,
.bchat__input { background: var(--feld-bg, #FBFAF7); }

/* ----------------------------------------------------- Eckenform und Karte */

/* Die Eckenform greift auf alle Radien durch — Karte, Felder, Knöpfe. */
.bsh-kantig { --radius-s: 2px; --radius-m: 3px; --radius-l: 4px; --feld-radius: 2px; --knopf-radius: 3px; }
.bsh-weich  { --radius-s: 8px; --radius-m: 12px; --radius-l: 18px; --feld-radius: 10px; --knopf-radius: 999px; }
.bsh-rund   { --radius-s: 14px; --radius-m: 20px; --radius-l: 28px; --feld-radius: 16px; --knopf-radius: 999px; }

.bfield__input,
.bfield__file,
.bfiles__item { border-radius: var(--feld-radius, 10px); }
.bform__submit { border-radius: var(--knopf-radius, 999px); }
.bsh-kantig .bchoice__box { border-radius: 2px; }
.bsh-rund .bchoice__box { border-radius: 8px; }

/* Wie die Karte aufliegt. Doppelte Selektoren, weil die Klasse öffentlich am
   <body> steht, in der Builder-Vorschau aber an der Karte selbst. */
.bcd-schwebend .bform-card,
.bform-card.bcd-schwebend {
  border: none;
  box-shadow: var(--shadow-card), var(--kante);
}
.bcd-gerahmt .bform-card,
.bform-card.bcd-gerahmt {
  border: 1.5px solid var(--line-strong);
  box-shadow: none;
}
.bcd-flach .bform-card,
.bform-card.bcd-flach {
  border: none;
  box-shadow: none;
  background: transparent;
}
/* Ohne Karte trägt der Kopfstrich nichts mehr — er säße im Nichts. */
.bcd-flach .bform-card::before,
.bcd-flach .bform-card::after,
.bform-card.bcd-flach::before,
.bform-card.bcd-flach::after { display: none; }
.bcd-flach.bth-nacht .bfield__input,
.bcd-flach.bth-kupfer .bfield__input { background: var(--card); }

/* ------------------------------------------------------------ Hintergrund */

/* Verlauf: aus der Akzentfarbe abgeleitet, sehr zurückhaltend — die Karte
   soll ruhig bleiben, der Verlauf nur Tiefe geben. */
body.bbg-verlauf {
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 0%,
      color-mix(in srgb, var(--verlauf-farbe, var(--green)) 22%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--verlauf-farbe, var(--green)) 8%, transparent) 0%,
      transparent 45%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  body.bbg-verlauf { background-image: none; }
}