@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  img, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  button { font: inherit; color: inherit; cursor: pointer; }
  summary { cursor: pointer; }
}

@layer tokens {
  :root {
    --white: #fff;
    --snow: #f3f6f9;
    --ink: #101820;
    --ink-soft: #4a5560;
    --line: #dde3ea;
    --red: #e3202a;
    --red-ink: #c4161f;
    --yellow: #ffc933;
    --blue: #0a5a96;
    --navy: #0c2236;
    --font-head: "Bricolage Grotesque", system-ui, sans-serif;
    --font-body: "Inter", system-ui, "Segoe UI", sans-serif;
    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.94rem);
    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
    --step-3: clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);
    --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem;
    --radius: 1.5rem;
    --wrap: 74rem;
    --gutter: 1.25rem;
  }
  @media (min-width: 48em) { :root { --gutter: 2.5rem; } }
}

@layer base {
  body {
    min-height: 100dvh; display: flex; flex-direction: column;
    background: var(--white); color: var(--ink);
    font: 400 var(--step-0)/1.7 var(--font-body);
    font-feature-settings: "cv11", "ss03";   /* einstöckiges a, runde Formen */
  }
  main { flex: 1; }
  h1, h2, h3 { font-family: var(--font-head); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
  h3 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.015em; }
  a { color: var(--red-ink); text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
  a:hover { color: var(--ink); }
  :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--yellow); color: var(--ink); }
  .skip-link {
    position: absolute; left: var(--space-2); top: -4rem; z-index: 100;
    background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: .5rem;
  }
  .skip-link:focus { top: var(--space-1); color: #fff; }
  .icon { width: 1.25em; height: 1.25em; flex: none; }
}

@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .page { padding-block: var(--space-4) var(--space-6); }
  .page-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 52rem; }
  .page-head .lead { color: var(--ink-soft); font-size: var(--step-1); max-width: 40ch; }
  .section { padding-block: var(--space-5); }
  .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
  .section-title { margin-bottom: var(--space-3); }
  .section-head .section-title { margin-bottom: 0; }

  .site-header { background: rgb(255 255 255 / .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
  .header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: .5rem; }
  .brand img { height: 3.25rem; width: auto; }
  @media (min-width: 64em) { .brand img { height: 4.5rem; } }

  .site-footer { position: relative; background: var(--snow); color: var(--ink-soft); margin-top: auto; padding-top: var(--space-5); font-size: var(--step--1); }
  .site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--red) 0 33.3%, var(--yellow) 0 66.6%, var(--blue) 0); }
  .site-footer a { color: var(--ink); }
  .site-footer a:hover { color: var(--red-ink); }
  .footer-grid { display: grid; gap: var(--space-4); }
  @media (min-width: 48em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  .site-footer h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: var(--space-1); color: var(--ink); }
  .site-footer h2.footer-name { font-size: var(--step-1); max-width: 14ch; }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
  .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-top: var(--space-4); padding-block: var(--space-2) var(--space-3); border-top: 1px solid var(--line); color: var(--ink-soft); }
  .site-footer .credit { color: var(--ink-soft); text-decoration: none; }
  .site-footer .credit:hover { color: var(--red-ink); text-decoration: underline; }
}

