/* Building blocks: container, glass, header, buttons, stripes, pattern, boxes, lists, form, footer. */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* Liquid-Glass-Web-Approximation, kein offizielles Apple-Material.
   Only over photos: header, benefit cards, form box. */
.glas, .glas-card {
  position: relative; isolation: isolate;
  background: rgba(26, 20, 20, .62);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(244, 244, 244, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 40px -18px rgba(0, 0, 0, .6);
  border-radius: var(--radius);
}
@supports not (backdrop-filter: blur(1px)) { .glas, .glas-card { background: rgba(26, 20, 20, .96); } }
@media (prefers-reduced-transparency: reduce) { .glas, .glas-card { background: var(--flaeche); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---- Header ---- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: 12px; }
.site-header .container { max-width: 1360px; }
.nav-shell { transition: box-shadow 220ms var(--ease); }
.nav-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 64px; padding-inline: clamp(14px, 2vw, 22px); }
.brand { display: inline-flex; align-items: center; justify-self: start; }
.brand img { height: 22px; width: auto; }
.main-nav { position: relative; justify-self: center; }
.main-nav ul { display: flex; gap: clamp(14px, 1.8vw, 26px); }
.main-nav a { position: relative; white-space: nowrap; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--hellgrau); padding-block: 6px; transition: color 180ms ease; }
.main-nav a:hover, .main-nav a.is-active { color: var(--weiss); }
.nav-indicator { position: absolute; left: 0; bottom: -2px; height: 3px; border-radius: 2px; background: var(--dunkelrot); transition: transform 230ms var(--ease), width 230ms var(--ease), opacity 150ms linear; opacity: 0; pointer-events: none; }
.main-nav.has-indicator .nav-indicator { opacity: 1; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--color-line-strong); border-radius: var(--radius-s); background: transparent; color: var(--color-heading); cursor: pointer; transition: border-color 180ms ease, transform 160ms ease; }
.icon-btn:active { transform: scale(.97); }
.nav-toggle { display: none; }
.nur-schmal { display: none; }

@media (max-width: 1279px) {
  .nav-row { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-toggle { display: inline-flex; }
  .main-nav { justify-self: auto; position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); padding: 104px 28px 28px; background: var(--flaeche); border-left: 3px solid var(--dunkelrot); transform: translateX(100%); visibility: hidden; transition: transform 260ms var(--ease), visibility 0s linear 260ms; z-index: 1; }
  .main-nav.is-open { transform: none; visibility: visible; transition: transform 260ms var(--ease), visibility 0s; }
  .main-nav ul { flex-direction: column; gap: 20px; }
  .main-nav a { font-size: 1.1rem; color: var(--weiss); }
  .nav-indicator { display: none; }
  /* backdrop-filter would make the shell the containing block of the fixed panel */
  .nav-shell.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--flaeche); }
  .brand, .header-actions { position: relative; z-index: 2; }
}
@media (max-width: 767px) {
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
  .header-actions .btn { padding-inline: 16px; }
  .brand img { height: 17px; }
}

