/* =========================================================
   VINDOBONA-VERAG Holding GmbH – One-Pager
   Farben & Schriften laut CD-Manual
   ========================================================= */

/* ---------- Schriften (lokal gehostet, DSGVO) ---------- */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Variablen ---------- */
:root {
  /* CD-Farben */
  --yellow: #FFD300;
  --black: #1C1C1B;
  --slate: #444F58;
  --taupe: #ABA097;
  /* abgeleitete Töne */
  --grey-light: #E8E5E1;   /* helle Fläche (Taupe aufgehellt) */
  --grey-legal: #D6D1CB;   /* Fußleiste */
  --text: var(--black);
  --text-muted: #4a4a48;
  --white: #fff;

  --font-sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --maxw: 1400px;
  --pad: clamp(20px, 5.4vw, 76px);                                   /* innerer Seitenabstand */
  --outer: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))); /* Abstand bei breiten Screens */
  --header-h: 104px;
  --section-y: clamp(48px, 6vw, 84px);
  --bar-w: clamp(6px, .9vw, 12px);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(1rem, .95rem + .25vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: 0;
  hyphens: manual;
}
h1, h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 500; margin: 1.6em 0 .7em; }

.kicker { display: block; text-transform: uppercase; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--yellow); color: var(--black);
  padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.section--dark :focus-visible { outline-color: var(--white); }

.container {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Gelbe Bänder ---------- */
.band { background: var(--yellow); }
.band--thick { height: clamp(28px, 5vw, 72px); }
.band--thin  { height: clamp(8px, 1vw, 14px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 18px rgba(28, 28, 27, .12); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--maxw);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.brand img { width: clamp(170px, 20vw, 280px); height: auto; }

.main-nav ul { display: flex; gap: clamp(20px, 3.4vw, 52px); }
.main-nav a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font-size: 1.125rem;
  text-decoration: none;
  color: var(--black);
}
.main-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.main-nav a:hover::after,
.main-nav a.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  position: absolute;
  left: 10px;
  width: 24px; height: 2px;
  background: var(--black);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bar { top: 21px; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; left: 0; }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { background: var(--black); }
.hero img {
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: calc(100vh - var(--header-h) - 40px);
  min-height: 260px;
  object-fit: cover;
  object-position: 50% 18%; /* oben verankert: bei breiten Fenstern wird unten beschnitten, Köpfe bleiben sichtbar */
}

/* ---------- Gruppen-Hinweis rechts oben ---------- */
.group-tag {
  position: absolute;
  top: 0;
  right: var(--pad);
  width: max-content;
  margin: 0;
  padding-bottom: 6px;
  font-size: .8125rem;
  line-height: 1.3;
  border-bottom: clamp(5px, .5vw, 7px) solid var(--yellow);
}
.group-tag--static { position: static; }

/* ---------- Überschrift mit Akzentbalken ---------- */
.heading-block {
  position: relative;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.heading-block::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(-1 * var(--pad) + var(--pad) * .45);
  width: var(--bar-w);
  background: var(--yellow);
}
.heading-block--light::before { background: var(--white); }

.subline {
  margin: .45em 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1rem + .7vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
}

/* ---------- Dunkle Sektionen ---------- */
.section { padding: var(--section-y) 0; }
.section--dark { background: var(--black); color: var(--white); }
.section--dark .container { padding-top: 0; }
.section--dark .group-tag { color: var(--white); top: calc(-1 * var(--section-y) + 30px); }
.section .heading-block { margin-top: 12px; }
.lead { max-width: 74ch; font-size: clamp(1rem, .95rem + .3vw, 1.25rem); }
.section--dark .btn { margin-top: 1.2em; }

.section--claim .heading-block { padding-right: clamp(80px, 10vw, 140px); }
.section--claim .lead { max-width: 100ch; margin-bottom: 0; }
.claim-signet {
  position: absolute;
  top: calc(-1 * var(--section-y) + 32px);
  right: var(--pad);
  width: clamp(54px, 6vw, 84px);
  height: auto;
}

/* ---------- Button ---------- */
.btn {
  display: inline-block;
  padding: .75em 1.35em;
  border: 1px solid var(--white);
  border-radius: 5px;
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { background: #ffdd33; box-shadow: 0 4px 14px rgba(28, 28, 27, .18); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- 2-spaltige Bereiche ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.split__col {
  position: relative;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.split__col--left  { padding-left: var(--outer); padding-right: clamp(24px, 3.4vw, 48px); }
.split__col--right { padding-left: clamp(24px, 1.6vw, 24px); padding-right: var(--outer); }
.split__col--grey  { background: var(--grey-light); }
.split__col--right .group-tag { top: 30px; right: var(--outer); }

.prose { max-width: 62ch; }
.prose > h3:first-child { margin-top: 0; }
.prose--offset { margin-top: clamp(72px, 7vw, 96px); }

.bullets li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: .75em;
}
.bullets li::before {
  content: "•";
  position: absolute; left: .2em; top: 0;
}

/* ---------- Management ---------- */
.person {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(380px, 38.5vw, 560px);
  background: var(--grey-light);
}
.person__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(40px, 4.5vw, 64px) clamp(24px, 3.4vw, 48px) clamp(40px, 4.5vw, 64px) var(--outer);
}
.person__text p { max-width: 58ch; }
.person__text .btn { margin-top: auto; }
.person__media { position: relative; min-height: 280px; overflow: hidden; }
.person__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 30%);
}