@layer components {
  /* ---- Navigation ---- */
  .menu-btn {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .4rem 1.1rem;
    background: var(--ink); color: #fff; border: 0; border-radius: 999px; font-weight: 600;
  }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 1.2rem; height: 2px; background: currentColor; border-radius: 2px; }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }

  .site-nav {
    inset: 0 0 0 auto; width: min(24rem, 100%); height: 100dvh; margin: 0; padding: 4.5rem var(--space-3) var(--space-4);
    border: 0; background: #fff; color: var(--ink); overflow-y: auto;
  }
  .site-nav::backdrop { background: rgb(16 24 32 / .6); }
  .menu-close {
    position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
    background: var(--snow); font-size: 1.75rem; line-height: 1;
  }
  .nav-list { list-style: none; padding: 0; display: grid; gap: .25rem; }
  .nav-link {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3rem; padding: .5rem .85rem;
    border-radius: .75rem; color: var(--ink); font-weight: 600; text-decoration: none; list-style: none;
  }
  .nav-link::-webkit-details-marker { display: none; }
  .nav-link:hover { background: var(--snow); color: var(--ink); }
  .nav-item.is-current > .nav-link, .nav-item.is-current > details > .nav-link { color: var(--red-ink); }
  .nav-group[open] > .nav-link .icon { transform: rotate(180deg); }
  .nav-sub { list-style: none; padding: 0 0 .5rem .85rem; display: grid; }
  .nav-sub a { display: block; padding: .55rem .85rem; border-radius: .6rem; color: var(--ink-soft); text-decoration: none; }
  .nav-sub a:hover { background: var(--snow); color: var(--ink); }
  .nav-sub a[aria-current="page"] { color: var(--red-ink); font-weight: 600; }
  .nav-cta > .nav-link { background: var(--red-ink); color: #fff; justify-content: center; }
  .nav-cta > .nav-link:hover { background: var(--ink); color: #fff; }

  @media (min-width: 64em) {
    .menu-btn, .menu-close { display: none; }
    .site-nav { position: static; inset: auto; width: auto; height: auto; padding: 0; overflow: visible; background: none; display: block; }
    .nav-list { display: flex; align-items: center; gap: .15rem; }
    .nav-item { position: relative; }
    .nav-link { padding: .5rem .95rem; border-radius: 999px; }
    .nav-sub {
      position: absolute; left: 0; top: calc(100% + .35rem); min-width: 15rem; padding: .5rem;
      background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: 0 18px 40px rgb(16 24 32 / .14); z-index: 10;
    }
    .nav-cta { margin-left: .5rem; }
  }

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: .7rem 1.7rem;
    border: 2px solid transparent; border-radius: 999px; font-weight: 600; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
  }
  .btn-primary { background: var(--red-ink); color: #fff; }
  .btn-primary:hover { background: var(--ink); color: #fff; }
  .btn-ghost { border-color: var(--ink); color: var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: #fff; }
  .more { font-weight: 600; }

  /* ---- Hero ---- */
  .hero { overflow: clip; }
  .hero-grid { display: grid; gap: var(--space-4); align-items: center; padding-block: var(--space-4) var(--space-5); }
  @media (min-width: 56em) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-5); padding-block: var(--space-5) var(--space-6); } }
  .badge { display: inline-flex; align-items: center; gap: .6rem; width: fit-content; padding: .4rem 1rem .4rem .8rem; background: var(--snow); border-radius: 999px; font-size: var(--step--1); font-weight: 600; margin-bottom: var(--space-3); }
  .badge::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--red); }
  .hero h1 { margin-bottom: var(--space-3); font-size: clamp(2.5rem, 1.4rem + 5vw, 5.25rem); line-height: .98; }
  .lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.55; max-width: 38ch; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  .hero-media { position: relative; isolation: isolate; }
  .hero-media::before { /* gelber Bogen, angelehnt an den Hahnenschwanz im Logo */
    content: ""; position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; border-radius: 50%;
    background: var(--yellow); right: -9%; top: -11%;
  }
  .hero-media::after {
    content: ""; position: absolute; z-index: -1; width: 28%; aspect-ratio: 1; border-radius: 50%;
    background: var(--red); left: -6%; bottom: -8%;
  }
  .hero-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 2rem; }

  .info-bar { background: var(--blue); color: #fff; }
  .info-grid { display: grid; gap: var(--space-3); padding-block: var(--space-4); }
  @media (min-width: 48em) { .info-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
  .info-grid > div { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start; }
  .info-grid .icon { grid-row: span 2; width: 1.7rem; height: 1.7rem; color: var(--yellow); margin-top: .1rem; }
  .info-grid dt { font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); line-height: 1.2; }
  .info-grid dd { margin: 0; color: #e4eff8; }
  .info-grid a { color: #fff; }

  /* ---- Themen-Kacheln ---- */
  .tiles { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  @media (min-width: 40em) { .tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
  .tile {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .6rem;
    min-height: 13rem; padding: var(--space-3); border-radius: var(--radius);
    background: var(--tile-bg, var(--ink)); color: var(--tile-fg, #fff);
    transition: transform .2s ease;
  }
  .tile:hover { transform: translateY(-4px); }
  .tile:nth-child(4n+1) { --tile-bg: var(--red-ink); }
  .tile:nth-child(4n+2) { --tile-bg: var(--blue); }
  .tile:nth-child(4n+3) { --tile-bg: var(--yellow); --tile-fg: var(--ink); }
  .tile:nth-child(4n+4) { --tile-bg: var(--navy); }
  .tile h3 { font-size: var(--step-2); }
  .tile h3 a { color: inherit; text-decoration: none; }
  .tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .tile h3 a:focus-visible { outline: none; }
  .tile:has(h3 a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }
  .tile p { opacity: .92; max-width: 36ch; }

  /* ---- Neuigkeiten ---- */
  .news-list { display: grid; border-top: 2px solid var(--ink); }
  .news-row { position: relative; display: grid; gap: .35rem var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
  @media (min-width: 48em) { .news-row { grid-template-columns: 11rem 1fr auto; align-items: start; } }
  .news-row time { font-weight: 600; color: var(--ink-soft); padding-top: .25rem; }
  .news-text { display: grid; gap: .4rem; max-width: 60ch; }
  .news-text h3 a { color: var(--ink); text-decoration: none; }
  .news-text h3 a::after { content: ""; position: absolute; inset: 0; }
  .news-text h3 a:hover { color: var(--red-ink); }
  .news-text h3 a:focus-visible { outline: none; }
  .news-row:has(h3 a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
  .news-text p { color: var(--ink-soft); }
  .news-thumb img { width: 9rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; }
  time { font-size: var(--step--1); }
  .news-date { display: block; font-weight: 600; color: var(--ink-soft); }

  /* ---- Brotkrumen / Unternavigation ---- */
  .breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: var(--step--1); color: var(--ink-soft); }
  .breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--line); }
  .breadcrumb a { color: var(--ink-soft); }
  .subnav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-1); }
  .subnav a {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem 1.1rem; border-radius: 999px;
    background: var(--snow); color: var(--ink); font-weight: 600; font-size: var(--step--1); text-decoration: none;
    transition: background .15s, color .15s;
  }
  .subnav a:hover { background: var(--ink); color: #fff; }
  .subnav a[aria-current="page"] { background: var(--red-ink); color: #fff; }

  /* ---- Fließtext ---- */
  .prose { max-width: 44rem; }
  .prose > * + * { margin-top: 1.15em; }
  .prose h2 { margin-top: 1.8em; font-size: var(--step-2); }
  .prose h3 { margin-top: 1.5em; }
  .prose ul, .prose ol { padding-left: 1.3em; }
  .prose li + li { margin-top: .4em; }
  .prose li::marker { color: var(--red); font-weight: 700; }
  .prose ul[class], .prose ol[class] { padding-left: 0; }
  .prose ul[class] > li + li { margin-top: 0; }
  .prose blockquote { border-left: 4px solid var(--yellow); padding: .25rem 0 .25rem 1.25rem; color: var(--ink-soft); }
  .prose hr { border: 0; border-top: 1px solid var(--line); }
  .prose-intro { max-width: 40rem; font-size: var(--step-1); line-height: 1.6; }
  .align-center { text-align: center; } .align-right { text-align: right; }
  .back { margin-top: var(--space-4); }

  /* ---- Galerie / Karussell ---- */
  .gallery { margin-top: var(--space-4); }
  .gallery-heading { margin-bottom: var(--space-2); font-size: var(--step-1); }
  .gallery-grid { list-style: none; padding: 0; display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
  .gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; transition: transform .2s; }
  .gallery-grid a:hover img { transform: scale(1.02); }
  .carousel { position: relative; }
  .carousel-track { list-style: none; padding: 0; display: flex; gap: var(--space-1); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; border-radius: var(--radius); }
  .slide { flex: 0 0 100%; scroll-snap-align: center; }
  .slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .carousel-btn {
    position: absolute; top: 50%; translate: 0 -50%; width: 3rem; height: 3rem; border: 0; border-radius: 50%;
    background: #fff; box-shadow: 0 6px 20px rgb(16 24 32 / .2); display: grid; place-items: center;
  }
  .carousel-btn[data-dir="-1"] { left: .75rem; } .carousel-btn[data-dir="1"] { right: .75rem; }
  .carousel-btn:hover { background: var(--yellow); }

  /* ---- Downloads ---- */
  .downloads { margin-top: var(--space-4); }
  .downloads h2 { font-size: var(--step-1); margin-bottom: var(--space-2); }
  .download-list { list-style: none; padding: 0; display: grid; gap: var(--space-1); max-width: 40rem; }
  .download {
    display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: center;
    padding: 1rem 1.25rem 1rem 1rem; background: var(--snow); border-radius: 1.1rem;
    color: var(--ink); text-decoration: none; transition: background .15s, color .15s;
  }
  .download:hover { background: var(--ink); color: #fff; }
  .download .icon { grid-row: span 2; width: 3rem; height: 3rem; padding: .8rem; background: var(--red-ink); color: #fff; border-radius: .8rem; }
  .download-title { font-weight: 600; }
  .download-meta { color: var(--ink-soft); font-size: var(--step--1); }
  .download:hover .download-meta { color: #c9d4de; }
  .download-group { margin-top: var(--space-4); }
  .download-group h2 { font-size: var(--step-1); margin-bottom: var(--space-1); }
  .download-group h2 a { color: var(--ink); text-decoration: none; }
  .download-group h2 a:hover { color: var(--red-ink); }
  .download-group .downloads { margin-top: 0; }

  /* ---- Lightbox ---- */
  .lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; margin: auto; overflow: visible; }
  .lightbox::backdrop { background: rgb(8 14 20 / .9); }
  .lightbox img { max-width: 96vw; max-height: 90dvh; width: auto; height: auto; border-radius: 1rem; }
  .lightbox form { position: absolute; top: -3.25rem; right: 0; }
  .lightbox-close { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: #fff; font-size: 1.75rem; line-height: 1; }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
  @media print {
    .site-header, .site-footer, .subnav, .skip-link, .menu-btn { display: none !important; }
    body { font-size: 11pt; background: #fff; }
    a { color: inherit; }
    .prose { max-width: none; }
  }
}