/* --------------------------------------------------------- 1) Externe CSS-Dateien und Schriftarten laden --------------------------------------------------------- */ /* Lädt die Font Awesome Bibliothek, damit man Icons wie Pfeile, Social Media Symbole usw. nutzen kann */ @import url(fontawesome-all.min.css); /* Lädt Google Fonts "Merriweather" und "Source Sans Pro" - mit verschiedenen Schriftschnitten (300, 700, italic) Damit die Website ein modernes Schriftbild bekommt */ @import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900"); /* --------------------------------------------------------- 2) Copyright-Hinweis / Info von HTML5 UP Template --------------------------------------------------------- */ /* Massively by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license */ /* --------------------------------------------------------- 3) CSS Reset / Grund-Einstellungen (damit Browser nicht eigene Standardabstände/Stile verwenden) --------------------------------------------------------- */ /* Alle HTML-Elemente, die hier aufgelistet sind, werden auf "Null" gesetzt: Kein margin, kein padding, keine Ränder. Schriftgrößen und Schriftarten werden vereinheitlicht. -> Ziel: sauberes, einheitliches Ausgangslayout */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; /* äußere Abstände zurückgesetzt */ padding: 0; /* innere Abstände zurückgesetzt */ border: 0; /* keine Rahmen */ font-size: 100%; /* Standard-Schriftgröße (vom Browser) */ font: inherit; /* Schriftstil vom Elternelement übernehmen */ vertical-align: baseline; /* Grundlinie angleichen für Inline-Elemente */ } /* HTML5-Elemente standardmäßig als Block darstellen, damit sie sich wie
verhalten */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* Grundlinie für Text: etwas höher, damit Zeilen lesbarer sind */ body { line-height: 1; } /* Listen (ul, ol) ohne Standardpunkte oder Ziffern */ ol, ul { list-style: none; } /* Blockzitate und Zitate ohne Anführungszeichen */ blockquote, q { quotes: none; } /* Stellt sicher, dass blockquote/q keine leeren "content"-Symbole einfügen */ blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* Tabellen: Zellen ohne doppelten Rand und ohne Abstand */ table { border-collapse: collapse; /* Zellenränder verschmelzen */ border-spacing: 0; /* kein Abstand zwischen Zellen */ } /* Verhindert, dass iOS Safari automatisch Textgrößen anpasst, wenn man zoomt -> wichtig für responsive Design */ body { -webkit-text-size-adjust: none; } /* --------------------------------------------------------- 4) Grundlegende Standard-Elemente --------------------------------------------------------- */ /* -Element (Textmarker) wird neutralisiert: - Hintergrund ist durchsichtig - Textfarbe bleibt wie geerbt -> verhindert gelbe Hervorhebung, wie sie Browser standardmäßig machen */ mark { background-color: transparent; color: inherit; } /* Entfernt den inneren Standardrand + Padding bei im Firefox (Moz = Mozilla). */ input::-moz-focus-inner { border: 0; padding: 0; } /* Einheitliches Aussehen für Formularelemente (input, select, textarea): - entfernt die Browser-spezifischen Standardstile -> z. B. Safari hat runde Ränder, iOS hat Schatten etc. Mit appearance:none werden diese deaktiviert */ input, select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; } /* --------------------------------------------------------- 5) Basic Einstellungen --------------------------------------------------------- */ /* Für alte Microsoft-Browser (IE10/11): - sorgt dafür, dass die Webseite die echte Gerätebreite nimmt */ @-ms-viewport { width: device-width; } /* Erzwingt im IE/Edge alten Typs einen Scrollbar-Stil */ body { -ms-overflow-style: scrollbar; } /* Wenn der Bildschirm max. 480px breit ist (Handy hochkant): - Mindestbreite von 320px setzen -> verhindert, dass Inhalte zu stark zusammengedrückt werden */ @media screen and (max-width: 480px) { html, body { min-width: 320px; } } /* Box-Modell global definieren: - box-sizing:border-box für -> alle Padding + Border zählen in Breite/Höhe rein Sehr hilfreich, damit Layouts stabil bleiben */ html { box-sizing: border-box; } /* Alle Elemente, inkl. ::before und ::after, übernehmen box-sizing: border-box */ *, *:before, *:after { box-sizing: inherit; } /* Hintergrundfarbe der gesamten Seite */ body { background-color: #1e252d; /* dunkles Grau-Blau */ } /* Wenn die Body-Klasse "is-preload" gesetzt ist: - alle Animationen und Transitionen abschalten -> sorgt dafür, dass beim Laden nichts springt/animiert -> wird meist von JavaScript wieder entfernt, sobald Seite geladen */ body.is-preload *, body.is-preload *:before, body.is-preload *:after { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; -moz-transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; } /* --------------------------------------------------------- 6) Typografie (Schriftgrößen für unterschiedliche Geräte) --------------------------------------------------------- */ /* Standard-Schriftgröße für HTML */ html { font-size: 16pt; /* groß, für große Bildschirme */ } /* --------------------------------------------------------- 7) Grundlegende Text- und Schrift-Einstellungen --------------------------------------------------------- */ /* Standard-Textfarbe für die Seite */ body { color: #212931; /* dunkles Grau-Blau */ } /* Grundschrift für Body + Formulareingaben */ body, input, select, textarea { font-family: "Merriweather", Georgia, serif; /* Serifenschrift */ font-weight: 300; /* eher dünne Schrift */ font-size: 1rem; /* ca. 16px */ line-height: 2.375; /* sehr hoher Zeilenabstand für gute Lesbarkeit */ } /* --------------------------------------------------------- 8) Links (a-Tag) --------------------------------------------------------- */ /* Animationen/Übergänge für Links: - Farbe, Hintergrund, Rahmenfarbe, Schatten - sanft in 0.2s ein-/ausblenden */ a { -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border-bottom: dotted 1px; /* gepunkteter Unterstrich */ text-decoration: none; /* kein Standardunterstrich */ } /* Hover-Effekt für Links */ a:hover { border-bottom-color: transparent; /* Unterstrich verschwindet */ } /* --------------------------------------------------------- 9) Typografie für Textarten --------------------------------------------------------- */ /* Fette Texte */ strong, b { font-weight: 600; /* etwas kräftiger als normal */ } /* Kursivtexte */ em, i { font-style: italic; } /* Absätze */ p { text-align: justify; /* Blocksatz (wie in Büchern) */ margin: 0 0 2rem 0; /* Abstand nach unten */ } /* --------------------------------------------------------- 10) Überschriften --------------------------------------------------------- */ /* Gemeinsame Regeln für h1–h6 */ h1, h2, h3, h4, h5, h6 { font-family: "Source Sans Pro", Helvetica, sans-serif; /* serifenlose Schrift */ font-weight: 900; /* sehr fett */ line-height: 1.5; /* dichter als normaler Text */ letter-spacing: 0.075em; /* leicht gesperrt (Abstand zwischen Buchstaben) */ text-transform: uppercase; /* alles in Großbuchstaben */ margin: 0 0 1rem 0; /* unten Abstand */ } /* Links in Überschriften sehen wie normale Überschrift aus */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { border-bottom: 0; /* keine Linie */ color: inherit; /* Farbe von Überschrift übernehmen */ text-decoration: none; } /* Konkrete Größenabstufungen für Überschriften */ h1 { font-size: 4rem; /* sehr groß */ line-height: 1.1; margin: 0 0 2rem 0; } h2 { font-size: 1.75rem; line-height: 1.3; margin: 0 0 1.5rem 0; } h3 { font-size: 1.25rem; margin: 0 0 1.5rem 0; } h4 { font-size: 1rem; } h5 { font-size: 0.9rem; } h6 { font-size: 0.8rem; } /* --------------------------------------------------------- 11) Spezielle Textformate --------------------------------------------------------- */ /* Tiefgestellter Text (z. B. chemische Formeln) */ sub { font-size: 0.8rem; position: relative; top: 0.5rem; /* nach unten verschoben */ } /* Hochgestellter Text (z. B. Potenzen, Fußnoten) */ sup { font-size: 0.8rem; position: relative; top: -0.5rem; /* nach oben verschoben */ } /* Blockzitat */ blockquote { border-left: solid 4px; /* Linie links */ font-style: italic; /* kursiver Text */ margin: 0 0 2rem 0; /* unten Abstand */ padding: 0.5rem 0 0.5rem 2rem; /* innen links Abstand, damit Text nicht auf Linie sitzt */ } /* Inline-Code (z. B. ) */ code { border: solid 2px; /* dünner Rahmen */ font-family: "Courier New", monospace; /* feste Breite */ font-size: 0.9rem; margin: 0 0.25rem; padding: 0.25rem 0.65rem; /* Hintergrundfeld etwas gepolstert */ } /* Mehrzeiliger Codeblock (z. B. 
) */
pre {
	-webkit-overflow-scrolling: touch;  /* iOS Scrollen flüssig */
	font-family: "Courier New", monospace;
	font-size: 0.9rem;
	margin: 0 0 2rem 0;
}

