/* ====== Charlsten Light Theme (Clean Slate + Cyan) ====== */
:root{
  /* Farben (AA-Kontrast geprüft) */
  --bg:#ffffff;           /* Seitenhintergrund */
  --surface:#ffffff;      /* Karten/Paneele */
  --surface-2:#f8fafc;    /* leichte Abstufung */
  --fg:#0f172a;           /* Text dunkel */
  --muted:#475569;        /* Sekundärtext */
  --accent:#0ea5e9;       /* Cyan Akzent */
  --accent-2:#0284c7;     /* dunkleres Cyan Hover */
  --border:#e2e8f0;       /* zarte Rahmenlinie */
  --shade:#e5e7eb;        /* Trennlinie */

  --r-xl:22px; --r-lg:16px; --r-md:12px; --r-sm:8px;
  --shadow:0 10px 30px rgba(2,6,23,.06);

  /* Fluid Type (für mobile Lesbarkeit) */
  --fs-hero: clamp(1.9rem, 2.6vw, 2.8rem);
  --fs-h2:   clamp(1.4rem, 2vw, 1.8rem);
  --fs-h3:   clamp(1.05rem,1.4vw,1.2rem);
  --fs-body: clamp(0.98rem, 0.9vw, 1.05rem);
}
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
  font-size: var(--fs-body);
  scroll-behavior:smooth;
  scroll-padding-top: 84px; /* Sticky-Header Ausgleich */
}
img{ max-width:100%; height:auto; display:block }

/* Fokus sichtbar */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Links & Buttons */
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-2); }
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  background:linear-gradient(180deg, var(--accent), #07a4d6);
  color:#052439; font-weight:700; letter-spacing:.2px; border:0;
  box-shadow:0 6px 18px rgba(14,165,233,.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(14,165,233,.35); }
.btn:active{ transform:translateY(0); opacity:.9; }
.btn-secondary{
  background:transparent; color:var(--fg); border:1px solid var(--border);
}
.btn-secondary:hover{ background:var(--surface-2); }

/* Layout */
.container{ width:min(1200px, 92%); margin-inline:auto; }
.site-content{ padding:32px 0 64px }

/* Header & Navigation */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--shade);
}
.site-header .header-inner{
  width:min(1200px, 92%);
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0;
}

/* Logo */
.brand img{
  height:clamp(42px, 6.5vh, 72px);
  width:auto;
}

/* Navigation (Desktop-Default) */
.main-nav{ flex:0 0 auto; }
.main-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:6px; align-items:center;
  justify-content:flex-start;
  inline-size:max-content;
  width:-moz-fit-content; width:fit-content;
}
.main-nav a{
  padding:10px 12px; border-radius:10px; color:var(--fg); font-weight:600; line-height:1;
  min-height:44px; display:flex; align-items:center;
  white-space:nowrap;
}
.main-nav a.active, .main-nav a:hover{ background:var(--surface-2); }

/* Dropdowns */
.has-sub{ position:relative }
.has-sub .sub{
  position:absolute; display:none; top:100%; left:0; background:#ffffff; border:1px solid var(--border);
  border-radius:12px; padding:8px; min-width:220px; box-shadow:var(--shadow);
}
.has-sub .sub li a{ display:block; padding:10px 12px; border-radius:10px; white-space:normal; }
.has-sub .sub li a:hover{ background:var(--surface-2); }

/* Nur auf Desktop per Hover öffnen */
@media (min-width: 901px){
  .has-sub:hover .sub{ display:block; }
  .has-sub:focus-within .sub{ display:block; }
}

/* Burger-Toggle */
#nav-toggle{ display:none }
.nav-toggle-label{
  display:none; width:44px; height:44px; border-radius:10px;
  border:1px solid var(--border); align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle-label::before{
  content:""; width:20px; height:2px; background:var(--fg); position:relative; box-shadow:0 6px 0 0 var(--fg), 0 -6px 0 0 var(--fg);
}

/* Hero */
.hero{ display:grid; grid-template-columns: 1.15fr 1fr; gap:28px; align-items:center; padding:26px 0 8px }
.hero h1{ font-size:var(--fs-hero); margin:0 0 10px; line-height:1.15 }
.lead{ color:var(--muted); font-size:1.08rem; max-width:68ch }

/* Sections, Cards, Grids */
section + section{ margin-top:28px }
.grid{ display:grid; gap:20px }
.grid.cols-2{ grid-template-columns:1.1fr .9fr }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr) }
.card{
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:18px;
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(2,6,23,.08); }
.card h3{ margin-top:10px }

