/* ===============================
   Palette 2: Hanseatisch Frisch
   =============================== */
:root{
  /* Neutrale */
  --bg: #F2E9DD;           /* Sand – Seitenhintergrund */
  --surface: #FFFFFF;      /* Flächen/Karten/Nav-Hintergrund */
  --text: #2F2F2F;         /* Kohle – Fließtext */
  --muted: #6B7280;        /* Sekundärtext */
  --border: #E7DFD4;       /* Sand-hell für Linien */

  /* Marke */
  --primary: #085E6B;      /* Tiefteal – Headlines, Links, Nav */
  --primary-contrast: #FFFFFF;
  --secondary: #6E9E6C;    /* Reed-Grün – Badges, positive States */
  --accent: #B6373C;       /* Backstein – CTA/Akzent sparsam einsetzen */
  --accent-contrast: #FFFFFF;

  /* Interaktion */
  --link: var(--primary);
  --link-hover: #0B7481;   /* heller/blauer Hover auf Teal */
  --focus: #FFBF47;        /* gut sichtbarer Fokus */
}

/* ===============================
   Basis & Lesbarkeit
   =============================== */
html { font-size: 100%; height: 100%;} /* 16px Basis */
body{ height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* großzügiger Weißraum auf breiten Screens */

    min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header, .bilder, .content{ flex: 0 0 auto; }
footer{ margin-top: 60px; }

/* Optional: beschränke Fließtextbreite für bessere Zeilenlänge */
.inhalt, .prose { max-width: 100ch;
  margin: auto; }

/* ===============================
   Überschriften (flüssige Skalierung)
   =============================== */
h1, h2, h3, h4, h5, h6{
  color: var(--primary);
  line-height: 1.25;
  font-weight: 700;
  margin: 1.25em 0 .4em;
}
h1{ font-size: clamp(1.875rem, 2.2vw + 1.3rem, 2.75rem); }
h2{ font-size: clamp(1.5rem, 1.5vw + 1.1rem, 2rem); }
h3{ font-size: clamp(1.25rem, 1.1vw + 1rem, 1.5rem); }
h4{ font-size: 1.125rem; }
h5{ font-size: 1rem; }
h6{ font-size: .95rem; color: var(--muted); }

/* Abstand nach Überschrift zum ersten Absatz etwas vergrößern */
h1 + p, h2 + p, h3 + p { margin-top: .25em; }

/* ===============================
   Fließtext, Fett, Zitat
   =============================== */
p{ margin: 0 0 1rem; }
strong, b{ font-weight: 700; color: var(--text); }
em, i{ font-style: italic; }

blockquote{
  margin: 1.25rem 0;
  padding: .75rem 1rem;
  background: var(--surface);
  border-left: 4px solid var(--secondary);
  color: var(--text);
}

/* ===============================
   Listen
   =============================== */
ul, ol{ margin: 0 0 1rem 1.25rem; }
li{ margin: .25rem 0; }
ul{ list-style: disc; }
ol{ list-style: decimal; }

/* ===============================
   Links (gut erkennbar, barrierearm)
   =============================== */
a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .12em;
  text-decoration-thickness: 1.5px;
}
a:hover, a:focus{
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}
a:active{ color: var(--accent); }

/* Optional: besuchte Links etwas gedämpft, aber noch gut lesbar */
a:visited{ color: color-mix(in srgb, var(--link) 70%, #6b6b6b); }

/* Fokus sichtbar – wichtig für Tastaturnutzer */
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===============================
   Trenner, Tabellen, Bilder, Code
   =============================== */
hr{
  border: 0;
  border-top: 4px solid var(--accent);
  margin: 2rem 0;
}
table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: var(--surface);
}
th, td{
  padding: .6rem .75rem;
  border: 1px solid var(--border);
}
th{
  background: #F3F4F6; /* sanfte Kopfzeile */
  text-align: left;
}
img{ max-width: 100%; height: auto; }

/* Inline-Code/Pre */
code, kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  background: #F3F4F6;
  border: 1px solid var(--border);
  border-radius: .35rem;
  padding: .1rem .35rem;
}
pre{
  overflow: auto;
  padding: .75rem 1rem;
  background: #0b1220;
  color: #E6EDF3;
  border-radius: .5rem;
}
pre code{ background: transparent; border: 0; padding: 0; color: inherit; }