/* Code innerhalb von 
 */
pre code {
	display: block;
	line-height: 1.75;       /* größere Zeilenhöhe */
	padding: 1rem 1.5rem;    /* viel Innenabstand */
	overflow-x: auto;        /* horizontales Scrollen bei langen Zeilen */
}

















/* ---------------------------------------------------------
   12) Trennlinien (hr)
--------------------------------------------------------- */

hr {
	border: 0;
	border-bottom: solid 2px; /* Linie ist unten */
	margin: 3rem 0;           /* viel Abstand */
}

/* Variante für "major" (größere Abstände) */
hr.major {
	margin: 5rem 0;
}












/* ---------------------------------------------------------
   13) Text-Ausrichtungen (Hilfsklassen)
--------------------------------------------------------- */

.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }



















/* ---------------------------------------------------------
   14) Farben & Anpassungen (Design-Thema)
--------------------------------------------------------- */

/* Eingabe-Felder Standardfarbe */
input, select, textarea {
	color: #212931;
}

/* Links Standardfarbe */
a {
	color: #212931; 
	border-bottom-color: rgba(33, 41, 49, 0.5); /* halbtransparentes Grau */
}

/* Hover-Effekt für Links:
   - Linie verschwindet
   - Textfarbe hellblau (#18bfef) */
a:hover {
	border-bottom-color: transparent;
	color: #18bfef !important;
}

/* Fetter Text */
strong, b {
	color: #212931;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
	color: #212931;
}

/* Blockzitate – linke Linie hellgrau */
blockquote {
	border-left-color: #eeeeee;
}

/* Code-Felder – grauer Hintergrund */
code {
	background: rgba(220, 220, 220, 0.25);
	border-color: #eeeeee;
}

