/* ================================
   Mohnwegfreunde Theme CSS
   Custom-Theme für Freunde der Grundschule am Mohnweg e.V.
   ================================

   INHALTSVERZEICHNIS:

   1. CSS Variables (Farbschema) ................ Zeile 13
   2. Base Styles ............................... Zeile 33
   3. Überschriften (H1-H6) ..................... Zeile 50
   4. Links ..................................... Zeile 82
   5. Skip Link (Barrierefreiheit) .............. Zeile 85
   6. Navbar .................................... Zeile 103
   7. Hero Section .............................. Zeile 137
   8. Sections .................................. Zeile 164
   9. Überschriften in Sektionen ................ Zeile 237
      - H2 ...................................... Zeile 244
      - H3 ...................................... Zeile 265
      - H3 Akzent-Balken ........................ Zeile 279
   10. Buttons .................................. Zeile 317
   11. Cards .................................... Zeile 250
   12. Footer ................................... Zeile 278
   13. Impressum Grid ........................... Zeile 67
   14. Bank Table ............................... Zeile 57
   15. Forms .................................... Zeile 331
   16. Instagram FAB ............................ Zeile 471
   17. Smooth Scrolling ......................... Zeile 499
   18. Responsive Design (Mobile) ............... Zeile 508
   19. Markdown-First Styling ................... Zeile 639
       - Leistungen (2-Spalten) ................. Zeile 644
       - Projekte (3-Spalten) ................... Zeile 678
       - Bank-Tabelle ........................... Zeile 694

   ANPASSUNGS-GUIDE:

   - Farben ändern: Zeile 13-19 (CSS Variables)
   - Überschriften-Größe: Zeile 50-80
   - Überschriften-Farbe: Zeile 50-80
   - H3-Akzent-Balken: Zeile 279-315
   - Button-Farben: Zeile 317-348
   - Navigation: Zeile 103-136
   - Hero Background: Zeile 137-163
   - Footer: Zeile 278-298

   Nach CSS-Änderungen Cache leeren: bin/grav clearcache
*/

/* ================================
   CSS Variables (Farbschema)
   ================================

   Diese Variablen definieren das Farbschema der gesamten Website.
   Ändern Sie diese Werte, um das Farbschema anzupassen.
*/
:root {
  --primary: #E63946;      /* Hauptfarbe (Mohnrot/Poppy Red) - für Hero, Links, Buttons */
  --secondary: #8BC34A;    /* Sekundärfarbe (Grün) - für Submit-Buttons */
  --light: #ecf0f1;        /* Helle Hintergrundfarbe */
  --dark: #34495e;         /* Dunkle Textfarbe */
  --white: #ffffff;        /* Weiß */
}

/*
   Beispiel für Anpassung des Farbschemas:

   Für ein rotes Schema:
   --primary: #e74c3c;
   --secondary: #3498db;

   Für ein grünes Schema:
   --primary: #27ae60;
   --secondary: #f39c12;
*/

/* ================================
   Base Styles (Grundlegendes Styling)
   ================================ */

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;       /* Schriftart für gesamte Website */
  color: var(--dark);                   /* Textfarbe */
  background-color: var(--light);       /* Hintergrundfarbe */
  padding-top: 100px;                   /* Platz für fixe Navigation */
  margin: 0;
  line-height: 1.7;                     /* Zeilenhöhe für bessere Lesbarkeit */
}

/* ================================
   Überschriften (H1-H6)
   ================================

   Alle Überschriften verwenden die gleiche Schriftart und sind fettgedruckt.
   Passen Sie hier font-size, font-weight, color oder letter-spacing an.
*/

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif;       /* Schriftart für Überschriften */
  font-weight: 700;                     /* Fettgedruckt (400=normal, 700=fett, 800=extra-fett) */
  color: var(--dark);                   /* Textfarbe */
}

/* Überschriften-Größen (kleinere Standard-Größen) */
h1 {
  font-size: 2rem;      /* 32px - Hauptüberschrift */
}

h2 {
  font-size: 1.5rem;    /* 24px - Sektions-Überschrift */
}

h3 {
  font-size: 1.1rem;    /* 17.6px - Unter-Überschrift */
}

h4 {
  font-size: 1rem;      /* 16px */
}

h5 {
  font-size: 0.9rem;    /* 14.4px */
}

h6 {
  font-size: 0.85rem;   /* 13.6px */
}

