/* Gemeinsame Gestaltung der neuen HSK-Webseite (Entwurf vom 08.05.2026, ausgebaut 23.10.2026).
   Startseite und alle Unterseiten binden diese Datei ein. */
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{background:#F4F1EC;color:#0E0E10;font-family:-apple-system,'Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  section[id]{scroll-margin-top:90px}
  .wrap{max-width:1320px;margin:0 auto;padding:0 48px}
  .em{font-style:italic;font-family:'Times New Roman','Source Serif Pro',Georgia,serif;font-weight:400}
  .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #1a1a1a22;border-radius:999px;font-size:12px;font-weight:500;background:#fff8}
  .pill::before{content:"";width:6px;height:6px;border-radius:999px;background:#9B1E4F}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-size:14px;font-weight:600;transition:all .2s;cursor:pointer}
  .btn-dark{background:#0E0E10;color:#fff}
  .btn-dark:hover{background:#9B1E4F}
  .btn-ghost{border:1px solid #0E0E1033;color:#0E0E10}
  .btn-ghost:hover{border-color:#9B1E4F;color:#9B1E4F}
  .btn .arrow{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat}
  .btn-ghost .arrow{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E10' stroke-width='2'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat}
  /* VORSCHAU-HINWEIS */
  .vorschau{background:#9B1E4F;color:#fff;font-size:13px;text-align:center;padding:8px 16px}
  .vorschau a{text-decoration:underline;text-underline-offset:3px}
  /* HEADER */
  header{position:sticky;top:0;z-index:50;background:#F4F1ECcc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #0e0e1010}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:18px 48px;max-width:1320px;margin:0 auto;gap:24px}
  .logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;letter-spacing:-.02em}
  .logo .brand-mark{width:28px;height:28px;border-radius:8px;background:#9B1E4F;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
  .logo small{font-weight:500;color:#666;letter-spacing:0;margin-left:4px;font-size:13px}
  nav ul{display:flex;gap:34px;list-style:none}
  nav a{font-size:14px;font-weight:500;color:#1a1a1a}
  nav a:hover{color:#9B1E4F}
  .nav-right{display:flex;align-items:center;gap:14px}
  .nav-phone{font-size:13px;font-weight:600;color:#0E0E10;border:1px solid #0e0e1022;padding:9px 14px;border-radius:999px;white-space:nowrap}
  /* HERO */
  .hero{padding:80px 0 40px;position:relative}
  .hero-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:36px}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
  .hero h1{font-size:clamp(48px,7.6vw,104px);font-weight:300;letter-spacing:-.045em;line-height:.92}
  .hero h1 .em{color:#9B1E4F}
  .hero p.lead{font-size:17px;line-height:1.55;color:#3a3a3e;max-width:480px;margin-top:28px}
  .hero-meta{display:flex;gap:24px;margin-top:32px;align-items:center}
  .ctas{display:flex;gap:12px;flex-wrap:wrap}
  .hero-stack{display:grid;grid-template-rows:auto 1fr;gap:18px}
  .hero-img-main{height:520px;border-radius:18px;overflow:hidden;background:#222 url('bilder/hsk-002.jpg') center/cover no-repeat;position:relative}
  .hero-img-main::after{content:"";position:absolute;inset:auto 16px 16px auto;width:130px;height:130px;border-radius:14px;background:url('bilder/detail-unsplash-aaron-barnaby.jpg') center/cover no-repeat;border:4px solid #F4F1EC}
  .hero-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .hero-side .card{background:#fff;border-radius:16px;padding:18px;border:1px solid #0e0e1010}
  .hero-side .card h4{font-size:13px;color:#666;margin-top:12px;font-weight:500;line-height:1.4}
  .hero-side .card .num{font-size:38px;font-weight:300;letter-spacing:-.03em;color:#0E0E10}
  .hero-side .card.dark{background:#0E0E10;color:#F4F1EC}
  .hero-side .card.dark h4{color:#aaa}
  .hero-side .card.dark .num{color:#fff}
  .hero-side .card .label{font-size:11px;color:#999;margin-top:6px;letter-spacing:.05em;text-transform:uppercase;font-weight:500}
  /* BAND */
  .marquee{padding:52px 0;border-top:1px solid #0e0e1015;border-bottom:1px solid #0e0e1015;margin-top:60px}
  .marquee-row{display:flex;align-items:center;justify-content:space-between;gap:48px;color:#0E0E10;font-weight:600}
  .marquee-row .lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#999;font-weight:500;white-space:nowrap}
  .logos{display:flex;gap:56px;align-items:center;flex-wrap:wrap;font-size:20px;letter-spacing:-.02em;opacity:.75}
  .logos span{font-family:'Times New Roman',Georgia,serif;font-style:italic;font-weight:500}
  /* LEISTUNGEN */
  .services{padding:120px 0 60px}
  .services-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:48px;align-items:end}
  .services h2{font-size:clamp(40px,5.8vw,80px);font-weight:300;letter-spacing:-.045em;line-height:.96}
  .services h2 .em{color:#9B1E4F}
  .services-head p{color:#3a3a3e;font-size:16px;line-height:1.6;max-width:430px}
  .bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(200px,auto);gap:14px}
  .b{background:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;border:1px solid #0e0e1010;position:relative;overflow:hidden;transition:transform .25s}
  .b:hover{transform:translateY(-2px)}
  .b h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
  .b p{color:#65656a;font-size:13px;line-height:1.5;margin-top:6px;max-width:300px}
  .b .num{position:absolute;top:24px;right:24px;font-size:11px;color:#9B1E4F;font-weight:600;letter-spacing:.1em}
  .b .arrow-link{font-size:13px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
  .b.span-2{grid-column:span 2}
  .b.row-2{grid-row:span 2}
  .b-img{padding:0;align-items:stretch;justify-content:flex-end;min-height:414px}
  .b-img .bg{position:absolute;inset:0;background-size:cover;background-position:center}
  .b-img .gradient{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#0E0E10dd 100%)}
  .b-img .content{position:relative;padding:28px;color:#fff}
  .b-img h3{color:#fff;font-size:26px}
  .b-img p{color:#dcdce0;font-size:13px}
  .b.dark{background:#0E0E10;color:#fff}
  .b.dark h3{color:#fff}
  .b.dark p{color:#a8a8ad}
  .b.brand{background:#9B1E4F;color:#fff}
  .b.brand h3{color:#fff}
  .b.brand p{color:#f0d3df}
  .b .icon{width:42px;height:42px;border-radius:12px;background:#9B1E4F11;display:grid;place-items:center;color:#9B1E4F;margin-bottom:14px}
  .b.dark .icon{background:#ffffff15;color:#fff}
  .b.brand .icon{background:#ffffff22;color:#fff}
  /* FAKTEN */
  .stats{background:#0E0E10;color:#F4F1EC;padding:100px 0;border-radius:24px;margin:60px 0}
  .stats-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;align-items:center}
  .stats h3{font-size:clamp(32px,3.4vw,46px);font-weight:300;letter-spacing:-.04em;line-height:1}
  .stats h3 .em{color:#E68FAF}
  .stat .num{font-size:clamp(44px,4.6vw,64px);font-weight:300;letter-spacing:-.04em;line-height:1;color:#fff}
  .stat .lbl{font-size:12px;color:#888;letter-spacing:.18em;text-transform:uppercase;margin-top:10px;font-weight:500}
  .stat .sub{font-size:13px;color:#aaa;margin-top:6px;line-height:1.45}
  /* PHILOSOPHIE */
  .philo{padding:80px 0}
  .philo-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:stretch}
  .philo .image{border-radius:18px;overflow:hidden;background:#ddd url('bilder/hsk-003.jpg') center/cover no-repeat;min-height:520px;position:relative}
  .philo .image .badge{position:absolute;top:24px;left:24px;background:#F4F1EC;padding:14px 18px;border-radius:14px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:#0E0E10}
  .philo .image .badge .dot{width:8px;height:8px;border-radius:99px;background:#9B1E4F}
  .philo .text h2{font-size:clamp(36px,4.6vw,64px);font-weight:300;letter-spacing:-.045em;line-height:1}
  .philo .text h2 .em{color:#9B1E4F}
  .philo .text .lead{font-size:17px;color:#3a3a3e;line-height:1.6;margin-top:24px}
  .philo .checklist{margin-top:32px;display:grid;gap:14px}
  .philo .checklist .item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid #0e0e1015}
  .philo .checklist .item .ic{width:32px;height:32px;border-radius:99px;background:#9B1E4F;color:#fff;display:grid;place-items:center;flex-shrink:0;font-size:14px}
  .philo .checklist .item .t{font-weight:600;font-size:15px}
  .philo .checklist .item .s{font-size:13px;color:#65656a;margin-top:2px;line-height:1.45}
  /* KARRIERE */
  .teamcta{padding:0;background:#0E0E10;color:#F4F1EC;border-radius:24px;margin:60px 0;overflow:hidden}
  .teamcta-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:380px}
  .teamcta .left{padding:60px}
  .teamcta .left .pill{background:#ffffff10;color:#fff;border-color:#ffffff20}
  .teamcta h2{font-size:clamp(36px,4.6vw,64px);font-weight:300;letter-spacing:-.045em;line-height:.98;margin-top:18px}
  .teamcta h2 .em{color:#E68FAF}
  .teamcta .left p{color:#aaa;font-size:16px;line-height:1.6;margin-top:18px;max-width:440px}
  .teamcta .left .meta{display:flex;gap:32px;flex-wrap:wrap;margin-top:32px}
  .teamcta .left .meta div{font-size:13px;color:#aaa}
  .teamcta .left .meta div b{display:block;color:#fff;font-size:24px;font-weight:300;letter-spacing:-.03em;margin-bottom:4px}
  .teamcta .ctas{margin-top:32px}
  .btn-light{background:#fff;color:#0E0E10}
  .btn-light .arrow{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E10' stroke-width='2'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat}
  .btn-outline{border:1px solid #ffffff44;color:#fff}
  .btn-outline:hover{border-color:#fff}
  .teamcta .right{background:url('bilder/team.jpg') center/cover no-repeat;position:relative;min-height:260px}
  .teamcta .right::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,transparent 55%,#0E0E10 100%)}
  /* KONTAKT */
  .contact{padding:80px 0 40px}
  .contact-card{color:#fff;border-radius:24px;padding:60px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;background-image:linear-gradient(135deg,#9B1E4F,#5C0E2F)}
  .contact h2{font-size:clamp(36px,4.6vw,64px);font-weight:300;letter-spacing:-.045em;line-height:1}
  .contact h2 .em{color:#fff}
  .contact .sub{font-size:17px;line-height:1.55;color:#f5d3df;margin-top:18px;max-width:540px}
  .contact .info{display:grid;gap:18px;font-size:15px}
  .contact .info .row{display:flex;gap:14px;align-items:center;border-top:1px solid #ffffff30;padding-top:18px}
  .contact .info .ic{width:40px;height:40px;border-radius:12px;background:#ffffff20;display:grid;place-items:center;font-size:16px;flex-shrink:0}
  .contact .info .label{font-size:11px;color:#f5d3df;letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin-bottom:2px}
  .contact .info .val{font-size:16px;font-weight:600;line-height:1.4}
  .contact-ctas{margin-top:32px}
  .contact-ctas .btn-light{color:#9B1E4F}
  .contact-ctas .btn-light .arrow{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B1E4F' stroke-width='2'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat}
  /* FUSS */
  footer{background:#0E0E10;color:#F4F1EC;padding:80px 0 40px;border-radius:24px 24px 0 0;margin-top:60px}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid #ffffff15}
  footer h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#888;font-weight:600;margin-bottom:18px}
  footer ul{list-style:none;display:grid;gap:10px}
  footer ul a{font-size:14px;color:#dcdce0}
  footer ul a:hover{color:#E68FAF}
  .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-weight:800;font-size:22px;letter-spacing:-.02em}
  .footer-brand .brand-mark{width:36px;height:36px;border-radius:10px;background:#9B1E4F;display:grid;place-items:center;font-size:14px;font-weight:800}
  .footer-bio{color:#aaa;font-size:14px;line-height:1.55;max-width:340px}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:32px;color:#888;font-size:13px}

  /* SCHMALE BILDSCHIRME */
  @media (max-width:1000px){
    .wrap{padding:0 24px}
    .nav{padding:14px 24px}
    /* Menue als zweite, seitlich wischbare Zeile statt ausgeblendet (vorher gab es unter 1000 px gar keins) */
    .nav{flex-wrap:wrap;row-gap:8px}
    .nav>nav{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;border-top:1px solid #0e0e1010;padding-top:10px}
    .nav>nav::-webkit-scrollbar{display:none}
    .nav>nav ul{gap:22px}
    .nav>nav a{white-space:nowrap}
    .hero{padding:48px 0 24px}
    .hero-grid,.services-head,.philo-grid,.teamcta-grid,.contact-card{grid-template-columns:1fr}
    .hero-img-main{height:380px}
    .marquee-row{flex-direction:column;align-items:flex-start;gap:20px}
    .logos{gap:14px 32px}
    .services{padding:72px 0 40px}
    .bento{grid-template-columns:repeat(2,1fr)}
    .b.span-2{grid-column:span 1}
    .b-img.span-2{grid-column:span 2}
    .b-img{min-height:340px}
    .stats{padding:64px 0}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px}
    .stats-grid h3{grid-column:1/-1}
    .philo{padding:40px 0}
    .philo .image{min-height:340px}
    .teamcta .left,.contact-card{padding:40px}
    .footer-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:640px){
    .vorschau{font-size:12px}
    .nav-phone{display:none}
    .nav-right .btn{padding:10px 16px;font-size:13px}
    .hero-img-main{height:280px}
    .hero-img-main::after{width:90px;height:90px}
    .bento{grid-template-columns:1fr}
    .b-img.span-2{grid-column:span 1}
    .stats-grid{grid-template-columns:1fr}
    .teamcta .left,.contact-card{padding:28px}
    .footer-grid{grid-template-columns:1fr;gap:32px}
  }

/* ---------- Logo ---------- */
.logo img{height:66px;width:auto;display:block}
.footer-logo{display:inline-block;margin-bottom:24px}
.footer-logo img{height:84px;width:auto;display:block}

/* ---------- Unterseiten ---------- */
.page-hero{padding:56px 0 28px}
.crumbs{font-size:13px;color:#77777c;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.crumbs a:hover{color:#9B1E4F}
.crumbs span.sep{color:#bbb}
.page-hero h1{font-size:clamp(34px,4.8vw,68px);font-weight:300;letter-spacing:-.04em;line-height:1.02;margin-top:16px;max-width:980px;hyphens:auto}
.page-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding:8px 0 40px;align-items:start}
.prose{background:#fff;border:1px solid #0e0e1010;border-radius:18px;padding:44px;font-size:16px;line-height:1.7;color:#2a2a2e;overflow-wrap:break-word;hyphens:auto}
.prose > :first-child{margin-top:0}
.prose h2{font-size:26px;font-weight:400;letter-spacing:-.02em;margin:32px 0 10px;color:#0E0E10;line-height:1.2}
.prose h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:26px 0 8px;color:#0E0E10;line-height:1.3}
.prose h4{font-size:16px;font-weight:600;margin:20px 0 6px;color:#0E0E10}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:4px 0 18px;padding-left:0;list-style:none}
.prose li{padding:7px 0 7px 26px;position:relative;border-top:1px solid #0e0e100d}
.prose li:last-child{border-bottom:1px solid #0e0e100d}
.prose li::before{content:"";position:absolute;left:5px;top:16px;width:7px;height:7px;border-radius:99px;background:#9B1E4F}
.prose a{color:#9B1E4F;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#5C0E2F}
.prose figure{margin:6px 0 18px}
.prose img{border-radius:12px;max-width:260px;height:auto;background:#fff}
.prose pre,.prose code{font-family:Consolas,'Courier New',monospace;font-size:13px;white-space:pre-wrap}
.prose strong{font-weight:600;color:#0E0E10}
.hinweis{background:#fff4f8;border:1px solid #9B1E4F33;border-radius:12px;padding:14px 18px;font-size:14px;line-height:1.5;margin-bottom:24px;color:#5C0E2F}
.subnav{position:sticky;top:100px;background:#fff;border:1px solid #0e0e1010;border-radius:18px;padding:22px}
.subnav h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#999;font-weight:600;margin-bottom:12px}
.subnav ul{list-style:none;display:grid;gap:2px}
.subnav ul ul{margin:2px 0 6px 12px;border-left:2px solid #9B1E4F22;padding-left:6px}
.subnav a{display:block;padding:7px 10px;border-radius:10px;font-size:14px;line-height:1.35;color:#2a2a2e}
.subnav ul ul a{font-size:13px;color:#55555a}
.subnav a:hover{background:#9B1E4F11;color:#9B1E4F}
.subnav a.aktiv{background:#9B1E4F;color:#fff}
.subnav .kontaktbox{margin-top:18px;padding-top:16px;border-top:1px solid #0e0e1012;font-size:13px;line-height:1.6;color:#55555a}
.subnav .kontaktbox b{display:block;color:#0E0E10;font-size:14px;margin-bottom:2px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:28px}
.kacheln a{display:block;background:#F4F1EC;border-radius:14px;padding:18px 20px;font-weight:600;font-size:15px;color:#0E0E10;text-decoration:none;transition:all .2s}
.kacheln a:hover{background:#9B1E4F;color:#fff}
.kacheln a span{display:block;font-size:12px;font-weight:500;color:#9B1E4F;margin-top:6px}
.kacheln a:hover span{color:#f5d3df}

@media (max-width:1000px){
  .page-body{grid-template-columns:1fr}
  .subnav{position:static}
  .prose{padding:32px}
  .logo img{height:56px}
}
@media (max-width:640px){
  .page-hero{padding:36px 0 18px}
  .prose{padding:22px;font-size:15px}
  .prose img{max-width:100%}
  .logo img{height:46px}
}
/* Personenkarten (Geschaeftsfuehrung) */
.personen{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:22px}
.person{background:#F4F1EC;border-radius:16px;padding:16px}
.prose .person img{max-width:100%;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;margin:0 0 12px}
.person .pname{font-size:18px;font-weight:600;color:#0E0E10}
.person .prolle{font-size:13px;color:#65656a;margin-top:2px}
.subnav a.aktiv + ul a{color:#55555a}
nav a.aktiv{color:#9B1E4F}
/* Kontaktkasten der Seitennavigation: Verweise im Fliesstext, nicht als Menuepunkte */
.subnav .kontaktbox a{display:inline;padding:0;border-radius:0;font-size:13px;color:#9B1E4F;background:none}
.subnav .kontaktbox a:hover{text-decoration:underline;background:none}

/* ---------- Kontaktformular ---------- */
.formular{display:grid;gap:16px;margin-top:18px}
.formular .feld-zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formular label{display:grid;gap:6px;font-size:14px;font-weight:600;color:#0E0E10}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular textarea{font:inherit;font-weight:400;font-size:15px;padding:12px 14px;border:1px solid #0e0e1026;border-radius:12px;background:#FBFAF7;color:#0E0E10;width:100%}
.formular textarea{resize:vertical;min-height:150px}
.formular input:focus,.formular textarea:focus{outline:2px solid #9B1E4F55;border-color:#9B1E4F;background:#fff}
.formular .pflicht{color:#9B1E4F}
.formular .einwilligung{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13px;line-height:1.5;color:#55555a}
.formular .einwilligung input{margin-top:3px;width:18px;height:18px;accent-color:#9B1E4F;flex-shrink:0}
.formular button{justify-self:start;border:0;font-family:inherit}
.formular .klein{font-size:12px;color:#888;margin:0}
.formular .falle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){ .formular .feld-zeile{grid-template-columns:1fr} }
.formular button:disabled{opacity:.45;cursor:wait}

.prose .stand{font-size:13px;color:#77777c;margin-bottom:20px}

/* ---------- Referenzen: Zeitleiste (Vorschlag 23.10.2026) ---------- */
.page-hero .intro{font-size:17px;line-height:1.55;color:#3a3a3e;max-width:760px;margin:24px 0 22px}
.filterleiste{position:sticky;top:var(--kopf,92px);z-index:40;background:#F4F1ECee;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #0e0e1010;padding:12px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font-family:inherit;font-size:13px;font-weight:500;padding:8px 14px;border-radius:999px;border:1px solid #0e0e1022;background:#fff;color:#0E0E10;cursor:pointer;transition:all .2s;white-space:nowrap}
.chips button small{color:#888;font-weight:400;margin-left:2px}
.chips button:hover{border-color:#9B1E4F;color:#9B1E4F}
.chips button.an{background:#0E0E10;border-color:#0E0E10;color:#fff}
.chips button.an small{color:#ffffffaa}
.zeitleiste{position:relative;padding:40px 0 80px}
.zeitleiste::before{content:"";position:absolute;left:59px;top:40px;bottom:80px;width:2px;background:linear-gradient(#9B1E4F,#9B1E4F55)}
.jahrgang{display:grid;grid-template-columns:120px 1fr;gap:0 28px;margin-bottom:36px;scroll-margin-top:calc(var(--kopf,92px) + var(--leiste,60px) + 16px)}
.jahrgang .jahr{position:relative}
.jahrgang .jahr span{position:sticky;top:calc(var(--kopf,92px) + var(--leiste,60px) + 16px);display:block;margin:0 auto;width:96px;text-align:center;background:#9B1E4F;color:#fff;font-weight:600;font-size:18px;letter-spacing:-.01em;padding:8px 0;border-radius:999px;box-shadow:0 0 0 6px #F4F1EC}
.jahrgang.frueher .jahr span{background:#0E0E10;font-size:15px}
.jahrgang.frueher .jahr p{font-size:12px;line-height:1.45;color:#77777c;margin-top:14px;text-align:center;background:#F4F1EC;padding:4px 0}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;align-items:start}
.eintrag{background:#fff;border:1px solid #0e0e1012;border-radius:18px;overflow:hidden}
.eintrag figure{position:relative;aspect-ratio:16/10;background:#e9e5de;overflow:hidden}
.eintrag figure img{width:100%;height:100%;object-fit:cover}
.eintrag figcaption{position:absolute;right:8px;bottom:6px;font-size:10px;color:#fff;background:#0007;padding:2px 7px;border-radius:999px}
.eintrag .inhalt{padding:18px 20px 20px}
.eintrag:not(.mit-bild){border-top:3px solid #9B1E4F55}
.eintrag .zeit{font-size:12px;font-weight:600;color:#9B1E4F;letter-spacing:.02em;margin-bottom:6px}
.eintrag h3{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;hyphens:auto}
.eintrag p{font-size:14px;line-height:1.5;color:#55555a;margin-top:6px}
.eintrag .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.eintrag .tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:#9B1E4F12;color:#7a1640}
.eintrag .gewerke{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:10px}
.eintrag .gewerke span{font-size:11px;color:#55555a;border:1px solid #0e0e1018;padding:2px 8px;border-radius:999px}
.eintrag details{margin-top:12px;font-size:13px}
.eintrag summary{cursor:pointer;color:#9B1E4F;font-weight:600}
.eintrag dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:8px;line-height:1.45}
.eintrag dt{color:#77777c}
/* Filter: nicht passende Projekte und Jahre ohne Treffer ausblenden (bis 23.10. abends nur abgeblendet) */
.eintrag.aus,.jahrgang.leer{display:none}
.zeitleiste.einblenden .eintrag{animation:einblenden .45s ease both}
@keyframes einblenden{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:1000px){
  .zeitleiste::before{left:11px}
  .jahrgang{grid-template-columns:1fr;gap:12px}
  .jahrgang .jahr{padding-left:0}
  .jahrgang .jahr span{position:static;margin:0;width:auto;display:inline-block;padding:6px 16px;font-size:16px}
  .jahrgang.frueher .jahr p{text-align:left;padding-left:2px}
  .karten{padding-left:30px}
}
@media (max-width:640px){
  .filterleiste{padding:10px 0}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:0 24px}
  .chips::-webkit-scrollbar{display:none}
  .karten{grid-template-columns:1fr;padding-left:24px}
  .zeitleiste::before{left:8px}
}
@media (prefers-reduced-motion:reduce){.eintrag{transition:none}.zeitleiste.einblenden .eintrag{animation:none}}