/* Trennlinien hellgrau */
hr {
	border-bottom-color: #eeeeee;
}


















/* ---------------------------------------------------------
   15) Grid-/Row-System (Flexbox-Layout + Spaltenbreiten)
   - .row ist der Flex-Container
   - die direkten Kinder (.row > *) sind die Spalten
   - .col-N und .off-N setzen Breiten und linke Abstände in 12er-Grid
   - gtr-* Klassen steuern horizontale/vertikale Abstände (Gutters)
   - aln-* richten Inhalt aus (justify-content/align-items)
   - imp / imp- ändert Reihenfolge (order) der Spalten
--------------------------------------------------------- */

/* Grund-Row: Flexcontainer mit Umbruch und gestreckten Items */
.row {
	display: flex;         /* aktiviert Flexbox */
	flex-wrap: wrap;       /* Zeilenumbruch erlauben */
	box-sizing: border-box;
	align-items: stretch;  /* Spalten gleich hoch (sofern möglich) */
}

/* Jedes direkte Kind einer Row (die Spalten) rechnet mit border-box */
.row > * {
	box-sizing: border-box;
}

/* Uniform-Row: verhindert extra Margin am letzten Kind im Spalteninhalt */
.row.gtr-uniform > * > :last-child {
	margin-bottom: 0;
}

/* Horizontale Ausrichtung (links/mitte/rechts) */
.row.aln-left   { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right  { justify-content: flex-end; }

/* Vertikale Ausrichtung (oben/mitte/unten) */
.row.aln-top    { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }

/* Wichtigkeit/Reihenfolge hack: zieht diese Spalte nach vorne */
.row > .imp {
	order: -1; /* negative Order = zuerst */
}
















/* =========================
   Buttons – saubere Minimalversion
   Gilt für echte Buttons, Form-Buttons und Links mit .button
   ========================= */

/* Basis */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  /* einheitliche Basis-Optik, Browser-Defaults aus */
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;

  /* weiche Übergänge */
  -moz-transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out;
  -webkit-transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out;
  -ms-transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out;
  transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out;

  /* Layout */
  display: inline-block;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  height: 3rem;
  line-height: 3rem;
  padding: 0 2rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  /* Schrift */
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .075em;

  /* Standard-Farben/Rahmen (wie Massively) */
  background-color: transparent;
  box-shadow: inset 0 0 0 2px #212931;   /* „Rahmen“ */
  color: #212931 !important;
}

/* Hover-Zustand */
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  box-shadow: inset 0 0 0 2px #18bfef;   /* Rahmen wird hellblau */
  color: #18bfef !important;             /* Text wird hellblau */
}

/* Tastatur-Fokus (besser sichtbar als Standard-Outline) */
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="button"]:focus-visible,
button:focus-visible,
.button:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px #18bfef,
    0 0 0 3px rgba(24,191,239,.25);
}

/* Runder Solo-Icon-Button (z. B. Pfeil-Kreis auf der Startseite) */
input[type="submit"].icon.solo,
input[type="reset"].icon.solo,
input[type="button"].icon.solo,
button.icon.solo,
.button.icon.solo {
  position: relative;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  border-radius: 4rem;   /* voll rund */
  text-indent: 4rem;     /* Text ausblenden */
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}
input[type="submit"].icon.solo:before,
input[type="reset"].icon.solo:before,
input[type="button"].icon.solo:before,
button.icon.solo:before,
.button.icon.solo:before {
  position: absolute;
  display: block;
  top: 0; left: 0;
  width: inherit;
  height: inherit;
  line-height: inherit;
  font-size: 1.25rem;
  text-align: center;
  text-indent: 0;
}

/* Ende Buttons */

















/* =========================================================
   FORMS – kompakt, modern, leicht zu pflegen
   Gilt für dein Formspree-Formular im Footer.
   ========================================================= */

/* Abstand des Formulars zum folgenden Inhalt */
form {
  margin: 0 0 2rem 0;
}

/* Grid für Felder – automatisch 1–3 Spalten je nach Breite */
form > .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* vertikal | horizontal */
  gap: 1rem 1.5rem;
  margin: 0 0 1rem 0; /* kleiner Abstand unter der Felder-Gruppe */
}

/* Jedes Feld stapelt Label + Input/Textarea sauber untereinander */
form > .fields > .field {
  display: flex;
  flex-direction: column;
}












/* ---------------------------------------------------------
   Label
--------------------------------------------------------- */
label {
  display: block;
  margin: 0 0 0.6rem 0;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0.075em;
  font-size: 0.8rem;
  line-height: 1.5;
  text-transform: uppercase;
  color: #212931;
}












/* ---------------------------------------------------------
   Inputs & Textareas – einheitlicher Look
--------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  appearance: none;             /* Browser-Defaults aus */
  display: block;
  width: 100%;
  background: transparent;
  color: inherit;
  border: 2px solid #eeeeee;    /* hellgrauer Rand wie im Theme */
  border-radius: 0;             /* eckig wie Buttons im Theme */
  padding: 0 1rem;              /* horizontaler Innenabstand */
  line-height: 1.2;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Höhe wie Buttons, gutes Klickziel */
input[type="text"],
input[type="email"],
input[type="password"],
select {
  height: 3rem;
}

/* Textarea komfortabler */
textarea {
  padding: 0.75rem 1rem;
  min-height: 6.5rem;
  resize: vertical;             /* Größe vertikal anpassbar */
}