/*
   Beispiele für Anpassungen:

   Alle Überschriften größer machen:
   h1 { font-size: 3rem; }
   h2 { font-size: 2.5rem; }
   h3 { font-size: 1.75rem; }

   Überschriften in Primärfarbe:
   h1, h2, h3 { color: var(--primary); }

   Dünnere Überschriften:
   h1, h2, h3 { font-weight: 400; }

   Mehr Buchstabenabstand:
   h1, h2 { letter-spacing: 1px; }
*/

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Externe Links Label */
a.link-extern[rel~="noopener"][target="_blank"]:not(.btn)::after {
  content: " extern";
  font-size: 0.8rem;
  vertical-align: super;
}

/* Icon Size */
.icon-size {
  width: 50px;
  height: 50px;
}

/* Bank Table */
.bank-table {
  width: 100%;
  border-collapse: collapse;
}

.bank-table td {
  padding: 4px 0;
}

/* Legal Pages (Impressum, Datenschutz, Quellenangaben) */
.legal-page {
  max-width: 900px;
  margin: 0 auto;
}

.legal-page .section-card h2,
.legal-page h2 {
  margin-top: 3rem !important;
  margin-bottom: 1.5rem !important;
}

.legal-page .section-card h2:first-child,
.legal-page h2:first-child {
  margin-top: 0 !important;
}

.legal-page .section-card h3,
.legal-page h3 {
  margin-top: 3rem !important;
  margin-bottom: 1.5rem !important;
}

.legal-page .section-card h3:first-child,
.legal-page h3:first-child {
  margin-top: 0 !important;
}

.legal-page ul {
  margin-left: 0;
  margin-bottom: 1.5rem;
  padding-left: 0;
  list-style: none;
}

