/* from Banner.DojJn5iM.css */
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:2rem}

/* from default.7sM6FySx.css */
footer div:first-child h1,footer div:first-child h2,footer div:first-child h3,footer div:first-child h4,footer div:first-child h5,footer div:first-child h6,footer div:first-child p.h1,footer div:first-child p.h2,footer div:first-child p.h3,footer div:first-child p.h4,footer div:first-child p.h5,footer div:first-child p.h6{margin-bottom:2rem}


/* fallbacks for custom hooks used in the markup */
.text-dark{color:#1a1a1a}
.bg-dark{background-color:#1a1a1a}
.cta{cursor:pointer}

/* Scroll-driven header, mirroring the live site. The colour bar and nav keep
   fixed heights (set inline: bar 70/132, nav 175) and translate up in the min
   (scrolled-down) state; the logo steps full -> 100px -> 86px. JS toggles
   .ck-scrolled (mid|min) and .ck-min (min) on <header>, plus .go-small on the logo. */
/* One shared duration + easing for everything that animates as the header
   collapses (logo, colour bar, padding, nav and the breadcrumb), so they move
   in lockstep instead of the logo finishing fractionally before the bar. Tweak
   in one place. */
header { --ck-hdr-dur: .25s; --ck-hdr-ease: ease; }
.logo-handler { transition: width var(--ck-hdr-dur) var(--ck-hdr-ease), margin var(--ck-hdr-dur) var(--ck-hdr-ease), transform var(--ck-hdr-dur) var(--ck-hdr-ease); transform-origin: left top; }
[data-ck-topbar] { transition: transform var(--ck-hdr-dur) var(--ck-hdr-ease), background-color var(--ck-hdr-dur) var(--ck-hdr-ease); }
[data-ck-header-inner] { transition: padding var(--ck-hdr-dur) var(--ck-hdr-ease); }
[data-ck-nav] { transition: height var(--ck-hdr-dur) var(--ck-hdr-ease), transform var(--ck-hdr-dur) var(--ck-hdr-ease); }
header [data-ck-breadcrumb] { transition: opacity var(--ck-hdr-dur) var(--ck-hdr-ease), transform var(--ck-hdr-dur) var(--ck-hdr-ease); }

/* Logo: full size comes from the Tailwind classes set in PHP; the two smaller
   steps are the scroll states. */
header.ck-scrolled .logo-handler:not(.go-small) { width: 100px !important; margin-top: -0.375rem; }
.logo-handler.go-small { width: 86px !important; margin-top: -0.375rem; transform: translateY(-20px); }

/* Tighten header padding once scrolled. */
header.ck-scrolled [data-ck-header-inner] { padding-top: 1rem !important; padding-bottom: 1rem !important; }

/* Nav shrinks on scroll and lifts in the min state on submenu pages. */
header.ck-scrolled [data-ck-nav] { height: 120px !important; }
header.ck-min.ck-has-sub [data-ck-nav] { transform: translateY(-67px); }

/* Colour bar lifts in the min state on submenu pages (132px bar -> 70px visible). */
header.ck-min.ck-has-sub [data-ck-topbar] { transform: translateY(-62px); }

/* Breadcrumb (section path, mt-auto at the bottom of the nav). Matching the live
   header: as soon as the header leaves its full state it fades out and drops
   DOWN (translate-y-12), rather than riding the shrinking nav upward. Applying
   this on .ck-scrolled (not the deeper .ck-min) is what stops the upward drift. */
header.ck-scrolled [data-ck-breadcrumb] {
	opacity: 0;
	transform: translateY(3rem); /* translate-y-12 */
	pointer-events: none;
}

/* blockText multi-column body: leading heading spans all columns. */
.ck-text-columns > h1, .ck-text-columns > h2, .ck-text-columns > h3, .ck-text-columns > h4 { column-span: all; }
.ck-text-columns p { break-inside: avoid-column; }

/* Entrance cards expect square images (the original is fed pre-cropped squares);
   our media library serves originals, so force a square crop for the round look.
   aspect-square is not in the purged Tailwind build, so it is defined here. */
.aspect-square { aspect-ratio: 1 / 1; }

/* Rich-text (footer columns + any .content-document): the WYSIWYG emits bare
   headings. site.css already sizes bare h1-h6 globally to the exact live scale
   (h1 clamp 2.19->5rem ... h6 clamp 1->1.13rem), so no per-level overrides are
   needed here — that keeps rich-text headings (e.g. the H5 "Kontakt Campus
   Kolding") matching the reference site instead of being inflated. */
/* Underline rich-text links, but never the CTA pill button. */
.content-document a:not(.cta) { text-decoration: underline; }

/* Simple-top factbox: the small white info card. Its body text is one step down
   (text-sm -> md:text-base), matching the live card. */
.ck-cd-factbox p { font-size: 0.875rem; line-height: 1.25rem; }
@media (min-width: 768px) { .ck-cd-factbox p { font-size: 1rem; line-height: 1.5rem; } }

/* Contextual CTA colours for the footer. The live rules only target
   div.bg-{theme}, so a CTA in the <footer> (which is footer.bg-green, not a div)
   gets no theme tint — these mirror the same rules for the footer element so an
   in-footer [cta] reads correctly per theme. */
footer.bg-pink.text-black a.cta.bg-black   { --tw-text-opacity: 1; color: rgb(255 120 160 / var(--tw-text-opacity)); }
footer.bg-blue.text-black a.cta.bg-black   { --tw-text-opacity: 1; color: rgb(200 230 255 / var(--tw-text-opacity)); }
footer.bg-yellow.text-black a.cta.bg-black { --tw-text-opacity: 1; color: rgb(240 255 135 / var(--tw-text-opacity)); }
footer.bg-white.text-black a.cta.bg-black  { color: #fff; }
footer.bg-green.text-white a.cta.bg-black  { background: #fff; color: #238232; }

/* The blockTextImage cover (oval) and reel variants render their lead heading
   one step up (the live renderer emits <h2 class="h1"> / a bare <h1>), so
   headings inside their rich text use the h1 scale. The "Default" variant keeps
   the generic per-level scale and does NOT get this class. */
.ck-cd-feature h1, .ck-cd-feature h2 {
	font-size: clamp(2.19rem, calc(1.63rem + 2.81vw), 5rem);
	letter-spacing: -1.5px;
	line-height: 1.16;
}
@media (min-width: 1920px) {
	.ck-cd-feature h1, .ck-cd-feature h2 { letter-spacing: -2.4px; line-height: 1.125; }
}

/* Decorative stickers / vector graphics always sit behind WYSIWYG text. The
   sticker's container is isolated into its own stacking context so the negative
   z stays above the block background but below all in-flow content. */
/* Stickers paint in front of in-flow imagery (banner photos etc.). The parent
   isolation keeps the z-10 contained inside its own block, so stickers can never
   ride above the fixed header or neighbouring blocks. */
.ck-sticker { z-index: 10; }
:has( > .ck-sticker ) { isolation: isolate; }

/* Header stacking: the fixed header (and the mobile drawer nested inside it) must
   sit above page-level fixed elements such as the article-hub filter (z-50), so
   the drawer always covers the page on mobile. Tailwind didn't compile these
   arbitrary z-index steps, so they're defined here. */
.z-\[60\]{z-index:60}
.z-\[70\]{z-index:70}

/* Footer rich-text parity with the live site. The Nuxt footer renders its
   RichText with element-classes {h5:"h3 lg:h2"}, so the "Kontakt" heading
   (a heading-5) shows at h3 size, then h2 from lg up — our importer emits a bare
   <h5>, so restore that sizing here. It also gives every footer heading a 2rem
   bottom margin (scoped layout rule). */
footer .content-document h5 {
	font-size: clamp(1.5rem, calc(1.38rem + .52vw), 2rem);
	letter-spacing: -.72px;
	line-height: 1.2;
}
@media (min-width: 1024px) {
	footer .content-document h5 {
		font-size: clamp(1.88rem, calc(1.63rem + 1.04vw), 2.88rem);
		letter-spacing: -1.05px;
	}
}
footer > div:first-child :is( h1, h2, h3, h4, h5, h6 ) {
	margin-bottom: 2rem;
}

/* Image aspect crops used by the text-image variants (and the gallery). The
   live site crops server-side (Contentful fit=thumb), so these arbitrary-value
   utilities were never compiled into the Tailwind bundle — define them here so
   WordPress-served originals render at the same size/shape. */
.aspect-\[911\/706\] { aspect-ratio: 911 / 706; }
.aspect-\[532\/946\] { aspect-ratio: 532 / 946; }
.aspect-\[332\/478\] { aspect-ratio: 332 / 478; }

/* Hero min-height — this arbitrary utility wasn't in the compiled Tailwind
   bundle. lg = 1024px (matches site breakpoints). */
@media (min-width: 1024px) { .lg\:min-h-\[568px\] { min-height: 568px; } }

/* Missing-from-bundle utilities used by the filter bar. Without !ml-0 the mobile
   toggle button inherits space-x-4's margin-left inside its fixed wrapper and
   pokes 1rem past the right viewport edge (fixed elements escape the page's
   overflow-x-hidden), causing horizontal scroll on mobile. */
.\!ml-0 { margin-left: 0 !important; }
.max-h-\[calc\(100vh-100px\)\] { max-height: calc(100vh - 100px); }

/* Consecutive CTA buttons inside rich text get breathing room (mirrors the
   space-y-6 gap the source site applies between block-level CTA embeds). */
.content-document .cta ~ .cta { margin-top: 1.5rem; }

/* Rich-text links: the live renderer stamps `safe-link underline inline-block`
   on every non-CTA anchor; equivalent rule for our imported HTML. */
.content-document a:not(.cta) { text-decoration-line: underline; display: inline-block; }

/* Discount-column paragraphs get the live lg:pr-10 breathing room. */
@media (min-width: 1024px) { .ck-text-columns p { padding-right: 2.5rem; } }

/* ---- Form block (native fallback + Gravity Forms wrapper) ---- */
.ck-form-field { margin-bottom: 22px; }
.ck-form-field > label { display: block; font-weight: 700; margin-bottom: 8px; }
.ck-form input[type=text], .ck-form input[type=email], .ck-form input[type=tel],
.ck-form input[type=number], .ck-form textarea, .ck-form select {
	width: 100%; background: #fff; border: 2px solid #1a1a1a; border-radius: 14px;
	padding: 14px 18px; font: inherit; color: #1a1a1a;
}
.ck-form textarea { resize: vertical; }
.ck-form input:focus, .ck-form textarea:focus, .ck-form select:focus {
	outline: 3px solid currentColor; outline-offset: 2px;
}
.ck-form-check { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; cursor: pointer; }
.ck-form-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: #1a1a1a; }
.ck-form-hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.ck-form-submit {
	display: inline-block; background: #1a1a1a; color: #fff; border: 2px solid #1a1a1a;
	border-radius: 9999px; padding: 14px 40px; font: inherit; font-weight: 700; cursor: pointer;
	transition: background .15s, color .15s;
}
.ck-form-submit:hover { background: transparent; color: #1a1a1a; }
/* Gravity Forms inherits the same control styling */
.ck-form--gf input[type=text], .ck-form--gf input[type=email], .ck-form--gf input[type=tel],
.ck-form--gf input[type=number], .ck-form--gf textarea, .ck-form--gf select { border-radius: 14px; border: 2px solid #1a1a1a; padding: 14px 18px; width: 100%; }
.ck-form--gf .gform_button { background: #1a1a1a; color: #fff; border-radius: 9999px; padding: 14px 40px; border: 2px solid #1a1a1a; font-weight: 700; cursor: pointer; }