/* ==========================================================================
   EUROTEC Basis: Reset, Typografie-Klassen, Raster, Buttons, Links, Prose.
   Mobile-first. Keine !important. Alles über Tokens (tokens.css).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font); font-weight: var(--fw-regular); font-size: var(--fs-p); line-height: var(--lh-p); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 1000; background: var(--c-black); color: var(--c-white); padding: 12px 20px; }
.skip-link:focus { top: 12px; }

/* Typografie-Klassen (Name = Token) */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-thin); letter-spacing: 0; }
.t-d3 { font-size: var(--fs-d3); line-height: var(--lh-d3); font-weight: var(--fw-light); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-light); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-light); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-light); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-regular); }
.t-h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-regular); }
.t-p { font-size: var(--fs-p); line-height: var(--lh-p); font-weight: var(--fw-regular); }
.t-link { font-size: var(--fs-link); line-height: var(--lh-link); font-weight: var(--fw-medium); }
.t-link-l { font-size: var(--fs-link-l); line-height: var(--lh-link-l); font-weight: var(--fw-medium); }
.t-caps { font-size: var(--fs-caps); line-height: var(--lh-caps); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .02em; }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-balance { text-wrap: balance; }
.t-nowrap { white-space: nowrap; }

/* Eyebrow (Kicker über Headlines) und Underline-Link */
.eyebrow { display: block; font-size: var(--fs-link); line-height: var(--lh-link); font-weight: var(--fw-medium); margin-bottom: var(--space-3); }
.link-underline { display: inline; font-size: var(--fs-link); line-height: var(--lh-link); font-weight: var(--fw-medium); padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--t-slow) var(--ease); }
.link-underline:hover, .link-underline:focus-visible { background-size: 100% 2px; }
.link-underline:has(+ .icon), .link-arrow { display: inline-flex; align-items: center; gap: 10px; }

/* Buttons: Pille, Hairline, Versalien. Standard = Akzent (auf dunklen Flächen), .btn--ink = Schwarz auf hell. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 32px; border: var(--line) solid currentColor; border-radius: var(--radius-pill); color: var(--accent); background: transparent; font-size: var(--fs-caps); line-height: var(--lh-caps); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--ink { color: var(--ink); }
.btn--ink:hover, .btn--ink:focus-visible { background: var(--ink); color: var(--c-white); border-color: var(--ink); }
.btn--white { color: var(--c-white); }
.btn--white:hover, .btn--white:focus-visible { background: var(--c-white); color: var(--ink); border-color: var(--c-white); }
.btn--solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--accent); }
@media (max-width: 767px) { .btn { min-height: 44px; padding: 12px 24px; } }

/* Icons (Hairline, currentColor) */
.icon { display: inline-block; width: 1em; height: 1em; flex: none; }
.icon svg { width: 100%; height: 100%; display: block; }

/* Raster */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(1100px + 2 * var(--gutter)); }
.et-block { position: relative; }
.et-section { padding-block: var(--section-y); }
.et-section--tight { padding-block: var(--space-5); }
.et-section--flush { padding-block: 0; }
.bg-black { background: var(--c-black); color: var(--c-white); }
.bg-grey { background: var(--surface-2); }
.bg-grey-2 { background: var(--surface-3); }
.bg-white { background: var(--c-white); color: var(--ink); }
.bg-world { background: var(--world-box); color: var(--world-ink); }
.bg-dark { background: var(--world-dark); color: var(--c-white); }
.stack > * + * { margin-top: var(--space-3); }
.cols-2 { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .cols-2 { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

/* Prose: klassischer Inhalt (Beiträge, Impressum, Datenschutz, AGB) */
.et-prose { max-width: 1100px; }
.et-prose > * + * { margin-top: var(--space-3); }
.et-prose h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-light); margin-top: var(--space-6); }
.et-prose h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-light); margin-top: var(--space-6); }
.et-prose h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-light); margin-top: var(--space-5); }
.et-prose h4, .et-prose h5, .et-prose h6 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-regular); margin-top: var(--space-4); }
.et-prose p, .et-prose li { font-size: var(--fs-p); line-height: var(--lh-p); }
.et-prose ul, .et-prose ol { padding-left: 1.2em; }
.et-prose ul { list-style: disc; }
.et-prose ol { list-style: decimal; }
.et-prose li + li { margin-top: .35em; }
.et-prose a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.et-prose a:hover { color: var(--ink-muted); }
.et-prose strong { font-weight: var(--fw-medium); }
.et-prose img { border-radius: var(--radius); }
.et-prose figure, .et-prose .wp-block-image, .et-prose .wp-block-gallery { margin-block: var(--space-5); }
.et-prose figcaption { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); margin-top: var(--space-2); }
.et-prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--space-4); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-light); margin-block: var(--space-5); }
.et-prose table { width: 100%; border-collapse: collapse; }
.et-prose th, .et-prose td { text-align: left; padding: 12px 0; border-bottom: var(--line) solid var(--c-grey-200); vertical-align: top; }
.et-prose .wp-block-gallery { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.et-prose .wp-block-gallery figure { margin: 0; }
.et-prose .wp-block-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.et-prose iframe, .et-prose .wp-block-embed__wrapper { max-width: 100%; }
.et-prose .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.et-prose .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.et-prose .wp-block-button__link { display: inline-flex; padding: 14px 32px; border: var(--line) solid currentColor; border-radius: var(--radius-pill); text-decoration: none; font-size: var(--fs-caps); font-weight: var(--fw-medium); text-transform: uppercase; }
.et-prose-page { padding-block: var(--space-7); }

/* Bild-Verhältnisse */
.ratio-4-5 { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.cover { width: 100%; height: 100%; object-fit: cover; }

/* Kein „Blitzer“: Bilder mit reserviertem Platz erscheinen weich */
.fade-in { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.fade-in.is-loaded, .no-js .fade-in { opacity: 1; }