.legal-page ul li,
.section-card ul li:not(.leistungen-page .section-card ul li):not(.projekte-page .section-card ul li) {
  margin-bottom: 0.25rem;
  line-height: 1.6;
  padding-left: 1.5rem;
  position: relative;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.legal-page ul li::before {
  content: "•";
  color: var(--primary);
  font-weight: bold;
  position: absolute;
  left: 0;
}

.legal-page strong {
  color: var(--dark);
  font-weight: 700;
}

.legal-page small {
  color: #6c757d;
  display: block;
  margin-top: 1rem;
}

/* Verhindere Card-Styling in Legal Pages */
.legal-page .section-card ul {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* Impressum Grid Layout */
.impressum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.impressum-grid > div {
  padding: 0.75rem 0;
}

.impressum-key {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.impressum-grid > div > div:not(.impressum-key) {
  color: var(--dark);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .impressum-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Skip Link für Barrierefreiheit */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: transparent;
  color: transparent;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 4px 0;
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
}

.skip-link:focus {
  top: 0;
  background: var(--dark);
  color: var(--white);
  opacity: 1;
  pointer-events: auto;
}

/* Navbar */
.navbar {
  background-color: var(--white) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  flex-wrap: nowrap;
}

/* Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--primary);
  width: 0%;
  transition: width 0.1s ease-out;
  z-index: 10001;
}

.navbar .navbar-brand {
  color: var(--dark) !important;
  font-size: 1.2rem;
  font-weight: bold;
}

.navbar .nav-link {
  color: var(--dark) !important;
}

.navbar .nav-link {
  font-size: 0.75rem;
  padding: 5px 10px !important;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar .nav-link:hover {
  color: var(--primary) !important;
}

.navbar .nav-link.active {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border-radius: 4px;
}

.navbar-toggler {
  background-color: transparent !important;
  border: none !important;
  color: var(--dark) !important;
}

/* Hero Section */
.hero {
  background-color: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 5rem 0;
  margin-top: 0;
}

.hero h1 {
  color: var(--white);
  font-weight: 800;
  /* font-size wird von globalen h1 Styles übernommen */
}

.hero .btn {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  transition: all 0.3s ease;
}

.hero .btn:hover {
  background-color: var(--white);
  color: var(--primary);
}

/* Sections */
section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-color: var(--white);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

section:nth-child(even) {
  background-color: #f8f9fa;
}

.section-card {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--white);
  padding: 2rem;
  margin-bottom: 2rem;
}

/* ================================
   Überschriften in Sektionen
   ================================

   Spezielle Formatierung für Überschriften innerhalb von Content-Sektionen.
*/

.section-card h2 {
  font-weight: 800;              /* Extra-fett für H2 in Sektionen */
  color: var(--dark);            /* Textfarbe */
  margin-bottom: 1.5rem;         /* Abstand nach unten - vergrößert für mehr Luft */
  letter-spacing: -0.2px;        /* Leicht engerer Buchstabenabstand */
  /* font-size wird von globalen h2 Styles übernommen */
}

/*
   Anpassungsbeispiele für H2:

   Größere H2:
   .section-card h2 { font-size: 2.5rem; }

   H2 in Primärfarbe mit Unterline:
   .section-card h2 {
     color: var(--primary);
     border-bottom: 3px solid var(--primary);
     padding-bottom: 0.5rem;
   }
*/

.section-card h3 {
  /* font-size wird von globalen h3 Styles übernommen */
  font-weight: 700;              /* Fett */
  color: #2c3e50;                /* Textfarbe (etwas dunkler als --dark) */
  margin-top: 1rem;              /* Abstand nach oben */
  margin-bottom: 0.35rem;        /* Abstand nach unten */
  position: relative;            /* Für Akzent-Balken */
  padding-left: 0.8rem;          /* Platz für Akzent-Strich */
}

.section-card h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 4px;                    /* Breite des Balkens */
  height: calc(100% - 0.7rem);   /* Höhe relativ zur H3-Höhe */
  background: var(--primary);    /* Mohnrot */
  border-radius: 2px;            /* Abgerundete Ecken */
}

.section-card p {
  color: #4b5563;                /* Textfarbe für Paragraphen */
  line-height: 1.5;              /* Zeilenhöhe */
  margin-bottom: 0.6rem;         /* Abstand nach unten */
}

/* ================================
   H3 Akzent-Strich
   ================================

   H3-Überschriften haben einen farbigen Balken links (Mohnrot).
   Wird auf allen Bildschirmgrößen und allen Templates angezeigt.

   Anpassungen:
   - Balken-Breite: .section-card h3::before { width: 6px; }
   - Balken-Farbe: .section-card h3::before { background: #000; }
   - Balken entfernen: .section-card h3::before { display: none; }
*/

/* Buttons */
.btn {
  background-color: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
  transition: all 0.3s ease;
  padding: 0.45rem 0.8rem;
  border-width: 1px;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
}

.btn:hover {
  background-color: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
  text-decoration: none;
}

/* Submit Button & Primary Buttons (Mohnrot) */
.btn-primary,
.btn-secondary,
button[type="submit"] {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border: 2px solid var(--primary) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
button[type="submit"]:hover {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
  color: var(--white) !important;
}

/* Outline Primary Buttons (transparent with mohnrot border) */
.btn-outline-primary {
  background-color: transparent !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  display: inline-block;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: var(--white) !important;
  border-color: var(--primary) !important;
}

/* Buttons responsive auf Mobile */
@media (max-width: 576px) {
  .btn-outline-primary,
  .btn-primary,
  .btn-secondary,
  .btn-outline-light {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.75rem;
  }

  .d-flex.gap-3 {
    flex-direction: column;
    gap: 0 !important;
  }
}

/* CAPTCHA Reload Button */
.reload-captcha-button {
  background-color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  color: var(--white) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s ease;
}

.reload-captcha-button:hover {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
  color: var(--white) !important;
}

/* Cards */
.card {
  padding: 0.75rem;
  background-color: var(--white);
  margin-bottom: 1rem;
}

.card img {
  margin: 10px;
}

.card-title {
  font-size: 1.1rem;      /* Konsistent mit h3 */
  color: var(--primary);
  margin-bottom: 0.6rem;
}

.card-text {
  padding-right: 1rem;
  color: #4b5563;
}

/* Icon Size */
.icon-size {
  width: 50px;
  height: 50px;
}

/* Footer */
footer {
  background-color: var(--white);
  color: var(--dark);
  text-align: center;
  padding: 2rem 0;
}

footer a {
  color: var(--primary);
  text-decoration: none;
}

footer a:hover {
  color: #16a085;
}

.footer-row p {
  font-size: 0.95rem;
}

/* Impressum Grid */
.impressum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.impressum-key {
  font-weight: 700;
  color: var(--dark);
  min-width: 140px;
}

.impressum small {
  color: #6c757d;
}

/* Bank Transfer (Überweisungsträger-Style) */
.bank-transfer {
  background: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-family: 'Courier New', Courier, monospace;
}

.bank-field {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e9ecef;
}

.bank-field:last-child {
  border-bottom: none;
}

.bank-label {
  font-weight: 600;
  color: #6c757d;
  font-size: 0.9rem;
}

.bank-value {
  color: #212529;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

@media (max-width: 576px) {
  .bank-transfer {
    padding: 1rem;
    font-size: 0.85rem;
  }

  .bank-field {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.5rem 0;
  }

  .bank-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
  }

  .bank-value {
    font-size: 0.9rem;
    word-break: break-all;
    letter-spacing: 0;
  }
}

/* Honeypot Field */
.hp-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Form Overlay */
.form-narrow {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Form with left border */
.form-bordered {
  border-left: 4px solid var(--primary);
  padding-left: 2rem;
}

.form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 9999;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
  backdrop-filter: blur(3px);
}

.form-overlay-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 100%;
  max-width: 500px;
  transform: translateY(-2rem);
  animation: slideUp 0.3s ease forwards;
  overflow: hidden;
}

.form-overlay-header {
  padding: 1.25rem 3.5rem 0.5rem 1.5rem;
  position: relative;
  background: white;
  z-index: 2;
}

.form-overlay-body {
  padding: 0 1.5rem 1.5rem;
  position: relative;
  z-index: 1;
}

.form-overlay .alert {
  border: none;
  border-radius: 8px;
  padding: 1.25rem;
  margin: 0;
  position: relative;
}

.form-overlay .alert-success {
  background-color: #ebf9f1;
  color: #0a5738;
}

.form-overlay .alert-danger {
  background-color: #fdf2f2;
  color: #981b1b;
}

.form-overlay .alert-heading {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.form-overlay .alert ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0 0;
}

.form-overlay .alert li + li {
  margin-top: 0.35rem;
}

.form-overlay-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-overlay-close:hover {
  background: #e5e7eb;
  color: #1f2937;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Instagram FAB */
.instagram-fab {
  position: fixed;
  right: 1rem;
  bottom: 1.3rem;
  background: #E4405F;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 1050;
  text-decoration: none;
}

.instagram-fab i {
  font-size: 1.1rem;
}

.instagram-fab:hover {
  text-decoration: none;
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

#page-top {
  scroll-margin-top: 0;
}

/* Scroll-Offset für Sektionen (Navbar-Höhe berücksichtigen) */
section[id] {
  scroll-margin-top: 120px;  /* Navbar-Höhe + etwas Extra-Abstand */
}

/* Hero Section braucht keinen Offset */
#hero {
  scroll-margin-top: 0;
}

/* ================================
   Page Header (für reguläre Seiten)
   ================================ */

.page-header {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2.5rem;         /* Größer als normale H1 für Seitentitel */
  font-weight: 800;
  color: var(--primary);     /* Primärfarbe für Seitentitel */
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

.page-divider {
  border: 0;
  height: 3px;
  background: linear-gradient(to right, var(--primary), transparent);
  margin: 1rem 0 2rem 0;
  opacity: 0.6;
}

/* Responsive Page Title */
@media (max-width: 768px) {
  .page-title {
    font-size: 1.75rem;      /* Kleiner auf Mobile */
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding-top: 90px;
  }

  .navbar {
    flex-wrap: nowrap;
  }

  .navbar-brand {
    font-size: 0.85rem;
  }

  .navbar-toggler {
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    z-index: 1050;
  }

  .navbar-collapse {
    position: relative;
    align-items: center;
  }

  .form-narrow {
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card {
    padding: 0.75rem;
  }

  .hero {
    padding: 3rem 0;
  }

  .mt-auto.text-end {
    text-align: center !important;
  }

  .mt-auto.text-end .btn {
    display: block !important;
    width: 100% !important;
    margin: 0.4rem 0 !important;
  }

  .form-control {
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.5rem 0.6rem;
  }

  .impressum-grid {
    grid-template-columns: 1fr;
  }

  .impressum-grid dl.row .col-4,
  .impressum-grid dl.row .col-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  .impressum-grid dl.row dt {
    margin-top: 0.4rem;
  }

  .impressum-grid dl.row dd {
    margin-bottom: 0.8rem;
  }

  .bank-table td {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
  }
}

@media (max-width: 576px) {
  .form-overlay {
    padding: 1rem;
    align-items: flex-end;
  }

  .form-overlay-content {
    margin-bottom: 1rem;
    border-radius: 12px;
    max-width: calc(100% - 2rem);
    transform: translateY(100%);
    animation: slideUpMobile 0.3s ease forwards;
  }

  .form-overlay-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 3rem;
    height: 3rem;
  }
}

@keyframes slideUpMobile {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .footer-row {
    gap: 0.5rem;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }

  .footer-row .footer-copy p,
  .footer-row .footer-links p {
    font-size: 0.85rem;
  }

  .footer-links {
    margin-top: 0.4rem;
  }
}

/* ================================
   Markdown-First Styling
   Automatisches Styling für reines Markdown
   ================================ */

/* Leistungen: Automatisches 2-Spalten Grid für Listen mit Bildern */
.section-card ul li img {
  width: 64px;
  height: 64px;
  margin-right: 1rem;
  float: left;
}

.section-card ul li {
  list-style: none;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: auto;
}

.section-card ul li::after {
  content: "";
  display: table;
  clear: both;
}

/* 2-Spalten Layout für Leistungen auf Desktop */
@media (min-width: 768px) {
  .section-card ul.leistungen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding-left: 0;
  }
}

/* 3-Spalten Layout für Projekt-Karten */
@media (min-width: 768px) {
  .section-card .projekte-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.section-card .projekte-grid > div {
  padding: 1.5rem;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Bank-Tabelle automatisch stylen */
.section-card table {
  width: 100%;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.section-card table td {
  padding: 0.5rem 0;
}

.section-card table td:first-child {
  font-weight: 700;
  width: 150px;
}

.section-card table code {
  background: #f8f9fa;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: monospace;
}

/* Formulare automatisch stylen */
.section-card form {
  max-width: 600px;
}

.section-card form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.section-card form input[type="text"],
.section-card form input[type="email"],
.section-card form input[type="tel"],
.section-card form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
}

.section-card form input[type="checkbox"] {
  margin-right: 0.5rem;
}

.section-card form button {
  background: var(--secondary);
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: 600;
}

.section-card form button:hover {
  background: #7cb342;
}

/* Honeypot verstecken */
.hp-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Leistungen-Page: Style für Markdown-Listen mit Bildern */
.leistungen-page .section-card ul {
  padding-left: 0;
}

.leistungen-page .section-card ul li {
  list-style: none;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: white;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;      /* Dunklerer Rahmen */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  overflow: auto;
}

.leistungen-page .section-card ul li img {
  width: 64px;
  height: 64px;
  margin-right: 1rem;
  float: left;
}

/* 2-Spalten Layout auf Desktop */
@media (min-width: 768px) {
  .leistungen-page .section-card ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Projekte-Page: 3-Spalten Grid */
.projekte-page .section-card > h2 + ul,
.projekte-page .section-card > h1 + ul {
  padding-left: 0;
  list-style: none;
}

.projekte-page .section-card ul li {
  padding: 1.5rem;
  background: white;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;      /* Dunklerer Rahmen */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
}

.projekte-page .section-card ul li strong:first-child {
  display: block;
  font-size: 0.95rem;      /* Etwas kleiner für Konsistenz */
  color: var(--primary);
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .projekte-page .section-card ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

/* ================================
   Bestätigungsseite (Formdata)
   ================================ */

.confirmation-content {
  text-align: center;
}

.confirmation-content h2:first-of-type {
  color: var(--primary);
  font-size: 2rem;
  margin-top: 0;
  margin-bottom: 2rem;
}

.confirmation-content h3 {
  color: var(--dark);
  font-size: 1.3rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  text-align: left;
  padding-left: 0;
}

.confirmation-content h3::before {
  display: none;
}

.confirmation-content ol,
.confirmation-content ul {
  text-align: left;
  max-width: 600px;
  margin: 1.5rem auto;
}

.confirmation-content p {
  text-align: left;
  max-width: 600px;
  margin: 1rem auto;
}

.confirmation-content .bank-transfer {
  max-width: 600px;
  margin: 2rem auto;
}

.confirmation-content .btn {
  margin-top: 2rem;
  display: inline-block;
}

.success-icon {
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .confirmation-content h2:first-of-type {
    font-size: 1.5rem;
  }

  .confirmation-content h3 {
    font-size: 1.1rem;
  }

  .success-icon i {
    font-size: 3rem !important;
  }
}

/* ================================
   Sprachauswahl (Language Switcher)
   ================================ */

.dropdown-menu {
  min-width: 160px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
}

.dropdown-item {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
}

.dropdown-item.active {
  background-color: var(--primary);
  color: white;
}

.dropdown-item.active:hover {
  background-color: var(--primary);
  color: white;
}

/* Flag icons (wenn flag-icons CSS verwendet wird) */
.fi {
  font-size: 1.2rem;
  vertical-align: middle;
}

/* Google Translate Dropdown Icon */
.nav-link .bi-translate {
  font-size: 1.2rem;
}