.person--reverse .person__media { order: -1; }
.person--reverse .person__text { padding-left: var(--pad); padding-right: var(--outer); }

/* ---------- Kontakt ---------- */
.contact__head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--pad) 0;
}
.contact__head .heading-block { margin-bottom: 0; max-width: 24ch; }
.split--contact { margin-top: clamp(16px, 1.4vw, 20px); }
.split--contact .split__col { padding-top: clamp(28px, 2.4vw, 36px); }

.contact__persons-title { margin-top: clamp(48px, 7vw, 100px); }
.persons li { margin-bottom: 1em; line-height: 1.3; }
.persons strong { display: block; font-weight: 600; }

.form-title { margin: 0 0 1em; }
.contact-form { max-width: 720px; }
.field { margin-bottom: clamp(14px, 1.8vw, 24px); }
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 1.05em 1em .9em;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font: inherit;
  line-height: 1.3;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form ::placeholder { color: #4d4d4b; opacity: 1; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 211, 0, .45);
}
.contact-form .is-invalid { border-color: #b3261e; }
.form-note { font-size: .875rem; color: var(--text-muted); }
.form-status { margin: 1em 0 0; font-weight: 600; min-height: 1.5em; }
.form-status.is-ok { color: #1d6b2f; }
.form-status.is-error { color: #b3261e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--grey-light); font-size: .9375rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: var(--maxw);
  margin: 0 auto;
  /*padding: clamp(36px, 3.4vw, 48px) var(--pad);*/
  padding: 48px 32px 48px 32px;
}
.footer-col {
  position: relative;
  padding-left: clamp(15px, 25px, 35px);
  min-height: 90px;
}
.footer-col:not(.footer-col--group)::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--bar-w);
  background: var(--yellow);
}
.footer-title {
  margin: 0 0 1em;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer address { line-height: 1.55; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.footer-links li { margin-bottom: .35em; }
.footer-col:nth-child(3) .footer-links a { text-decoration: underline; }
.hl, .sep { color: var(--yellow); font-weight: 600; }
.footer-col--group { padding-left: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.footer-col--group .group-tag { font-size: .9375rem; }

.site-footer__legal {
  padding: 10px var(--pad);
  background: var(--grey-legal);
  border-top: 1px solid var(--white);
  font-size: .8125rem;
  text-align: center;
  color: var(--text-muted);
}
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}

@media (max-width: 899px) {
  :root { --header-h: 76px; }

  /* Mobile Navigation */
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--grey-light);
    box-shadow: 0 14px 24px rgba(28, 28, 27, .14);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .main-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav ul { flex-direction: column; gap: 0; padding: 8px var(--pad) 16px; }
  .main-nav li + li { border-top: 1px solid var(--grey-light); }
  .main-nav a { display: block; padding: 14px 0; font-size: 1.125rem; }
  .main-nav a::after { bottom: 8px; right: auto; width: 48px; }

  .hero img { aspect-ratio: 4 / 3; object-position: 50% 18%; }

  /* Gruppenhinweis nicht mehr absolut */
  .group-tag,
  .section--dark .group-tag,
  .split__col--right .group-tag {
    position: static;
    margin: 0 0 28px auto;
  }

  .split, .person { grid-template-columns: 1fr; }
  .split__col--left,
  .split__col--right { padding-left: var(--pad); padding-right: var(--pad); }
  .prose--offset { margin-top: 0; }

  .person { min-height: 0; }
  .person__media { order: -1; aspect-ratio: 3 / 2; min-height: 0; }
  .person__text,
  .person--reverse .person__text { padding: 40px var(--pad) 48px; }
  .person__text .btn { margin-top: 1.2em; }

  .claim-signet { position: static; margin: 0 0 24px auto; }
  .section--claim .heading-block { padding-right: 0; }
  .section--claim h2 br { display: none; }
  .section--claim h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); }

  .contact__persons-title { margin-top: 40px; }
}

@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .footer-col { min-height: 0; }
  .footer-col--group { flex-direction: row; align-items: flex-end; }
  .heading-block::before { left: calc(-1 * var(--pad) + 6px); width: 6px; }
}