/* Content typography */
h2{ font-size:var(--fs-h2); margin:8px 0 12px }
h3{ font-size:var(--fs-h3); margin:8px 0 8px }
.lead-strong{ font-weight:600; color:var(--fg) }
p{ line-height:1.65; }

/* Lists */
ul.check{ padding-left:1.1rem }
ul.check li{ margin:6px 0; list-style:square; color:var(--fg) }

/* Footer */
.site-footer{ margin-top:28px; border-top:1px solid var(--shade); background:#f9fafb; }
.footer-grid{ display:grid; gap:24px; grid-template-columns: repeat(3, 1fr); padding:24px 0; }
.footer-bottom{ border-top:1px solid var(--shade); padding:12px 0 24px; color:var(--muted) }

/* Utilities */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }
.rounded{ border-radius:16px }

/* ===== Responsive ===== */

/* Tablet */
@media (max-width: 1024px){
  .grid.cols-3{ grid-template-columns: repeat(2, 1fr) }
}

/* Kleine Laptops / große Tablets */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
  .grid.cols-3{ grid-template-columns:1fr; }
  .grid.cols-2{ grid-template-columns:1fr; }
}

/* Mobile */
@media (max-width: 768px){
  .site-header .header-inner{ padding:10px 0 }

  /* Burger sichtbar */
  .nav-toggle-label{ display:inline-flex }

  /* NAV als Drawer standardmäßig ZU, per Checkbox AUF */
  .main-nav{ position: relative; }
  .main-nav ul{
    flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(255,255,255,.97);
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px;
    box-shadow:var(--shadow);
    position:absolute; top:calc(100% + 8px); right:0; left:auto;
    width: clamp(260px, 88vw, 340px); max-width:92vw;
    display:none; /* zu */
    z-index:1000;
  }
  #nav-toggle:checked ~ nav .main-nav ul{ display:flex; } /* auf */
  /* ARIA Alternative */
  .main-nav[aria-expanded="true"] ul{ display:flex; }
  .main-nav[aria-expanded="false"] ul{ display:none; }

  .main-nav a{ padding:12px 14px; min-height:46px; }

  /* Submenü mobil: standardmäßig ZU, per eigenem Toggle AUF */
  .has-sub{
    position:relative;
    display:grid;
    grid-template-columns: 1fr auto;  /* Link links, Toggle rechts */
    align-items:center;
  }
  .has-sub > a{ padding-right:6px; }

  /* mobiler Sub-Toggle Button (Pfeil) */
  .sub-toggle-label{
    display:inline-flex; width:40px; height:40px; margin-left:8px;
    border:1px solid var(--border); border-radius:10px; cursor:pointer;
    align-items:center; justify-content:center;
    background:var(--surface);
  }
  .sub-toggle-label::before{
    content:""; width:10px; height:10px;
    border-right:2px solid var(--fg); border-bottom:2px solid var(--fg);
    transform: rotate(45deg); transition: transform .15s ease;
  }
  .sub-toggle:checked + .sub-toggle-label::before{ transform: rotate(-135deg); }

  /* Submenü selbst */
  .has-sub .sub{
    position:static; display:none; /* ZU */
    border:0; box-shadow:none; background:transparent;
    padding:6px 6px 6px 10px;
    grid-column:1 / -1; /* volle Breite unter dem Listeneintrag */
  }
  .sub-toggle:checked ~ .sub{ display:block; } /* AUF */

  /* Footer stapeln */
  .footer-grid{ grid-template-columns:1fr; }
}

/* Very small phones */
@media (max-width: 480px){
  .container{ width:min(100%, 92%); }
  .brand img{ height:44px }
  .hero{ gap:16px }
  .card{ padding:14px }
}

/* Touch-Optimierung */
@media (hover:none) and (pointer:coarse){
  .main-nav a{ min-height:48px; }
}

/* Einheitliche Bildhöhe in Karten */
.card-img-fixed {
  width: 100%;
  height: 220px;   /* gewünschte feste Höhe */
  object-fit: cover;
  border-radius: var(--r-md);
}

/* Einheitliche Höhe für Kategorie-Bilder auf der Startseite */
.card img,
.hero figure img {
  height: 220px;       /* einheitliche Höhe, kannst du anpassen */
  object-fit: cover;   /* schneidet gleichmäßig zu, verzerrt nicht */
  width: 100%;         /* volle Kartenbreite */
  border-radius: var(--r-lg);
}