/* Fokus – gut sichtbar, aber dezent */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #18bfef;
  box-shadow: 0 0 0 3px rgba(24, 191, 239, .15);
}

/* Placeholder etwas abgetönt */
::placeholder { color: rgba(33, 41, 49, .55); }

/* Ungültige Felder: keine hässlichen roten Browser-Schatten */
input:invalid,
textarea:invalid,
select:invalid { box-shadow: none; }

/* ---------------------------------------------------------
   (Optional) Select – falls du später Dropdowns nutzt
   (du hast aktuell keine, schadet aber nicht)
--------------------------------------------------------- */
select {
  padding-right: 3rem;          /* Platz für „Pfeil“-Zone */
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------
   Ende Forms
--------------------------------------------------------- */














/* =========================================================
   1) INPUT/FOCUS & PLACEHOLDER
   ========================================================= */

/* Einheitlicher, gut sichtbarer Fokus */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #18bfef;
  box-shadow: 0 0 0 3px rgba(24, 191, 239, .15);
}

/* Placeholder (einheitlich, ohne Vendor-Präfixe) */
::placeholder {
  color: #909498;
}











/* =========================================================
   2) ICONS (für  Links)
   - Minimal gehalten; Font Awesome liefert die Icons selbst.
   ========================================================= */
.icon {
  text-decoration: none;
  border: 0;
  position: relative;
}
.icon > .label {
  display: none; /* nur für Screenreader relevant */
}











/* =========================================================
   3) IMAGE-UTILITIES (du nutzt .image, .image.fit, .image.main & a.image)
   - Floats (.image.left/.right) entfernt, da ungenutzt.
   - Schöne, einheitliche Hover-Animation für verlinkte Bilder.
   ========================================================= */
.image {
  border: 0;
  display: inline-block;
  position: relative;
}
.image img {
  display: block;            /* verhindert „Baselinespalt“ unter Bildern */
  width: 100%;
  height: auto;
}

.image.fit {
  display: block;
  width: 100%;
  margin: 2.5rem 0;
}
.image.fit:first-child { margin-top: 0; }

.image.main {
  display: block;
  width: 100%;
  margin: 4rem 0;
}
.image.main:first-child { margin-top: 0; }



/* Verlinkte Bilder: sanfter Zoom beim Hover */
a.image { overflow: hidden; }
a.image img {
  transition: transform .2s ease-out;
}
a.image:hover img {
  transform: scale(1.05);
}












/* =========================================================
   4) ACTIONS (Buttons-Leisten unter deinen Karten)
   - Schlankes Flex-Layout, zentrierbar, stackt mobil automatisch.
   ========================================================= */
ul.actions {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;                /* eigenes Außenmaß wird von umgebendem Layout bestimmt */
  gap: 1rem;                /* Abstand zwischen Buttons/Links */
  align-items: center;
}
ul.actions li { display: flex; }

ul.actions.special {
  justify-content: center;  /* zentrierte Button-Leiste */
  width: 100%;
}

/* Vertikal gestapelte Variante */
ul.actions.stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 1.3rem;
}
















   /* =========================================================
   ICON-LISTEN (Social-Icons in Nav & Footer)
   ========================================================= */

ul.icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;      /* Icons in einer Reihe */
  gap: 0.5rem;               /* Abstand zwischen Icons */
  align-items: center;
}

ul.icons li { display: inline-flex; }

ul.icons li .icon:before {
  /* runde, zentrierte Icon-Fläche von Font Awesome */
  width: 2.25rem;
  height: 2.25rem;
  line-height: 2.25rem;
  display: inline-block;
  text-align: center;
  border-radius: 999px;
  font-size: 1.25rem;
}

/* Variante ".icons.alt": Rahmenkreis + sanfter Hover */
ul.icons.alt li .icon:before {
  box-shadow: inset 0 0 0 2px #eeeeee;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
  font-size: 1rem; /* in alt etwas kleiner */
}

/* Hover-Farben für beide Varianten */
ul.icons li a.icon:hover:before { color: #18bfef; }
ul.icons.alt li a.icon:hover:before {
  box-shadow: inset 0 0 0 2px #18bfef;
}












/* =========================================================
   STANDARD-LISTEN (ol/ul/dl) – schlank gehalten
   ========================================================= */

ol, ul, dl {
  margin: 0 0 2rem 0;
}

ol {
  list-style: decimal;
  padding-left: 1.25rem;   /* Platz für Zahlen */
}
ol li { padding-left: 0.25rem; }

ul {
  list-style: disc;
  padding-left: 1rem;      /* Platz für Punkte */
}
ul li { padding-left: 0.5rem; }

/* Geteilte Liste ohne Bullets, mit feiner Trennlinie */
ul.divided {
  list-style: none;
  padding-left: 0;
  margin: 0 0 2rem 0;
}
ul.divided li {
  border-top: 1px solid #eeeeee;
  padding: 0.5rem 0;
}
ul.divided li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Definition List */
dl dt {
  font-weight: 600;
  margin: 0 0 1rem 0;
}
dl dd {
  margin: 0 0 1rem 2rem;   /* Einzug für Definitionen */
}











/* =========================================================
   SECTION / ARTICLE HEADERS (inkl. Datumslinien)
   ========================================================= */

section.special,
article.special {
  text-align: center;
}

header { cursor: default; }

header > .date {
  display: block;
  font-size: 0.8rem;
  margin: 0 0 1rem 0;
  position: relative;
}

/* Untertitel direkt nach Überschriften etwas dichter setzen */
header > h1 + p { font-size: 1.1rem; margin-top: -0.5rem; line-height: 2; }
header > h2 + p { font-size: 1rem;  margin-top: -0.75rem; }
header > h3 + p { font-size: 0.9rem; margin-top: -0.75rem; }
header > h4 + p { font-size: 0.8rem; margin-top: -0.75rem; }

header.major {
  margin: 0 0 4rem 0;
  text-align: center;
}
header.major > :last-child { margin-bottom: 0; }
header.major > p { margin-top: 0; text-align: center; }
header.major > .date {
  font-size: 1rem;
  margin: 0 0 4rem 0;
}

/* Zierlinien links/rechts vom Datum im großen Header */
header.major > .date:before,
header.major > .date:after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 6rem);   /* Platz in der Mitte fürs Datum */
  border-top: 2px solid #eeeeee;
}
header.major > .date:before { left: 0; }
header.major > .date:after  { right: 0; }










