/* ==========================================================================
   BERLINER SALON — HAUPT-STYLESHEET
   ==========================================================================
   Diese eine Datei wird von ALLEN Unterseiten eingebunden
   (<link rel="stylesheet" href="css/style.css">).
   So musst du Farben, Schriften oder Abstände nur an EINER Stelle ändern,
   und jede Seite aktualisiert sich automatisch mit.

   Aufbau dieser Datei (mit Strg+F leicht zu finden):
   1. Design-Tokens (Farben, Schriften, Abstände als Variablen)
   2. Reset & Grundeinstellungen
   3. Typografie
   4. Layout-Hilfsklassen (Container, Grid, Abstände)
   5. Navigation (Header)
   6. Buttons
   7. Karten ("Cards") — das wiederkehrende Design-Element der Seite
   8. Hero-Bereich (großer Aufmacher oben auf jeder Seite)
   9. Formulare (z. B. für Spenden/Newsletter)
   10. Footer
   11. Kleine Bausteine (Badges, Zitate, Trenner …)
   12. Responsive / Mobile Anpassungen
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN-TOKENS
   Alle Grundfarben und -werte stehen hier als CSS-Variablen (--name).
   Vorteil: Wenn du z. B. den Gelbton ändern willst, reicht EINE Zeile hier,
   statt an 50 Stellen im Code zu suchen.
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #f7f4ee;
  --color-bg-alt: #f3eadb;
  --color-card: #ffffff;
  --color-ink: #17415c;
  --color-ink-soft: #4b6777;
  --color-accent: #e27426;
  --color-accent-soft: #4f929c;
  --color-accent-deep: #3d7a82;
  --color-primary: #e27426;
  --color-primary-deep: #c8611c;
  --color-primary-light: #ebb988;
  --color-secondary: #4f929c;
  --color-secondary-deep: #3d7a82;
  --color-line: #d8d9d2;
  --color-yellow: #e27426;
  --color-yellow-deep: #c8611c;
  --color-petrol: #17415c;
  --color-petrol-deep: #102f45;

  /* Schriften — zwei bewusst unterschiedliche Schriftfamilien:
     Fraunces = Display-Schrift (Serife mit Charakter) für Überschriften,
     Space Grotesk = klare, geometrische Grotesk für Fließtext & UI.
     Beide werden unten in jeder HTML-Datei per Google Fonts geladen. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Abstände — einheitliche Skala, damit alles im gleichen Rhythmus steht */
  --space-xxs: 0.25rem
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  @media (max-width: 760px) {
    --space-xxs: 0.15rem;
    --space-xs: 0.3rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.75rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
  }
  /* Rundungen — "leicht abgerundet, dynamisch" ist der Wunsch-Look.
     Karten bekommen großzügige, aber nicht komplett runde Ecken. */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px; /* für Buttons/Badges → komplett rund an den Enden */

  /* Schatten — dezent, damit Karten leicht "schweben" statt hart zu wirken */
  --shadow-soft: 0 8px 24px rgba(43, 38, 32, 0.08);
  --shadow-hover: 0 14px 32px rgba(43, 38, 32, 0.14);

  /* Breite, auf die der Seiteninhalt zentriert wird */
  --container-width: 1120px;
}


/* --------------------------------------------------------------------------
   2. RESET & GRUNDEINSTELLUNGEN
   Browser haben unterschiedliche Standard-Abstände etc. — das hier
   sorgt für eine einheitliche Basis auf jeder Seite.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* Padding/Rahmen werden in die Breite eingerechnet */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* sanftes Scrollen zu Sprungmarken (#anker) */
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Sichtbarer Fokus-Rahmen für Tastatur-Navigation — wichtig für
   Barrierefreiheit. Ohne das wäre für Tastatur-Nutzer:innen nicht
   erkennbar, welches Element gerade ausgewählt ist. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-petrol);
  outline-offset: 3px;
}

/* Respektiert die Systemeinstellung "Bewegung reduzieren" */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   3. TYPOGRAFIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem); /* passt sich der Bildschirmgröße an */
  font-weight: 500;
}

h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
}

h3 {
  font-size: 1.4rem;
}