/* ---- Buttons: CTA box in Warmgold or Dunkelrot, rounded 10+ ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 24px; border: 2px solid transparent; border-radius: var(--radius-s); cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform 160ms var(--ease), color 200ms ease, border-color 200ms ease; }
.btn--lg { min-height: 54px; padding: 15px 30px; font-size: .98rem; }
.btn--block { width: 100%; }
.btn:active { transform: scale(.97); }
.btn--gold { background: var(--warmgold); color: var(--dunkelgrau); }
.btn--rot { background: var(--dunkelrot); color: var(--weiss); }
.btn--ghost { background: transparent; color: var(--color-heading); border-color: var(--color-ghost); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: inset(0 100% 0 0); transition: clip-path 210ms var(--ease); }
.btn--gold::after { background: var(--warmgold-hover); }
.btn--rot::after { background: var(--dunkelrot-tief); }
.btn--ghost::after { background: var(--color-heading); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { clip-path: inset(0 0 0 0); }
  .btn--ghost:hover { color: var(--color-bg); border-color: var(--color-heading); }
  .icon-btn:hover { border-color: var(--warmgold); }
}

.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-style: normal; color: var(--color-accent-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-decoration-color: currentColor; } }

/* ---- Stripes (styleguide "Streifen"): gold over red, angled end. Use sparingly. ---- */
.streifen { display: grid; gap: 4px; width: min(420px, 70%); }
.streifen::before, .streifen::after { content: ""; height: 6px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.streifen::before { background: linear-gradient(90deg, var(--warmgold), #F7D75A 70%, var(--warmgold)); }
.streifen::after { background: linear-gradient(90deg, var(--dunkelrot-tief), var(--dunkelrot) 40%, var(--dunkelrot)); }
.streifen--lang { width: 100%; }

/* ---- Pattern (styleguide "Muster"): signet as pattern, white with 70 % transparency, always cropped ---- */
.muster { position: absolute; pointer-events: none; width: 260px; height: 340px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 260 300%22%3E%3Cpath fill=%22%23F4F4F4%22 d=%22M17 30L27 37V52L17 45ZM39 30L29 37V52L39 45ZM17 90L27 97V112L17 105ZM39 90L29 97V112L39 105ZM0 180L10 187V202L0 195ZM22 180L12 187V202L22 195ZM0 240L10 247V262L0 255ZM22 240L12 247V262L22 255ZM34 0L44 7V22L34 15ZM56 0L46 7V22L56 15ZM51 30L61 37V52L51 45ZM73 30L63 37V52L73 45ZM34 120L44 127V142L34 135ZM56 120L46 127V142L56 135ZM51 150L61 157V172L51 165ZM73 150L63 157V172L73 165ZM85 30L95 37V52L85 45ZM107 30L97 37V52L107 45ZM85 90L95 97V112L85 105ZM107 90L97 97V112L107 105ZM68 120L78 127V142L68 135ZM90 120L80 127V142L90 135ZM85 150L95 157V172L85 165ZM107 150L97 157V172L107 165ZM68 180L78 187V202L68 195ZM90 180L80 187V202L90 195ZM68 240L78 247V262L68 255ZM90 240L80 247V262L90 255ZM119 30L129 37V52L119 45ZM141 30L131 37V52L141 45ZM119 90L129 97V112L119 105ZM141 90L131 97V112L141 105ZM102 120L112 127V142L102 135ZM124 120L114 127V142L124 135ZM119 150L129 157V172L119 165ZM141 150L131 157V172L141 165ZM136 0L146 7V22L136 15ZM158 0L148 7V22L158 15ZM153 30L163 37V52L153 45ZM175 30L165 37V52L175 45ZM136 120L146 127V142L136 135ZM158 120L148 127V142L158 135ZM187 30L197 37V52L187 45ZM209 30L199 37V52L209 45ZM170 60L180 67V82L170 75ZM192 60L182 67V82L192 75ZM170 120L180 127V142L170 135ZM192 120L182 127V142L192 135ZM170 180L180 187V202L170 195ZM192 180L182 187V202L192 195ZM221 30L231 37V52L221 45ZM243 30L233 37V52L243 45ZM221 90L231 97V112L221 105ZM243 90L233 97V112L243 105ZM221 150L231 157V172L221 165ZM243 150L233 157V172L243 165Z%22/%3E%3C/svg%3E") no-repeat center / contain; /* inlined assets/media/img/muster.svg: the pattern is an LCP candidate, so no extra request */ opacity: var(--muster-opacity); filter: var(--muster-filter); }

/* ---- Info box (styleguide): light box, rounded, red title, gold rule. No gold text on light. ---- */
.infobox { background: var(--weiss); color: var(--dunkelgrau); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 24px 24px 26px; }
.infobox h3 { color: var(--dunkelrot); font-size: 1.25rem; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 4px solid var(--warmgold); }
.infobox p { color: #2A2424; font-size: 1rem; }
.infobox strong { color: var(--dunkelgrau); }

/* ---- Icon list: outline icons in gold on dark (styleguide icon style) ---- */
.icon-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding-block: 8px; }
.icon-list svg { width: 24px; height: 24px; color: var(--color-accent-text); margin-top: 2px; }
.icon-list--small li { padding-block: 5px; font-size: .95rem; }
.icon-list a { color: inherit; }

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--dunkelrot); color: var(--weiss); font-weight: 700; font-size: 1.1rem; border: 2px solid var(--weiss); }

/* ---- Form ---- */
.form { display: grid; gap: 14px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: .88rem; color: var(--color-heading); }
.optional { font-weight: 400; font-style: italic; color: var(--color-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; font-style: normal; color: var(--weiss); background: rgba(16, 11, 11, .85); border: 1px solid var(--color-line-strong); border-radius: var(--radius-s); appearance: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8F8787; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--warmgold); box-shadow: 0 0 0 1px var(--warmgold); outline: none; }
.ferr { background: var(--dunkelrot); color: var(--weiss); padding: 12px 14px; font-weight: 700; border-radius: var(--radius-s); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: var(--type-caption); color: var(--color-muted); margin: 0; }
.form__note a { color: inherit; }
.fsubmit[disabled] { opacity: .6; cursor: wait; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.site-footer { background: var(--color-footer); padding-top: 64px; position: relative; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer__brand img { height: 24px; width: auto; margin-bottom: 18px; }
.footer__claim { color: var(--warmgold); font-weight: 700; font-style: normal; margin-bottom: 10px; }
.footer__brand p:not(.footer__claim) { color: var(--color-muted); max-width: 34ch; font-size: 1rem; }
.footer__title { font-size: 1rem; margin-bottom: 14px; }
.footer__links li { padding-block: 4px; }
.footer__links a { color: var(--color-muted); text-decoration: none; font-size: 1rem; }
.footer__links a:hover { color: var(--weiss); }
.footer__bottom { border-top: 1px solid var(--color-line); padding-block: 24px 28px; text-align: center; color: var(--color-muted); font-size: .88rem; }
.footer__bottom p { margin: 0 auto 6px; max-width: none; font-style: normal; }
.footer__credit a { color: inherit; }
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Theme toggle: sun shown in dark mode (switches to light), moon in light mode ---- */
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
.nav-extra { display: none; }
@media (max-width: 1279px) {
  .nav-extra { display: block; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-line); }
  .theme-toggle--text { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--weiss); font-weight: 700; font-size: 1.05rem; cursor: pointer; }
}
@media (max-width: 767px) { .theme-toggle--icon { display: none; } }

/* ---- Language switcher (generated by tools/i18n/build.py): header from 768 px, list in the menu below ---- */
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; width: auto; gap: 6px; padding-inline: 10px; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch__code { font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
.lang-switch__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 8px; background: var(--flaeche); border: 1px solid var(--color-line-strong); border-radius: var(--radius-s); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); z-index: 5; }
.lang-switch__menu a, .lang-menu__list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--hellgrau); text-decoration: none; font-weight: 700; }
.lang-switch__menu a:hover, .lang-switch__menu a[aria-current="true"] { color: var(--weiss); background: rgba(244, 244, 244, .08); }
.lang-switch__menu a[aria-current="true"]::after, .lang-menu__list a[aria-current="true"]::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--warmgold); }
.lang-menu { display: none; }
@media (max-width: 1279px) {
  .lang-menu { display: block; margin-bottom: 18px; }
  .lang-menu__title { font-weight: 700; font-style: normal; color: var(--color-muted); font-size: .9rem; margin-bottom: 6px; }
  .main-nav .lang-menu__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  .main-nav.is-open { overflow-y: auto; overscroll-behavior: contain; }
  .main-nav .lang-menu__list a { padding: 0 8px; color: var(--weiss); font-size: 1rem; }
}
@media (max-width: 767px) { .lang-switch { display: none; } }
.legal-note { border-left: 4px solid var(--dunkelrot); padding-left: 14px; }

/* Long labels in other languages (e.g. Turkish, French): buttons may wrap on small screens, except in the header */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .header-actions .btn { white-space: nowrap; }
}

/* Header CTA: always the short label; the header container stops at 1360 px and the full label
   does not fit next to menu, language and theme buttons. The full label is on the hero buttons. */
.header-actions .nur-breit { display: none; }
.header-actions .nur-schmal { display: inline; }