/* =========================================================
 * i2t3 Base — custom styles
 * Overrides Bootstrap 5.3 CSS variables with i2t3 theme
 * variables (which come from the Constants Editor).
 * ========================================================= */

:root {
    --bs-primary: var(--i2t3-primary);
    --bs-secondary: var(--i2t3-secondary);
    --bs-body-color: var(--i2t3-text);
    --bs-body-bg: var(--i2t3-background);
    --bs-body-font-family: var(--i2t3-font-body);
    --bs-body-font-size: var(--i2t3-font-size-base);
    --bs-heading-color: var(--i2t3-primary);
    --bs-link-color: var(--i2t3-primary);
}

/* Root font-size drives all rem-based sizes site-wide so the
 * Constants Editor's baseSize actually scales everything. Without
 * this, only body inherits the size but rem-based child elements
 * (which is most of Bootstrap) stay anchored to the browser default
 * 16px. */
html {
    font-size: var(--i2t3-font-size-base, 16px);
}

/* Content container width comes from the theme (settings.layout.contentWidth
 * -> --i2t3-content-width). Overrides Bootstrap's responsive .container cap so
 * a custom px / full / full-minus-N value takes effect site-wide. */
.container {
    max-width: var(--i2t3-content-width, 1200px);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--i2t3-font-heading);
}

/* Opt-in font-family utilities — switch a single element's face, e.g. a
 * heading tag that should read in the body font (sublines, small labels). */
.i2t3-font-body { font-family: var(--i2t3-font-body); }
.i2t3-font-heading { font-family: var(--i2t3-font-heading); }

/* Forms: visually hide field labels (kept for screen readers) so the inputs
 * rely on their placeholders. Opt-in via the element's CSS class. */
.i2t3-form-hide-labels label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Per-level uppercase, driven by the theme (typography.uppercaseHeadings). */
h1, .h1 { text-transform: var(--i2t3-h1-transform, none); }
h2, .h2 { text-transform: var(--i2t3-h2-transform, none); }
h3, .h3 { text-transform: var(--i2t3-h3-transform, none); }
h4, .h4 { text-transform: var(--i2t3-h4-transform, none); }
h5, .h5 { text-transform: var(--i2t3-h5-transform, none); }
h6, .h6 { text-transform: var(--i2t3-h6-transform, none); }

/* Image shape (i2t3_image_shape) — rounds the images inside the element. */
.i2t3-img-rounded img { border-radius: 0.75rem; }
.i2t3-img-circle img {
    max-width: 100%;       /* size stays with imagewidth; never force the width */
    height: auto;          /* override the <img> height attr so aspect-ratio wins */
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}
/* bordered: Bootstrap img-thumbnail look (1:1 with Karma's "bordered"). */
.i2t3-img-bordered img {
    border: 1px solid #dee2e6;
    padding: 0.25rem;
    border-radius: 0.375rem;
    background: #fff;
}

/* Inverse content-layout bands (dark / brand background): force text AND
 * headings to white, otherwise the primary-coloured headings vanish on a
 * coloured band. Set via the layout's css_class = "i2t3-inverse". */
.i2t3-inverse,
.i2t3-inverse h1, .i2t3-inverse h2, .i2t3-inverse h3,
.i2t3-inverse h4, .i2t3-inverse h5, .i2t3-inverse h6,
.i2t3-inverse p, .i2t3-inverse li, .i2t3-inverse a {
    color: #fff;
}

/* Text outline/contour utility — legibility for text over images (e.g. the
 * masthead). Activate via a layout's css_class = "i2t3-text-outline". */
.i2t3-text-outline :is(h1, h2, h3, h4, h5, h6, p, .i2t3-header__title) {
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.55),
         1px -1px 0 rgba(0, 0, 0, 0.55),
        -1px  1px 0 rgba(0, 0, 0, 0.55),
         1px  1px 0 rgba(0, 0, 0, 0.55);
}
/* An outline-light button on an inverse masthead keeps the outline shadow at
 * rest (legible white-on-photo). On hover the button fills light, so invert to
 * dark text and drop the shadow — otherwise the dark outline muddies the label
 * on the now-light fill. */
.i2t3-inverse .btn-outline-light:hover {
    color: #000;
    text-shadow: none;
}

/* Oversized hero headline — much larger than h1, responsive. Generic display
 * utility (reusable across projects). */