/* ===============================
   Feinheiten
   =============================== */
small{ color: var(--muted); }
.lead{ font-size: 1.125rem; line-height: 1.7; color: var(--text); }

/* Reduziert Animationen respektieren */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

.active > .page-link, .page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: #B6373C;
  border-color: #B6373C;
}

/* =========================
   Buttons (Palette 1)
   ========================= */
.btn{
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
  --btn-bd: var(--accent);
  --btn-shadow: 0 6px 14px rgba(0,0,0,.08);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  min-height: 44px;                /* gute Touch-Zielgröße */
  padding: .625rem 1rem;
  border-radius: .65rem;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg !important);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;

  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
  box-shadow: var(--btn-shadow);
}

/* Hover: leicht anheben + etwas heller */
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Active: wieder „einschnappen“ */
.btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.1);
}

.btn:visited,
a.btn:visited{
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-color: var(--btn-bd);
  text-decoration: none;
}

/* Tastaturfokus gut sichtbar */
.btn:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Disabled-Zustand */
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== Varianten ===== */

/* Primär: Akzent-Rot */
.btn--primary{
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
  --btn-bd: var(--accent);
}
.btn--primary:hover{
  /* minimal heller – statt Neon */
  --btn-bg: color-mix(in srgb, var(--accent) 92%, white 8%);
}

/* Sekundär: Outline in Marine */
.btn--secondary{
  --btn-bg: var(--surface);
  --btn-fg: var(--primary);
  --btn-bd: var(--primary);
  --btn-shadow: none;
}
.btn--secondary:hover{
  --btn-bg: color-mix(in srgb, var(--primary) 10%, var(--surface) 90%);
}

/* Ghost: nur Text auf neutraler Fläche */
.btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--primary);
  --btn-bd: transparent;
  --btn-shadow: none;
}
.btn--ghost:hover{
  --btn-bg: color-mix(in srgb, var(--primary) 8%, var(--surface) 92%);
}

/* Größe: kompakt & groß */
.btn--sm{ padding: .45rem .75rem; min-height: 36px; border-radius: .55rem; font-weight: 600; }
.btn--lg{ padding: .8rem 1.15rem; min-height: 48px; border-radius: .8rem; font-weight: 700; }

/* Icon-Helfer (SVG o.ä.) */
.btn .icon{ width: 1.1em; height: 1.1em; line-height: 0; }
.btn .icon-left{ margin-right: .4rem; }
.btn .icon-right{ margin-left: .4rem; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
  .btn:hover, .btn:active{ transform: none; }
}

/* ===== Site Header – klassisch, mittig, sticky ===== */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1030;
}

/* Inhalt mittig auf ~1200px begrenzen */
.site-header__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(.6rem, 1.2vw, 1rem) clamp(16px, 3vw, 24px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}

/* Logo größer */
.site-header .logo img{
  max-height: clamp(56px, 6.5vw, 84px);
  width: auto; height: auto; display: block;
}

/* Navigation rechts ausrichten */
.site-header .hauptmenu{
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* ===== Desktop Nav größer & luftiger ===== */
@media (min-width: 901px){
  .site-header .main-nav .menu.level-1{
    gap: clamp(1.25rem, 1.8vw, 2rem);
  }
  .site-header .main-nav .menu.level-1 > li > a{
    font-size: clamp(1rem, .25vw + 1rem, 1.125rem); /* ≈ 16–18px */
    padding-block: .9rem; /* mehr Höhe */
  }
}

/* ===== Mobile: Logo links, Burger rechts; Menü klappt darunter ===== */
@media (max-width: 900px){
  .site-header__inner{ padding-block: .5rem; }
  .site-header .main-nav{
    display: flex; align-items: center; gap: .5rem; width: 100%;
  }
  .site-header .main-nav .nav-mobile{ margin-left: auto; } /* Burger rechts */
  .site-header .main-nav #mainmenu{
    width: 100%;
  }
  .site-header .main-nav.is-open #mainmenu{
    margin-top: .5rem; padding-top: .25rem; border-top: 1px solid var(--border);
  }
  /* Mobile Linkgröße leicht größer für Tap-Ziele */
  .site-header .main-nav .menu.level-1 > li > a{
    font-size: 1.0625rem; /* ≈ 17px */
  }
}