p {
  color: var(--color-ink);
}

.text-lead {
  /* größerer, ruhiger Einleitungstext unter einer Überschrift */
  font-size: 1.2rem;
  color: var(--color-ink-soft);
  max-width: 60ch; /* Zeilenlänge begrenzen = leichter lesbar */
}

.eyebrow {
  /* kleines Label über einer Überschrift, z. B. "SPENDEN" */
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-petrol);
  margin-bottom: var(--space-sm);
}

.eyebrow .salon-word,
.nav-logo span {
  color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   4. LAYOUT-HILFSKLASSEN
   -------------------------------------------------------------------------- */
.container {
  /* zentriert den Inhalt und begrenzt die Breite auf großen Bildschirmen */
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container h1, h2 {
  margin-bottom: var(--space-md);
}


.section {
  padding-block: var(--space-2xl);
}

.section-alt {
  /* Abschnitt mit leicht abweichendem Hintergrund, um Bereiche
     der Seite optisch voneinander zu trennen */
  background-color: var(--color-bg-alt);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.info-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.info-pills span {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(23, 65, 92, 0.08);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: 0.82rem;
  font-weight: 600;
}

/*
.hero-collage {
  display: grid;
  grid-template-columns: 1.5fr 1.6fr 1.2fr;
  grid-template-rows: minmax(180px, 1fr) minmax(150px, 1fr);
  gap: 0.9rem;
  align-self: stretch;
  padding: 0.5rem 0;
  min-height: 430px;
}

.hero-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  border: 2px solid var(--color-line);
  box-shadow: var(--shadow-soft);
}

.hero-collage .collage-square {
  grid-column: 1;
  grid-row: 1 / span 2;
  aspect-ratio: 1 / 1;
}

.hero-collage .collage-landscape {
  aspect-ratio: 16 / 9;
}

.hero-collage .collage-landscape-1 {
  grid-column: 2;
  grid-row: 1;
}

.hero-collage .collage-landscape-2 {
  grid-column: 1;
  grid-row: 2;
  aspect-ratio: 4 / 3;
}

.hero-collage .collage-landscape-3 {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 4 / 3;
}

.hero-collage .collage-portrait {
  grid-column: 3;
  grid-row: 2 / span 2;
  aspect-ratio: 3 / 5;
} 
*/

/* --------------------------------------------------------------------------
   GALERIE — Justified Rows
   Organische Bildergalerie mit gemischten Formaten (Hoch-, Quer- und
   Quadratformat). Jedes Bild behält sein natürliches Seitenverhältnis;
   die Zeilenhöhe ist fix, die Breite wird automatisch berechnet
   (kein manuelles Grid-Placement wie bei .hero-collage nötig).
   -------------------------------------------------------------------------- */
.gallery-justified {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.gallery-justified img {
  height: 275px;
  width: auto;
  flex-grow: 0;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 22px;
  border: 2px solid var(--color-primary-light);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.gallery-justified .row-two{
  height: 105px;
  /* width: auto;
  flex-grow: 0.0;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 22px;
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms ease, box-shadow 220ms ease; */
}

.gallery-justified img:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

@media (max-width: 720px) {
  .gallery-justified {
    gap: 0.25rem;
  }
  .gallery-justified img {
    height: 185px;
  }
  .gallery-justified .row-two {
    height: 71px;
  }
}

.event-note {
  margin-top: 1.25rem;
  max-width: 42ch;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.split-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.help-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  gap: var(--space-md);
}

.help-grid p{
  margin-bottom: var(--space-sm);
}

.help-card {
  min-height: 100%;
}

.text-link {
  display: inline-flex;
  margin-top: var(--space-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.inline-link {
  display: inline-flex;
  font-weight: 600;
  color: var(--color-primary);
}

.sponsor-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-lg);
  align-items: center;
}

.sponsor-intro {
  background: var(--color-card);
}

.sponsor-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  min-height: 100%;
}

.sponsor-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  height: 100%;
  padding: var(--space-lg);
}

.sponsor-card-inner img {
  max-height: 68px;
  width: auto;
  object-fit: contain;
  margin-inline: auto;
}

.sponsor-card-inner p {
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.running-dinner-box {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-xl);
  align-items: center;
  background: rgba(255,255,255,0.35);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.rotating-dinner-box {
  grid-template-columns: 1.5fr 0.5fr;
}

@media (max-width: 720px) {
  .running-dinner-box,
  .rotating-dinner-box {
    grid-template-columns: 1fr;
  }
  .rotating-dinner-img {
    display: flex;
    justify-content: center;
    width: 70%;
    margin: auto;
  }
}

.running-dinner-copy {
  display: grid;
  gap: 1rem;
}

.running-dinner-copy p {
  color: var(--color-ink-soft);
}

.running-dinner-gallery {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}

.running-dinner-gallery img {
  width: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: 22px;
  border: 2px solid var(--color-line);
  box-shadow: var(--shadow-soft);
}

.newsletter-box{
  grid-template-columns: 1fr 1fr;
}

.group-block {
  margin-bottom: var(--space-xl);
}

.group-header {
  margin-bottom: var(--space-lg);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-line);
}

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-line), transparent);
  margin: var(--space-xl) 0;
}