/* =========================================================
   WRAPPER – äußerer Seiten-Container & Hintergrundbild
   ========================================================= */

#wrapper {
  transition: opacity .5s ease;   /* weicher Ein-/Ausblendeffekt */
  position: relative;             /* Bezugspunkt für .bg */
  z-index: 1;                     /* über dem Seitenhintergrund */
  overflow: hidden;               /* überstehendes abschneiden (z. B. Parallax) */
}

/* Mehrschichtiger Hintergrund (Overlay + Verlauf + Foto) */
#wrapper > .bg {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #212931;    /* Fallback-Farbe */
  background-image:
    url("../../images/overlay.png"),                           /* Muster */
    linear-gradient(0deg, rgba(0,0,0,.1), rgba(0,0,0,.1)),     /* leichte Abdunklung */
    url("../../images/bg.jpg");                                 /* Foto */
  background-size: auto, auto, 100% auto;  /* Foto: 100% Breite, Höhe auto */
  background-position: center, center, top center;
  background-repeat: repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, scroll;
  z-index: -1;                          /* hinter Inhalt */
}

/* Fixierter Hintergrund (Parallax-ähnlich) – optional per Klasse */
#wrapper > .bg.fixed {
  position: fixed;
  width: 100vw; height: 100vh;          /* immer Viewport groß */
}

/* Start-Overlay, das sanft ausgeblendet wird, wenn body.is-preload entfernt ist */
#wrapper.fade-in::before {
  pointer-events: none;                  /* nicht klickblockend */
  transition: opacity 1s ease-in-out .75s; /* nach 0.75s weiches Ausblenden */
  background: #1e252d;                  /* dunkles Overlay */
  content: "";
  position: fixed; inset: 0;            /* top/right/bottom/left = 0 */
  opacity: 0;                           /* Standard: unsichtbar */
}
/* Beim Preload sichtbar → ergibt den Fade-In */
body.is-preload #wrapper.fade-in::before { opacity: 1; }













/* =========================================================
   INTRO – große Heldensektion (Hero) mit weißem Text
   ========================================================= */

#intro {
  color: #fff;                           /* Text weiß auf dunklem Bild */
  padding: 8rem 4rem 6rem;               /* viel Luft oben/seitlich/unten */
  display: flex;                         /* vertikal stapeln + zentrieren */
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;             /* Inhalt am unteren Rand der Sektion */
  transition: opacity 1s ease, transform 1s ease; /* Ein-/Reinschweben */
  position: relative;
  text-align: center;
  cursor: default;
  z-index: 1;                            /* über Hintergrund */
  min-height: 100vh;                     /* mindestens Bildschirmhöhe */
}

/* Form-Elemente & Links in weiß */
#intro input, #intro select, #intro textarea { color: #fff; }
#intro a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.5);   /* dezente Unterstreichung */
}
#intro a:hover {
  border-bottom-color: transparent;                 /* Linie ausblenden */
  color: #18bfef !important;                        /* Link hellblau */
}

/* Weitere Elemente im Intro in weiß halten */
#intro strong, #intro b,
#intro h1, #intro h2, #intro h3, #intro h4, #intro h5, #intro h6 { color: #fff; }
#intro blockquote { border-left-color: #fff; }
#intro code {
  background: rgba(255,255,255,.075);
  border: 1px solid #fff;
}
#intro hr { border-bottom-color: #fff; }

/* Buttons im Intro – weißer Stil */
#intro input[type="submit"],
#intro input[type="reset"],
#intro input[type="button"],
#intro button,
#intro .button {
  background: transparent;
  box-shadow: inset 0 0 0 2px #fff;                 /* weißer Rahmen */
  color: #fff !important;
}
#intro input[type="submit"]:hover,
#intro input[type="reset"]:hover,
#intro input[type="button"]:hover,
#intro button:hover,
#intro .button:hover {
  box-shadow: inset 0 0 0 2px #18bfef;              /* Hover: hellblau */
  color: #18bfef !important;
}
/* Primary-Button im Intro = volle Fläche */
#intro .button.primary,
#intro input[type="submit"].primary,
#intro input[type="reset"].primary,
#intro input[type="button"].primary,
#intro button.primary {
  background: #fff;
  box-shadow: none;
  color: #1e252d !important;                        /* dunkler Text auf weiß */
}
#intro .button.primary:hover,
#intro input[type="submit"].primary:hover,
#intro input[type="reset"].primary:hover,
#intro input[type="button"].primary:hover,
#intro button.primary:hover {
  background: #18bfef;                              /* Hover: hellblau voll */
}