/* TYPO3 kann <p> um den Burger setzen – neutralisieren */
.site-header .main-nav .nav-mobile p{ margin: 0; }

/* === Header-Tuning: weniger Außen-Padding, größere Elemente === */

/* 1) Innenabstände im Header reduzieren (links/rechts + oben/unten) */
.site-header__inner{
  /* vorher: padding-block: clamp(.6rem,1.2vw,1rem); padding-inline: clamp(16px,3vw,24px) */
  padding-block: clamp(.35rem, .7vw, .7rem);
  padding-inline: clamp(12px, 2vw, 18px);
  gap: clamp(10px, 1.4vw, 18px); /* etwas kompakter zwischen Logo/Nav */
}

/* 2) Logo spürbar größer anzeigen */
.site-header .logo img{
  /* vorher: clamp(56px, 6.5vw, 84px) */
  max-height: clamp(68px, 7.5vw, 96px);
}

/* 3) Desktop-Navigation größer & luftige Zeilenhöhe */
@media (min-width: 901px){
  .site-header .main-nav .menu.level-1{
    /* leicht enger als zuvor, damit mehr Text reinpasst */
    gap: clamp(1rem, 1.5vw, 1.75rem);
  }
  .site-header .main-nav .menu.level-1 > li > a{
    /* vorher ~16–18px → jetzt ~17–20px */
    font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.25rem);
    line-height: 1.2;
    padding-block: 1rem; /* etwas höher für Präsenz, bleibt gut klickbar */
    font-weight: 600;
  }
}

/* 4) Mobile: Schrift einen Tick größer, trotzdem kompakt */
@media (max-width: 900px){
  .site-header__inner{ padding-block: .45rem; padding-inline: 12px; }
  .site-header .main-nav .menu.level-1 > li > a{
    font-size: 1.1rem;        /* ≈ 17.6px */
    padding-block: .9rem;     /* Tap-Ziel ~44px bleibt gewahrt */
  }
}

.hero{
  position: relative;
  color: var(--primary-contrast);
  background: var(--surface) center/cover no-repeat;
  /* ersetze URL durch dein Bild: */
  background-image: url("/fileadmin/img/header/landfrauen-Vorstand-team.jpeg");
  min-height: clamp(360px, 60vh, 680px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

/* Lesbarkeit: sanfter Verlauf über dem Bild */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.20) 45%,
    rgba(0,0,0,.45) 100%);
}