.empty-state {
  text-align: center;
  color: var(--color-ink-soft);
}

/* Einfaches, responsives Karten-Raster.
   auto-fit + minmax = die Spaltenzahl passt sich automatisch der
   verfügbaren Breite an, ganz ohne Media Queries. */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 900px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .help-grid,
  .split-cta,
  .sponsor-showcase {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 720px) {
  .grid-2 ,
  .help-grid,
  .split-cta,
  .newsletter-box {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-collage {
    position: relative;
    display: block;
    min-height: 420px;
    padding: 0;
  }

  .hero-collage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: hero-fade 20s infinite;
    object-fit: cover;
  }

  .hero-collage .collage-square,
  .hero-collage .collage-landscape,
  .hero-collage .collage-portrait {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }

  .hero-collage img:nth-child(1) { animation-delay: 0s; }
  .hero-collage img:nth-child(2) { animation-delay: 4s; }
  .hero-collage img:nth-child(3) { animation-delay: 8s; }
  .hero-collage img:nth-child(4) { animation-delay: 12s; }
  .hero-collage img:nth-child(5) { animation-delay: 16s; }
}

@keyframes hero-fade {
  0%, 18% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0;
  }
}


/* --------------------------------------------------------------------------
   5. NAVIGATION (HEADER)
   Erscheint oben auf jeder Seite. Der aktuelle Menüpunkt bekommt die
   Klasse "is-active" (siehe HTML), damit Besucher:innen sehen, wo sie sind.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 251, 242, 0.9); /*var(--color-line); */
  backdrop-filter: blur(8px); /* leichter Weichzeichner-Effekt beim Scrollen */
  border-bottom: 2px solid var(--color-line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
}

.nav-logo span {
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-links a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover {
  color: var(--color-ink);
}

.nav-links a.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-yellow);
}

/* Mobiles Hamburger-Menü — standardmäßig versteckt, erscheint erst
   auf schmalen Bildschirmen (siehe Punkt 12, Responsive) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--color-ink);
}


/* --------------------------------------------------------------------------
   6. BUTTONS
   Zwei Varianten: "primary" (kräftiges Gelb, für Haupt-Aktionen wie
   "Jetzt spenden") und "ghost" (dezent, für Zweit-Aktionen).
   Komplett rund ("pill"), wie im Design-Wunsch gefordert.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px); /* kleiner "Anheben"-Effekt beim Hover */
}

.btn-primary {
  background-color: var(--color-yellow);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background-color: var(--color-yellow-deep);
  box-shadow: var(--shadow-hover);
}

.btn-secondary {
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  background-color: var(--color-petrol);
  color: var(--color-ink-);
  box-shadow: var(--shadow-soft);
}

