@charset "UTF-8";
/* ===================================================
   Haut im Zentrum – basis.css
   Gilt für ALLE Seiten und wird immer zuerst geladen.
   Danach folgt startseite.css (nur index.html) oder
   unterseiten.css (alle anderen Seiten).

   1. Schrift
   2. Variablen: Farben, Abstände, Schriftgrößen
   3. Grundregeln
   4. Farbflächen
   5. Gemeinsame Bausteine
   =================================================== */


/* ---------------------------------------------------
   1. Schrift
   Fira Sans (SIL Open Font License) wird selbst gehostet,
   damit keine Besucherdaten an fremde Server gehen.
   Auf Latin-1, Satzzeichen und Pfeile reduziert.
   --------------------------------------------------- */
@font-face {
	font-family: 'Fira Sans';
	src: url('../fonts/fira-sans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fira Sans';
	src: url('../fonts/fira-sans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* ---------------------------------------------------
   2. Variablen
   Farben, Abstände und Schriftgrößen werden NUR hier
   festgelegt. Eine Änderung wirkt auf allen Seiten.
   --------------------------------------------------- */
:root {
	/* Farben laut Farbnachschlagewerk (Stand Oktober 2026) */
	--farbe-himmel:   #CCDDEF; /* Dünenhimmel: helle Flächen, Logo-Hintergrund */
	--farbe-tiefsee:  #00324B; /* Tiefsee: Leitfarbe, dunkle Flächen */
	--farbe-gras:     #8A9E70; /* Dünengras: grüner Akzent */
	--farbe-fjord:    #3D7995; /* Fjordblau: mittelblauer Akzent */
	--farbe-weiss:    #FFFFFF; /* Praxisweiß: Text auf farbigen Flächen */
	--farbe-schiefer: #5F7482; /* Schiefergrau: Links in der Fußzeile */
	--farbe-nebel:    #7CA3BA; /* Nebelblau: Dachzeilen auf dunklem Grund */
	--farbe-text:     #1D1D1B; /* Fließtext auf hellen Flächen (Schriftzug des Logos) */
	--farbe-warnung:  #FFD54A; /* nur Warnhinweise in der lokalen Vorschau */

	/* Weiß mit Transparenz: Nebentexte und Linien auf farbigen Flächen */
	--weiss-85: rgba(255, 255, 255, 0.85);
	--weiss-82: rgba(255, 255, 255, 0.82);
	--weiss-50: rgba(255, 255, 255, 0.5);
	--weiss-35: rgba(255, 255, 255, 0.35);
	--weiss-28: rgba(255, 255, 255, 0.28);

	/* Abstand zwischen zwei Kacheln (auf allen Seiten gleich) */
	--kachel-abstand: 10px;

	/* Schriftgrößen, relativ zur umgebenden Schrift */
	--schrift-titel:     1.5em;  /* Seitentitel der Unterseiten */
	--schrift-gross:     1.25em; /* große Zwischenüberschrift */
	--schrift-gehoben:   0.95em; /* etwas größerer Fließtext */
	--schrift-text:      0.9em;  /* normaler Fließtext in Kacheln */
	--schrift-info:      0.875em;
	--schrift-klein:     0.8em;
	--schrift-dachzeile: 0.78em; /* Großbuchstaben-Zeile über Titeln */
	--schrift-fein:      0.75em;
	--schrift-mini:      0.7em;  /* Kleingedrucktes in kleinen Kacheln */
}


/* ---------------------------------------------------
   3. Grundregeln
   --------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-hyphens: auto;
	hyphens: auto;
}

body {
	margin: 25px 0;
	padding: 0;
	color: var(--farbe-text);
}

p {
	margin: 0.5em 0 0;
}

strong {
	font-weight: 700;
}

/* <address> wird für Kontaktdaten genutzt – ohne die Standard-Kursivschrift */
address {
	font-style: normal;
}

img {
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration: none;
}


/* ---------------------------------------------------
   4. Farbflächen
   Hintergrund und passende Textfarbe in einem.
   Kachelfarbe ändern = Klasse im HTML austauschen.
   --------------------------------------------------- */
.farbe-himmel  { background-color: var(--farbe-himmel);  color: var(--farbe-text); }
.farbe-tiefsee { background-color: var(--farbe-tiefsee); color: var(--farbe-weiss); }
.farbe-gras    { background-color: var(--farbe-gras);    color: var(--farbe-weiss); }
.farbe-fjord   { background-color: var(--farbe-fjord);   color: var(--farbe-weiss); }


/* ---------------------------------------------------
   5. Gemeinsame Bausteine
   --------------------------------------------------- */

/* Link mit Pfeil, z. B. „Online-Terminvergabe →“.
   Abstände setzt die jeweilige Kachel. */
.pfeil-link {
	text-align: left;
}
.pfeil-link__link {
	font-weight: 700;
	line-height: 1.8;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--weiss-85);
}
.pfeil-link__pfeil {
	margin-left: 0.4em;
}

/* Lange Wörter ohne Leerzeichen (E-Mail-Adressen) dürfen umbrechen,
   statt die Kachel zu sprengen */
.umbrechbar {
	overflow-wrap: anywhere;
}

/* Fußzeile mit Datenschutz/Impressum (fett, mit Unterstrich-Linie) */
.fusszeile {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}
.fusszeile__link {
	font-weight: 700;
	font-size: var(--schrift-text);
	color: var(--farbe-schiefer);
	padding-bottom: 3px;
	border-bottom: 2px solid var(--farbe-schiefer);
}
.fusszeile__link:hover,
.fusszeile__link:focus {
	color: var(--farbe-tiefsee);
	border-color: var(--farbe-tiefsee);
}