.hero__inner{ position: relative; z-index: 1; padding: 0 1rem; max-width: 60ch; }
.hero__inner h1{ color:#fff; font-size: clamp(2rem, 3vw + 1rem, 3rem); margin: 0 0 .5rem; }
.hero__inner .lead{ color: #f4f7fb; margin: 0 0 1rem; }

/* Button nutzt deine existierenden .btn-Styles */
.hero .btn{ font-size: 1.0625rem; }

/* Parallax-Effekt: Bild „steht“, Inhalt scrollt (nur Desktop) */
@media (min-width: 992px){
  .hero--fixed{ background-attachment: fixed; }
}

/* iOS/Safari-Fallback: fixed ist dort oft deaktiviert → normal scrollen */
@supports (-webkit-touch-callout: none){
  .hero--fixed{ background-attachment: scroll; }
}

/* Wellenabschluss unten */
.hero__wave{
  position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  line-height:0; height: 80px;
}
.hero__wave svg{ width:100%; height:100%; display:block; }
.hero__wave path{
  fill: var(--bg);               /* lässt die Welle in deinen Seitenhintergrund „auslaufen“ */
}

/* Optional: schmalere Seiten mit Container */
.site-header + .hero{ margin-top: 0; }

/* Hero full-bleed über die komplette Viewportbreite,
   auch wenn er innerhalb eines zentrierten Containers liegt */
.hero--bleed{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Inhalt weiter im Lesebereich halten */
.hero__inner{
  max-width: 1200px;      /* passend zu deinem Header */
  margin: 0 auto;
  padding-inline: clamp(16px, 3vw, 24px);
}

/* Welle bleibt automatisch full-width mit dem Hero */
.hero__wave{ height: 80px; }
.hero__wave path{ fill: var(--bg); }

/* Optional: hochauflösendes Hintergrundbild (gleiche URL anpassen) */
.hero{
  /* Fallback */
  background-image: url("/fileadmin/img/header/landfrauen-Vorstand-team.jpeg");
  /* Retina/4K – lädt automatisch, wenn verfügbar */
  background-image: image-set(
    url("/fileadmin/img/header/landfrauen-Vorstand-team.jpeg") 1x,
    url("/fileadmin/img/header/landfrauen-Vorstand-team.jpeg") 2x
  );
}

/* Bild immer auf volle Browserbreite, ohne Beschnitt */
.hero--fitwidth{
  /* Stelle sicher, dass die Containerhöhe vom Bildverhältnis kommt,
     nicht von einer min-height: wir überschreiben also die alte Höhe */
  min-height: 0;
  /* Hintergrund füllt die Breite, Höhe richtet sich nach dem Bildverhältnis */
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;

  /* Höhe = Breite / Seitenverhältnis (frei wählbar) */
  /* Setze dein Bildverhältnis hier – Beispiel: 2400x1000 = 12/5 */
  --hero-ratio: 16/9;
  aspect-ratio: var(--hero-ratio);
}

/* Parallax bleibt wie gehabt (Desktop); iOS-Fallback weiter aktiv */
@media (min-width: 992px){
  .hero--fixed.hero--fitwidth{ background-attachment: fixed; }
}
@supports (-webkit-touch-callout: none){
  .hero--fixed.hero--fitwidth{ background-attachment: scroll; }
}

/* Full-bleed Korrektur (falls Container zentriert ist) – schon vorhanden,
   hier nur sicherstellen, dass kein horizontaler Scroll entsteht */
.hero--bleed{ overflow: hidden; }

/* =========================
   Kacheln Startseite
   ========================= */
   .kacheln {margin: 60px 0;}
.row.kacheln{
  --tile-bg: var(--surface);
  --tile-bd: var(--border);
  --tile-radius: 14px;
  --tile-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Spalten als Flex, damit die Kachel volle Höhe bekommt */
.row.kacheln .ce-col{
  display: flex;
}

/* eigentliche Kachel (dein inneres .frame) */
.row.kacheln .ce-col > .frame.frame-type-text{
  background: var(--tile-bg);
  border: 1px solid var(--tile-bd);
  border-radius: var(--tile-radius);
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow: var(--tile-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Hover: dezenter Lift + leicht betonte Rahmenfarbe */
.row.kacheln .ce-col > .frame.frame-type-text:hover{
  border-color: color-mix(in srgb, var(--primary) 35%, var(--tile-bd) 65%);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* Tastaturfokus sichtbar */
.row.kacheln .ce-col > .frame.frame-type-text:focus-within{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Typo in den Kacheln */
.row.kacheln .frame.frame-type-text header{ margin-bottom: .5rem; }
.row.kacheln .frame.frame-type-text h2{
  margin: 0 0 .25rem;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
  color: var(--primary);
}
.row.kacheln .frame.frame-type-text p{
  margin: 0 0 .75rem;
  color: var(--text);
}

/* gleiche Höhe in allen Spalten */
.row.kacheln .ce-col .frame.frame-type-text{ height: 100%; }

.row.kacheln ul {margin: 0 0 1rem 0; padding-left: 1rem;}

/* News **/
.news img {border-radius: 8px; margin-top: 8px;}

/* Bewegungen reduzieren respektieren */
@media (prefers-reduced-motion: reduce){
  .row.kacheln .ce-col > .frame.frame-type-text{ transition: none; }
  .row.kacheln .ce-col > .frame.frame-type-text:hover{ transform: none; }
}

.inhalt {  padding-inline: min(3vw, 24px);}

.footer {max-width: 100ch;
  margin: auto;
  padding: 20px 0;}

/* ===== Frame-Abschnitt mit weißem Hintergrund ===== */
.frame-layout-1 {
  /* Vollbreit weißer Hintergrund */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  background: #fff;
  padding-block: clamp(24px, 3vw, 48px);

  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);

  z-index: 0;
}

/* Inhalt innerhalb mittig begrenzen */
.frame-layout-1 > * {
  max-width: 1200px;           /* an deine Seitenbreite anpassen */
  margin-inline: auto;
  padding-inline: clamp(16px, 2.5vw, 32px);
}

/* ===== Bilder allgemein (alle im Content-Bereich) ===== */
.content .ce-image img,
.content .ce-gallery img,
.content .ce-textpic img,
.content .frame-layout-1 img {
  display: block;
  max-width: 100%;
  height: auto;

  border-radius: 12px;                 /* runde Ecken */
  border: 1px solid rgba(0,0,0,0.08);  /* feiner Rahmen */
  box-shadow: 0 6px 24px rgba(0,0,0,0.08),
              0 1px 0 rgba(0,0,0,0.04);
}

/* Bildunterschriften einheitlich */
.ce-caption {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: rgba(0,0,0,0.68);
  margin-top: 8px;
}

label {display:none; visibility:hidden;}
.form-group {margin-bottom: 6px;}

  /* ===== Footer – Hanseatisch Frisch ===== */
footer{
  --footer-bg: color-mix(in srgb, var(--primary) 92%, black 8%); /* etwas dunkler als Header/Nav */
  --footer-text: #FFFFFF;
  --footer-link: #FFFFFF;
  --footer-link-hover: var(--secondary);  /* Elb-Blau */
  --footer-border: color-mix(in srgb, var(--accent) 65%, #ffffff 35%); /* zarter Hamburg-Rot Akzent */
  background: var(--footer-bg);
  color: var(--footer-text);
}

/* dein inneres Wrapper-Div .footer */
footer .footer{
  padding: clamp(20px, 3vw, 36px) 0;
  border-top: 4px solid var(--footer-border);
}

/* Bootstrap-Zeile im Footer */
footer .row.foot{
  row-gap: 18px;
}

/* Typo im Footer */
footer h2, footer h3, footer h4{
  color: var(--footer-text);
  font-weight: 700;
  font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem);
  margin: 0 0 .5rem;
}
footer p{ margin: 0 0 .5rem; color: var(--footer-text); }

/* Links gut sichtbar */
footer a, footer a:visited{
  color: var(--footer-link) !important;
  text-decoration: underline;
  text-underline-offset: .12em;
  text-decoration-thickness: 1.5px;
}
footer a:hover, footer a:focus{
  color: var(--footer-link-hover);
  text-decoration-thickness: 2px;
}

/* Social-Icons optisch vereinheitlichen */
footer .image-embed-item{
  display: inline-block;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  padding: 6px;
  object-fit: contain;
  transition: transform .15s ease, background-color .2s ease, filter .2s ease;
}
footer a:hover .image-embed-item,
footer a:focus .image-embed-item{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
  filter: saturate(1.1);
}

/* Fokus sichtbar */
footer a:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Abstand oben/unten bei sehr kleinen Höhen */
@media (max-height: 620px){
  footer .footer{ padding: 16px 0; }
}