/* Typo im Intro */
#intro h1 {
  font-size: 5rem;                                  /* sehr groß */
  line-height: 1;
}
#intro p {
  font-size: 1.25rem;
  font-style: italic;
  margin-top: -0.25rem;                             /* dichter an H1 */
}

/* Header leicht überlappen lassen (wie im Theme) */
#intro + #header { margin-top: -20rem; }

/* Logo anfangs versteckt (für schönes Einblenden) */
#intro + #header .logo {
  transform: translateY(2rem);                      /* etwas nach unten versetzt */
  opacity: 0;                                       /* unsichtbar */
  visibility: hidden;                               /* nicht anklickbar */
}

/* Intro im „hidden“-Zustand (weggeblendet, z. B. nach Scroll) */
#intro.hidden {
  pointer-events: none;
  transform: translateY(2rem);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
  opacity: 0;
  visibility: hidden;
}
/* Wenn Intro ausgeblendet ist, Logo wieder normal einblenden */
#intro.hidden + #header .logo {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Startzustand beim Laden der Seite (sanftes „reinsliden“) */
body.is-preload #intro {
  transform: translateY(2rem);
  opacity: 0;
}

/* Wenn Intro sichtbar ist, Nav am Anfang leicht versetzt einblenden */
body.is-preload #intro:not(.hidden) + #header + #nav {
  transform: translateY(4rem);
  opacity: 0;
}













/* Header */
/* Der obere Bereich deiner Seite: Logo drin, sitzt über dem Intro und vor dem Nav. */

	#header {
		color: #ffffff;                       /* Grundtextfarbe im Header: weiß (gut lesbar auf dunklem BG) */
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;                  /* Flex: Kinder horizontal zentrieren */
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;                        /* Header verhält sich als Flex-Container */
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;               /* Kinder untereinander anordnen (Spalte) */
		-moz-justify-content: -moz-flex-end;
		-webkit-justify-content: -webkit-flex-end;
		-ms-justify-content: -ms-flex-end;
		justify-content: flex-end;            /* Kinder an den unteren Rand des Headers drücken */
		pointer-events: none;                 /* Header selbst „fängt“ keine Klicks ab (außer explizit Überschriebene) */
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;                    /* Text im Header lässt sich standardmäßig nicht markieren */
		height: 20rem;                        /* feste Höhe des Header-Bereichs */
		padding-bottom: 8rem;                 /* extra Platz unten (für Layout/Überlappungen) */
		position: relative;                   /* Referenz für absolut positionierte Kinder (falls nötig) */
		text-align: center;                   /* Inhalt zentriert darstellen */
		z-index: 2;                           /* über dem Hintergrund/Intro liegen */
	}

		#header input, #header select, #header textarea {
			color: #ffffff;                   /* Formulare im Header: weiße Schrift */
		}

		#header a {
			color: #ffffff;                   /* Links im Header sind weiß */
			border-bottom-color: rgba(255,255,255,0.5); /* dezente Unterstreichung */
		}

			#header a:hover {
				border-bottom-color: transparent;      /* Unterstreichung verschwindet beim Hover */
				color: #18bfef !important;             /* Link wird hellblau beim Hover */
			}

		#header strong, #header b {
			color: #ffffff;                   /* fette Texte weiterhin weiß */
		}

		#header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
			color: #ffffff;                   /* Überschriften weiß */
		}

		#header blockquote {
			border-left-color: #ffffff;       /* Zitatlinie (links) weiß */
		}

		#header code {
			background: rgba(255,255,255,0.075); /* leichtes weißes Overlay hinter Code */
			border-color: #ffffff;               /* weißer Rand für Code */
		}

		#header hr {
			border-bottom-color: #ffffff;     /* horizontale Linie weiß */
		}

		#header .logo {
			/* Logo-Box in der Mitte – reagiert weich auf Farbe/Border/Ein-/Ausblendung/Position */
			-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -moz-transform 0.5s ease, visibility 0.5s;
			-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -webkit-transform 0.5s ease, visibility 0.5s;
			-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, -ms-transform 0.5s ease, visibility 0.5s;
			transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
			pointer-events: auto;              /* Logo ist klickbar (hebt das pointer-events:none vom Header auf) */
			border-style: solid;               /* sichtbarer Rahmen um das Logo */
			border-color: #ffffff;             /* Rahmenfarbe weiß */
			border-width: 5px !important;      /* dicker Rahmen (mit !important) */
			font-family: "Source Sans Pro", Helvetica, sans-serif; /* Logo-Schrift */
			font-size: 2.25rem;                /* große Schrift im Logo */
			font-weight: 900;                  /* sehr fettes Logo */
			letter-spacing: 0.075em;           /* leicht gesperrte Buchstaben */
			line-height: 1;                    /* kompakte Zeilenhöhe */
			padding: 1rem 1.75rem;             /* Innenabstand für die „Plakette“ */
			text-transform: uppercase;         /* alles in Großbuchstaben */
			visibility: visible;               /* sichtbar (wichtig für Ein-/Ausblend-Effekte) */
		}

			#header .logo:hover {
				border-color: #18bfef !important; /* beim Hover wird der Rand hellblau */
				color: #18bfef !important;        /* und auch der Text hellblau */
			}

	