.i2t3-hero-title {
    font-size: clamp(3rem, 9vw, 7rem);
    line-height: 1;
    font-weight: 800;
    margin: 0;
}

/* Map Bootstrap's "primary" onto the theme primary colour. The vendor Bootstrap
 * build hardcodes blue (#0d6efd) for .btn-primary and uses --bs-primary-rgb for
 * .text-primary/.bg-primary, so setting --bs-primary alone doesn't recolour the
 * components. Mapping the component variables/properties to var(--i2t3-primary)
 * makes the whole "primary" system follow the theme/scheme — no per-site classes. */
.btn-primary {
    --bs-btn-bg: var(--i2t3-primary);
    --bs-btn-border-color: var(--i2t3-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--i2t3-primary) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--i2t3-primary) 88%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--i2t3-primary) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--i2t3-primary) 80%, #000);
    --bs-btn-disabled-bg: var(--i2t3-primary);
    --bs-btn-disabled-border-color: var(--i2t3-primary);
}
.text-primary { color: var(--i2t3-primary) !important; }
.bg-primary { background-color: var(--i2t3-primary) !important; }

/* Heading accent: a short brand-coloured bar under a heading. Generic, opt-in
 * via the class; centered under centered headings. */
.i2t3-heading-accent::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--i2t3-accent);
    margin: 0.75rem auto 0;
}

/* Container vertical-distribution modes (need a min-height to have room):
 *   between        children spread top & bottom (space-between)
 *   center-bottom  first element fills & centers its content, last sits bottom
 * Both make the section fill the min-height flex parent. Gated by the modifier
 * class so other containers are unaffected. */
.i2t3-container--between,
.i2t3-container--center-bottom {
    flex: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.i2t3-container--between > .container,
.i2t3-container--between > .container-fluid,
.i2t3-container--center-bottom > .container,
.i2t3-container--center-bottom > .container-fluid {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.i2t3-container--between > .container,
.i2t3-container--between > .container-fluid {
    justify-content: space-between;
}
/* center-bottom: first child grows & centers its content, last stays at bottom.
 * display:flex needs !important to beat the inline display:flow-root the
 * LayoutWrapper emits on each element. */
.i2t3-container--center-bottom > .container > :first-child,
.i2t3-container--center-bottom > .container-fluid > :first-child {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}
/* Keep the inner content box full width (its margin-inline:auto would otherwise
 * shrink-to-fit inside the flex column and look centered, not left-aligned). */
.i2t3-container--center-bottom > .container > :first-child > *,
.i2t3-container--center-bottom > .container-fluid > :first-child > * {
    width: 100%;
}

/* ---------- Header ---------- */
.i2t3-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--i2t3-background);
    min-height: 96px;
    display: flex;
    align-items: center;
}

.i2t3-header--sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.i2t3-header__brand {
    text-decoration: none;
    color: var(--i2t3-text);
    font-weight: 700;
    font-size: 1.25rem;
}

.i2t3-header__logo {
    height: 80px;
    width: auto;
    display: block;
}

.i2t3-nav__list {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.i2t3-nav__link {
    color: var(--i2t3-text);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0;
}

.i2t3-nav__link:hover {
    color: var(--i2t3-primary);
}

.i2t3-nav__link.is-active {
    color: var(--i2t3-primary);
    border-bottom: 2px solid var(--i2t3-primary);
}

/* ---------- Main / sections ---------- */
.i2t3-main {
    min-height: 50vh;
}

/* ---------- Footer ---------- */
/* Footer: Logo links neben den Spalten (Flex-Reihe), bricht mobil um. */
.i2t3-footer__main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.5rem; margin-bottom: 1.5rem; }
.i2t3-footer__main .i2t3-footer__cols { flex: 1 1 320px; min-width: 0; margin: 0; }
.i2t3-footer__logo { flex: 0 0 auto; margin-bottom: 0; align-self: center; }
.i2t3-footer__logo-img { height: 64px; width: auto; max-width: 100%; }
.i2t3-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 2rem 0;
    margin-top: 0;
    color: var(--i2t3-text-muted);
    text-align: center;
}

/* Footer menu (navigation.footerMenu) — horizontal, centered link row. */
.i2t3-footer__menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
/* Stacked variant: footer menu as its own column (links below each other),
 * centered to match the other footer columns. */