.btn-secondary:hover {
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  background-color: var(--color-petrol-deep);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn-outline:hover {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

.btn-petrol {
  background-color: var(--color-petrol);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.btn-petrol:hover {
  background-color: var(--color-petrol-deep);
  box-shadow: var(--shadow-hover);
}

.btn-grid {
  margin-top: var(--space-lg);
}

.btn-grid a{
  margin: 0 var(--space-xs);
}

@media (max-width: 760px) {
  .btn-grid a {
    margin: var(--space-xs);
  }
}

/* --------------------------------------------------------------------------
   7. KARTEN ("CARDS")
   Das zentrale, wiederkehrende Gestaltungselement der Seite.
   Jede Karte ist leicht abgerundet und wirft einen weichen Schatten.
   Ein Teil der Karten ist minimal gedreht (rotate), damit die Reihe
   nicht wie ein starres Raster wirkt, sondern wie lose um einen Tisch
   verteilte Plätze — passend zum Namen "Salon" / "Table Captains".
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-card);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--color-line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-hover);
  z-index: 2;
}

.card h2, h3 {
  margin-bottom: var(--space-sm);
}

/* Karten bekommen beim Hover mehr Fokus statt einer Rotation. */
/* @media (min-width: 700px) {
  .card--tilt-left,
  .card--tilt-right {
    transform: translateY(0) scale(1);
  }

  .card--tilt-left:hover,
  .card--tilt-right:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--shadow-hover);
    z-index: 2;
  }
} */

/* Portrait-Karte für "Table Captains" (Table Captains) */
.person-card {
  text-align: center;
}

.person-avatar {
  width: 180px;
  height: 180px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-ink);
}

.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}

.event-portrait {
  margin-bottom: var(--space-md);
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--color-line);
  box-shadow: var(--shadow-soft);
  background-color: var(--color-bg-alt);
  aspect-ratio: 1 / 1;
}

.event-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.candidate-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.candidate-left-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.candidate-sidebar {
  background-color: var(--color-card);
  border: 2px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
}

.candidate-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: var(--space-md);
  border: 4px solid var(--color-primary-light);
}

.candidate-meta {
  display: grid;
  gap: var(--space-sm);
}

.candidate-meta .meta-item {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
}

.candidate-meta .meta-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-petrol);
  margin-bottom: 0.25rem;
}

.candidate-content {
  background-color: var(--color-card);
  border: 2px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-soft);
}

.candidate-content .full-text {
  font-size: 1.05rem;
  color: var(--color-ink-soft);
  max-width: 70ch;
}

.candidate-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.candidate-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-alt);
  color: var(--color-petrol);
  font-weight: 600;
}

/* Icon sizing: constrain SVGs to 1.5em of the surrounding text height
   Use inline-flex containers so percentage-like sizing works reliably across elements. */
.icon {
  display: inline-block;
  height: 1.5em; /* 1.5em of the current font-size */
  width: auto;
  vertical-align: middle;
}

/* Ensure tags with icons align nicely and the icon doesn't force line-height.
   Tag links and portrait links size to their text content dynamically. */
.tags .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.candidate-links a {
  /* allow link width to match its text content and keep icon aligned */
  padding: 0.45rem 0.75rem;
  flex: 0 0 auto;
}

@media (max-width: 800px) {
  .candidate-layout {
    grid-template-columns: 1fr;
  }
}

.person-table {
  /* zeigt die Tischnummer — trägt eine echte Information (welcher
     Tisch beim Event), deshalb sinnvoll als kleines Label */
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-petrol);
  background-color: var(--color-bg-alt);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* Event-Karte für den Eventkalender */