/* Nav */
/* Die Hauptnavigation: halbtransparentes Banner mit Links + Icons, unter dem Header. */

	#nav {
		color: #ffffff;                        /* Grundfarbe im Nav: weiß */
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;                         /* Nav als Flex-Container (Links links, Icons rechts) */
		-moz-transition: -moz-transform 1s ease, opacity 1s ease;
		-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
		-ms-transition: -ms-transform 1s ease, opacity 1s ease;
		transition: transform 1s ease, opacity 1s ease; /* weiches Ein-/Ausschieben + Aus-/Einblenden */
		background: rgba(255, 255, 255, 0.175); /* halbtransparenter, heller Balken */
		height: 4rem;                          /* Balkenhöhe */
		line-height: 4rem;                      /* Inhalte vertikal mittig (Zeilenhöhe = Höhe) */
		margin: -4rem auto 0 auto;              /* zieht den Nav-Balken nach oben (überlappt Intro/Header) */
		overflow: hidden;                        /* Überstehendes wird abgeschnitten */
		padding: 0 2rem 0 0;                     /* rechts Innenabstand (Platz für Icons) */
		position: relative;                       /* für Z-Index etc. */
		width: calc(100% - 4rem);                 /* seitlich 2rem Luft links/rechts */
		max-width: 72rem;                         /* maximale Breite (zentrierter Inhalt) */
		z-index: 2;                                /* über dem Hintergrund liegen */
	}

		#nav ul.divided li {
			border-top-color: #ffffff;             /* Trennlinien in Listen im Nav: weiß */
		}

		#nav ul.icons li a.icon:hover:before {
			color: #18bfef;                        /* Icon (FontAwesome) wird hellblau beim Hover */
		}

		#nav ul.icons.alt li .icon:before {
			box-shadow: inset 0 0 0 2px #ffffff;   /* runde Icon-Rahmen weiß */
		}

		#nav ul.icons.alt li a.icon:hover:before {
			box-shadow: inset 0 0 0 2px #18bfef;   /* beim Hover: Rahmen hellblau */
		}

		#nav input, #nav select, #nav textarea {
			color: #ffffff;                        /* Formularelemente in Nav: weiß */
		}

		#nav a {
			color: #ffffff;                        /* Links weiß */
			border-bottom-color: rgba(255,255,255,0.5); /* dezente Unterstreichung */
		}

			#nav a:hover {
				border-bottom-color: transparent;         /* Unterstreichung weg beim Hover */
				color: #18bfef !important;                /* Text hellblau beim Hover */
			}

		#nav strong, #nav b {
			color: #ffffff;                        /* fette Texte weiß */
		}

		#nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 {
			color: #ffffff;                        /* Überschriften weiß (falls vorhanden) */
		}

		#nav blockquote {
			border-left-color: #ffffff;            /* Zitatlinie weiß (falls in Nav verwendet) */
		}

		#nav code {
			background: rgba(255,255,255,0.075);   /* Code: leichtes Overlay */
			border-color: #ffffff;                  /* weißer Rand */
		}

		#nav hr {
			border-bottom-color: #ffffff;          /* Trennlinie weiß */
		}

		#nav ul.links {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;                          /* Linkliste als Flex-Zeile */
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;                           /* nimmt den freien Platz ein (drückt Icons nach rechts) */
			-moz-flex-shrink: 1;
			-webkit-flex-shrink: 1;
			-ms-flex-shrink: 1;
			flex-shrink: 1;                         /* darf mit schrumpfen */
			font-family: "Source Sans Pro", Helvetica, sans-serif; /* UI-Schrift */
			font-weight: 900;                       /* fette Menüpunkte */
			letter-spacing: 0.075em;                /* leicht gesperrt */
			list-style: none;                       /* keine Punkte */
			margin-bottom: 0;                       /* unten bündig */
			padding-left: 0;                        /* kein linker Innenabstand */
			text-transform: uppercase;              /* Menüpunkte in Großbuchstaben */
		}

			#nav ul.links li {
				display: block;                     /* jeder Menüpunkt als Block (klickbare Fläche) */
				padding-left: 0;                    /* kein Extra-Abstand links */
			}

				#nav ul.links li a {
					-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
					-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
					-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
					transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* weiche Hover-Effekte */
					display: block;                   /* gesamte Fläche klickbar */
					font-size: 0.8rem;                /* Menüpunkte: kompakte Größe */
					outline: none;                    /* kein Fokus-Rand (Design übernimmt) */
					padding: 0 2rem;                  /* horizontales Innenpolster je Link */
				}

					#nav ul.links li a:hover {
						color: inherit !important;     /* Textfarbe bleibt (weiß) */
						background-color: rgba(255,255,255,0.1); /* leichtes Weiß beim Hover als Hintergrund */
					}

				#nav ul.links li.active {
					background-color: #ffffff;        /* aktiver Menüpunkt: weiß hinterlegt */
				}

					#nav ul.links li.active a {
						color: #1e252d;               /* aktiver Link: dunkler Text (Kontrast) */
					}

						#nav ul.links li.active a:hover {
							color: #18bfef !important; /* beim Hover auf aktivem: hellblauer Text */
						}

		#nav ul.icons {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;                           /* Icons rechts nehmen keinen extra Platz */
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;                         /* schrumpfen nicht */
			margin-bottom: 0;                       /* bündig unten */
		}

		