.i2t3-footer__menu-list--stacked {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.i2t3-footer__menu-link {
    color: inherit;
    text-decoration: none;
}
.i2t3-footer__menu-link:hover,
.i2t3-footer__menu-link.is-active {
    text-decoration: underline;
}

/* ---------- Nested navigation dropdown ----------
 * Bootstrap 5 drops nested dropdown support. We re-add it minimally so
 * a third menu level slides out to the right of its parent dropdown
 * item on hover, falling back to click on touch devices. */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
    margin-top: -0.25rem;
    margin-left: 0;
    /* Tall submenus stay reachable instead of running off the bottom. */
    max-height: 80vh;
    overflow-y: auto;
}
/* Open to the LEFT when there is no room on the right (set by header.js
 * when the submenu would otherwise leave the viewport). */
.dropdown-submenu.i2t3-flip > .dropdown-menu {
    left: auto;
    right: 100%;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu.show > .dropdown-menu {
    display: block;
}
.dropdown-submenu > .dropdown-toggle::after {
    transform: rotate(-90deg);
}
.dropdown-submenu.i2t3-flip > .dropdown-toggle::after {
    transform: rotate(90deg);
}

/* ---------- Hero CE ---------- */
.i2t3-hero {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, var(--i2t3-primary), var(--i2t3-accent));
}

.i2t3-hero--with-image {
    background: #000;
}

.i2t3-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.i2t3-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.i2t3-hero__content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 1rem;
}

.i2t3-hero__headline {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.1;
    color: #fff;
}

.i2t3-hero__subline {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.i2t3-hero__text {
    font-size: 1.05rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.i2t3-hero__cta {
    display: inline-block;
    padding: 0.85rem 2rem;
    background: #fff;
    color: var(--i2t3-primary);
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.i2t3-hero__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    color: var(--i2t3-primary);
}

/* Multi-column list utility (e.g. the Estrich types list): 1 column on
 * mobile, 2 on tablet, 3 on desktop. Put the class on a <ul>/<ol>. */
.i2t3-list-columns {
    column-count: 1;
    column-gap: 2rem;
    margin-bottom: 0;
}
@media (min-width: 576px) {
    .i2t3-list-columns { column-count: 2; }
}
@media (min-width: 992px) {
    .i2t3-list-columns { column-count: 3; }
}
.i2t3-list-columns > li {
    break-inside: avoid;
}

/* =========================================================
 * Fluid Styled Content — ce-* layout
 * TYPO3 v13 FSC ships these only as TypoScript-generated inline CSS
 * (_CSS_DEFAULT_STYLE), which the legacy static include does not pull in.
 * Provided here so image position (above/below/intext left/right) and the
 * multi-column image grid actually lay out. Mirrors FSC's Styling defaults.
 * ========================================================= */
.ce-textpic, .ce-image, .ce-nowrap .ce-bodytext,
.ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div { overflow: hidden; }

.ce-left .ce-gallery, .ce-column { float: left; }
.ce-center .ce-outer { position: relative; float: right; right: 50%; }
.ce-center .ce-inner { position: relative; float: right; right: -50%; }
.ce-right .ce-gallery { float: right; }

.ce-gallery figure { display: table; margin: 0; }
.ce-gallery figcaption { display: table-caption; caption-side: bottom; }
.ce-gallery img { display: block; }

.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery,
.ce-above .ce-gallery { margin-bottom: 10px; }
.ce-image .ce-gallery { margin-bottom: 0; }
.ce-intext.ce-right .ce-gallery { margin-left: 20px; }
.ce-intext.ce-left .ce-gallery { margin-right: 20px; }
.ce-below .ce-gallery { margin-top: 10px; }

.ce-column { margin-right: 20px; }
.ce-column:last-child { margin-right: 0; }
.ce-row { margin-bottom: 20px; }
.ce-row:last-child { margin-bottom: 0; }
.ce-above .ce-bodytext { clear: both; }

/* Form: .form-group is a Bootstrap 4 class with no effect in BS5, so EXT:form
 * fields had no spacing and labels stuck to the neighbouring field. */
.form-group { margin-bottom: 1rem; }

/* Bootstrap gives every <p> a margin-bottom: 1rem (paragraph rhythm). When a
 * paragraph is the LAST child of a box that traps margins (our flow-root bands,
 * alerts, cards, flex containers …), that trailing 1rem shows as an unwanted gap
 * at the bottom. Reset only the last paragraph's bottom margin — spacing BETWEEN
 * paragraphs (from the non-last ones) stays intact. One rule instead of per-box
 * patches. */
p:last-child { margin-bottom: 0; }