.event-card {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.detail-list {
  display: grid;
  gap: var(--space-md);
}

.detail-card {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.detail-card h3 {
  margin-bottom: 0.35rem;
  font-size: 1.1rem;
}

.sponsor-section {
  margin-top: var(--space-lg);
  width: 100%;
  background-color: var(--color-card);
  border: 2px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
}

.sponsor-grid {
  display: grid;
  /* align-items: center; */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.sponsor-card {
  display: flex;
  align-items: center;
  justify-content: center;
  /*min-height: 88px;*/
  padding: var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sponsor-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.sponsor-card img {
  display: block;
  max-width: 65%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 720px) {
  .sponsor-grid {
    grid-template-columns: 1fr;
  }
}

.event-date {
  flex-shrink: 0;
  width: 68px;
  text-align: center;
  background-color: var(--color-yellow);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) 0;
}

.event-date .day {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}

.event-date .month {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Spenden-Karte (z. B. "10 €", "25 €" Auswahl-Buttons) */
.donation-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.donation-amount {
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-line);
  font-weight: 600;
  background-color: var(--color-card);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.donation-amount:hover,
.donation-amount.is-selected {
  border-color: var(--color-yellow);
  background-color: var(--color-bg-alt);
}


/* --------------------------------------------------------------------------
   8. HERO-BEREICH
   Der große Aufmacher-Block ganz oben auf jeder Seite.
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (max-width: 800px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.hero-actions {
  display: flex;
  /* justify-content: center; */
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Das "Tischdeko"-Signature-Element: konzentrische Kreise, angelehnt an
   ein von oben fotografiertes Tischgedeck — passend zum Salon-Thema.
   Wird als reines SVG direkt im HTML eingebettet (siehe Seiten). */
.hero-motif {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-motif svg {
  width: 100%;
  max-width: 380px;
  height: auto;
}


/* --------------------------------------------------------------------------
   9. FORMULARE
   Für z. B. das Spenden-Formular oder die Newsletter-Anmeldung.
   -------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 460px;
}

.form label {
  font-size: 0.9rem;
  font-weight: 600;
}

.form input,
.form select,
.form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-line);
  background-color: var(--color-card);
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--color-petrol);
  outline: none;
}

.form-row {
  display: flex;
  gap: var(--space-sm);
}

.form-row > * {
  flex: 1;
}


/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-ink);
  color: var(--color-bg);
  padding-block: var(--space-xl) var(--space-lg);
  /* margin-top: var(--space-2xl); */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-yellow);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-grid a {
  display: block;
  color: #D8D2C4;
  padding-block: 4px;
  transition: color 0.2s ease;
}

.footer-grid a:hover {
  color: var(--color-yellow);
}

.footer-grid p {
  display: block;
  color: #D8D2C4;
  padding-block: 4px;
  transition: color 0.2s ease;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-md);
  font-size: 0.85rem;
  color: #B8B0A0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}


/* --------------------------------------------------------------------------
   11. KLEINE BAUSTEINE
   -------------------------------------------------------------------------- */

/* Badge = kleines rundes Etikett, z. B. Kategorie eines Events */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-alt);
  color: var(--color-petrol);
  margin-bottom: var(--space-sm);
}

/* Zitat, z. B. Erfahrungsbericht auf der Community-Seite */
.quote {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  border-left: 4px solid var(--color-yellow);
  padding-left: var(--space-md);
  margin-bottom: var(--space-md);
}

.quote-card {
  padding: var(--space-lg);
}

.about-person-card {
  padding: var(--space-md);
}

/* Statistik-Block, z. B. "1.240 Ehrenamtliche" auf der Startseite */
.stat {
  text-align: center;
}

.stat .stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--color-petrol);
}

.stat .stat-label {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

/* Fortschrittsbalken für Spendenziele */
.progress-bar {
  width: 100%;
  height: 10px;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-block: var(--space-xs);
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-yellow);
  border-radius: var(--radius-pill);
}


/* --------------------------------------------------------------------------
   12. RESPONSIVE / MOBILE ANPASSUNGEN
   Alles unterhalb von 760px Breite (typisches Smartphone-Format).
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-sm) var(--space-md) 0;
    border-top: 2px solid var(--color-line);
    border-bottom: 2px solid var(--color-line);
    display: none; /* wird per JavaScript ein-/ausgeblendet, siehe main.js */
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    display: block;
    width: 100%;
    font-size: 1.4rem;
    padding: 0.8rem 0 0.35rem;
    color: var(--color-ink-soft);
    transition: color 0.2s ease;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 2px solid var(--color-line);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links a.is-active {
    color: var(--color-ink);
    font-weight: 700;
    border-bottom: 2px solid var(--color-yellow);
    /* padding-bottom: 0.25rem; */
  }

  .nav-toggle {
    display: flex; /* Hamburger-Icon nur mobil sichtbar */
  }

  .event-card {
    flex-direction: column;
  }
}