/* =========================
   MAIN – Weißer Inhaltsbereich
   ========================= */
#main {
  background: #fff;                 /* weißer Hintergrund */
  position: relative;
  margin: 0 auto;                   /* zentriert */
  width: calc(100% - 4rem);         /* je Seite ~2rem Rand */
  max-width: 72rem;                 /* angenehme Lesebreite */
  z-index: 2;                       /* über BG */
}

/* direkte Abschnitte im Main */
#main > * {
  padding: 4rem 4rem 2rem;          /* großzügige Innenabstände */
  border-top: 2px solid #eee;       /* feine Trenner oben */
  margin: 0;                        /* Außenabstand überflüssig */
}
#main > *:first-child { border-top: 0; } /* ersten Trenner entfernen */

/* Footer innerhalb von #main */
#main > footer { text-align: center; }

/* Einzelner Post (Hero-Abschnitt) */
#main > .post {
  padding: 8rem 8rem 6rem;          /* extra Luft */
}
#main > .post header.major > .date { margin-top: -2rem; }
#main > .post header.major > h1,
#main > .post header.major h2 {
  font-size: 4rem;                  /* große Headline */
  line-height: 1.1;
  margin: 0 0 2rem;
}
#main > .post.featured { text-align: center; }

/* Posts-Raster (Karten) */
#main > .posts {
  display: flex;
  flex-wrap: wrap;                  /* umbrechen in Reihen */
  align-items: stretch;             /* gleiche Höhe je Zeile */
  text-align: center;
  width: 100%;
  padding: 0;
}

/* Karten: 2 Spalten + Innenabstand */
#main > .posts > * {
  flex: 0 0 50%;                    /* 2 Spalten */
  padding: 4rem;                    /* Luft um die Karte */
}









/* Karten-Rahmen/Trenner */
#main > .posts > article {
  border-style: solid;
  border-color: #eee;
  border-left-width: 2px;
  border-top-width: 2px;
  text-align: center;
}
#main > .posts > article > :last-child { margin-bottom: 0; }

/* Linienlogik 2-Spalten: linke Linie bei 1.,3.,5.… weg; oben bei 1.–2. weg */
#main > .posts > article:nth-child(2n - 1) { border-left-width: 0; }
#main > .posts > article:nth-child(-n + 2) { border-top-width: 0; }

/* ---------- Breakpoints ---------- */











  /* Linien im 1-Spalten-Layout neu setzen */
  #main > .posts > article:nth-child(2n - 1) { border-left-width: 2px; }
  #main > .posts > article:nth-child(-n + 2) { border-top-width: 2px; }
  #main > .posts > article:nth-child(n)      { border-left-width: 0; }
  #main > .posts > article:nth-child(-n + 1) { border-top-width: 0; }

  /* Kartenbilder begrenzen + zentrieren */
  #main > .posts > article .image {
    max-width: 25rem;
    margin: 0 auto;
  }










/* =========================
   FOOTER – Heller Bereich unten
   ========================= */
#footer {
  display: flex;                           /* 2 Spalten nebeneinander */
  background: #f5f5f5;                     /* hellgrauer BG */
  color: #909498;                          /* Grundtext */
  cursor: default;
  position: relative;
  margin: 0 auto;                          /* zentriert */
  width: calc(100% - 4rem);                /* 2rem Rand je Seite */
  max-width: 72rem;
  z-index: 2;
}












/* Typo & Basisfarben */
#footer a {
  color: #717981;
  border-bottom-color: rgba(113,121,129,.5);
}
#footer a:hover {
  border-bottom-color: transparent;
  color: #18bfef !important;
}
#footer strong, #footer b,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer label { color: #717981; }
#footer blockquote { border-left-color: #e2e2e2; }
#footer code { background: rgba(220,220,220,.5); border-color: #e2e2e2; }
#footer hr { border-bottom-color: #e2e2e2; }
#footer .box { border-color: #e2e2e2; }










/* Buttons (Outline & Primary) */
#footer input[type="submit"],
#footer input[type="reset"],
#footer input[type="button"],
#footer button,
#footer .button {
  background: transparent;
  box-shadow: inset 0 0 0 2px #717981;
  color: #717981 !important;
}
#footer input[type="submit"]:hover,
#footer input[type="reset"]:hover,
#footer input[type="button"]:hover,
#footer button:hover,
#footer .button:hover {
  box-shadow: inset 0 0 0 2px #18bfef;
  color: #18bfef !important;
}
#footer .button.primary,
#footer input[type="submit"].primary,
#footer input[type="reset"].primary,
#footer input[type="button"].primary,
#footer button.primary {
  background: #717981;
  box-shadow: none;
  color: #f5f5f5 !important;
}
#footer .button.primary:hover,
#footer input[type="submit"].primary:hover,
#footer input[type="reset"].primary:hover,
#footer input[type="button"].primary:hover,
#footer button.primary:hover {
  background: #18bfef;
}

/* Form-Felder im Footer */
#footer input[type="text"],
#footer input[type="password"],
#footer input[type="email"],
#footer select,
#footer textarea { border-color: #e2e2e2; }
#footer input[type="text"]:focus,
#footer input[type="password"]:focus,
#footer input[type="email"]:focus,
#footer select:focus,
#footer textarea:focus { border-color: #18bfef; }

/* eigener Pfeil für