/* ==========================================================================
   id4web – Architekturbüro Dorothea Babel-Rampp
   Gestaltungsschicht über Bootstrap Package 16 (ersetzt custom.css des Bestands)
   Werte gemessen am Bestand (TYPO3 8.7 / Bootstrap Package 8.0.3)
   ========================================================================== */

:root {
    --id4web-blue: #2b3287;
    --id4web-grey-light: #f2f2f2;
    --id4web-grey: #666;
    --id4web-text: #333;
}

/* Gestaltungsvorgabe: alles eckig (Cards, Buttons, Formulare, Bilder …).
   Bootstrap-Schalter enable-rounded wirkt über Site-Settings nicht (0 ist in Sass wahr),
   daher über die CSS-Variablen und eine globale Regel. */
:root {
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;
}
*, *::before, *::after { border-radius: 0 !important; }

body {
    font-size: 16px;
    line-height: 1.55;
    color: var(--id4web-text);
}

/* --- Kopfbereich -------------------------------------------------------- */
/* Höhen laufen über die BP-Variable --mainnavigation-nav-height, damit die
   Schrumpf-Animation (Klasse .navbar-transition ab 120px Scrollweg) greift.
   Bestand: 100px Desktop / 70px mobil. Beim Scrollen: 64px / 60px. */
.bp-page-header.navbar-mainnavigation {
    --mainnavigation-nav-height: 70px;
    --id4web-logo-height: 40px;
    background: #fff;
    padding: 0;
    min-height: var(--mainnavigation-nav-height);
    box-shadow: none;
    transition: min-height .27s ease, box-shadow .27s ease;
}
.bp-page-header.navbar-mainnavigation.navbar-transition {
    --mainnavigation-nav-height: 60px;
    --id4web-logo-height: 34px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.container-top {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 5px;
    background: #fff;
}
.bp-page-header .navbar-brand {
    display: flex;
    align-items: center;
    height: var(--mainnavigation-nav-height);
    padding: 0 20px;
    transition: height .27s ease;
}
.bp-page-header .navbar-brand-image img {
    top: auto;
    transform: none;
    width: auto;
    height: var(--id4web-logo-height);
    max-height: none;
    transition: height .27s ease;
}
.bp-page-header .navbar-nav .nav-link {
    color: var(--id4web-blue);
    text-transform: uppercase;
    font-size: 16px;
    transition: background-color .5s, color .5s, line-height .27s ease;
}
.bp-page-header .navbar-nav .nav-link:hover,
.bp-page-header .navbar-nav .nav-link:focus-visible,
.bp-page-header .navbar-nav .nav-link.active {
    background: var(--id4web-grey-light);
    /* Bestand: #999 (Kontrast 2,8:1) – auf Blau angehoben (Kontrast > 9:1) */
    color: var(--id4web-blue);
}
.bp-page-header .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--id4web-blue);
    outline-offset: -2px;
}
@media (max-width: 991.98px) {
    .bp-page-header .navbar-toggler { margin-right: 20px; }
    .bp-page-header #mainnavigation { flex-basis: 100%; }
    .bp-page-header .navbar-nav .nav-link { padding: 12px 20px; }
}
@media (min-width: 992px) {
    .bp-page-header.navbar-mainnavigation {
        --mainnavigation-nav-height: 100px;
        --id4web-logo-height: 95px;
    }
    .bp-page-header.navbar-mainnavigation.navbar-transition {
        --mainnavigation-nav-height: 64px;
        --id4web-logo-height: 54px;
    }
    .container-top { flex-wrap: nowrap; }
    /* Logo wie im Bestand bündig an der Oberkante (gemessen: y = -2px) */
    .bp-page-header .navbar-brand { align-items: flex-start; }
    .bp-page-header .navbar-brand-image img { margin-top: -2px; }
    .bp-page-header #mainnavigation {
        display: flex !important;
        flex: 0 0 auto;
        justify-content: flex-end;
    }
    .bp-page-header .navbar-nav { flex-direction: row; }
    .bp-page-header .navbar-nav .nav-link {
        line-height: var(--mainnavigation-nav-height);
        padding: 0 20px;
    }
    /* BP 16: Header ist sticky – kein Ausgleichsabstand wie im Bestand nötig */
    .body-bg-top { padding-top: 0; }
}
@media (min-width: 1025px) {
    .container-top { margin: 0 30px; }
}

/* --- Slogan im Startseiten-Karussell (vormals .awesome / .superawesome) -- */
.id4web-slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.carousel-text-inner { padding: 0 15px; }
/* Dezent modernisiert (Einblenden nur einmal beim Laden, siehe id4web.js): weicher Textschatten statt hartem Schwarz, Balken als
   „Milchglas“ (nur Hintergrund transparent, Schrift voll deckend), leichte
   Abdunklung zur Bildmitte und gestaffeltes Einblenden der Zeilen. */
.carousel-item-type-text_and_image .carousel-backgroundimage-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .10) 60%, rgba(0, 0, 0, 0) 100%);
}
.awesome {
    font-size: 3em;
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.55;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 18px rgba(0, 0, 0, .35);
    margin-bottom: 20px;
    color: #fff;
}
.superawesome,
.superawesome p {
    color: var(--id4web-blue);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2.1rem;
    line-height: 1.55;
    margin-bottom: 20px;
}
/* Milchglas-Balken direkt am Absatz – unabhängig davon, ob der Text im RTE noch
   ein <span class="balken"> enthält (CKEditor 5 entfernt die Klasse beim Speichern). */
.id4web-slogan .superawesome > p {
    display: inline-block;
    margin: 0;
    padding: 12px 30px;
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    letter-spacing: .04em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(43, 50, 135, .12);
}
/* Altes Markup ohne <p> (nur span.balken): gleiche Optik */
.id4web-slogan .superawesome > .balken {
    display: inline-block;
    padding: 12px 30px;
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    letter-spacing: .04em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(43, 50, 135, .12);
}
/* span.balken innerhalb eines <p>: kein zweiter Balken */
.id4web-slogan .superawesome > p .balken { background: none; padding: 0; box-shadow: none; }
@keyframes id4web-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
html:not(.id4web-intro-done) .carousel-item.active .id4web-slogan .carousel-text-inner > * {
    animation: id4web-fade-up .7s ease-out both;
}
html:not(.id4web-intro-done) .carousel-item.active .id4web-slogan .carousel-text-inner > *:nth-child(2) { animation-delay: .15s; }
html:not(.id4web-intro-done) .carousel-item.active .id4web-slogan .carousel-text-inner > *:nth-child(3) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
    .carousel-item.active .id4web-slogan .carousel-text-inner > * { animation: none; }
}
/* Mobil: Balken kompakter, damit keine einzelnen Bindestriche umbrechen */
@media (max-width: 767.98px) {
    .id4web-slogan .superawesome,
    .id4web-slogan .superawesome p { font-size: 1.25rem; letter-spacing: .02em; }
    .id4web-slogan .superawesome > p,
    .id4web-slogan .superawesome > .balken { padding: 10px 16px; }
    .id4web-slogan .awesome { font-size: 1.6rem; }
}

/* --- Überschriften ------------------------------------------------------ */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    color: var(--id4web-text);
    text-transform: uppercase;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { line-height: 1.1; margin-top: 0; margin-bottom: 12px; font-weight: 300; }
h1, .h1 { font-size: 2.4rem; color: var(--id4web-blue); font-weight: 700; }
h2, .h2 { font-size: 2.1rem; padding-bottom: 20px; }
h3, .h3 { font-size: 1.8rem; }
h4, .h4 { font-size: 1.5rem; }
.lead { font-size: 1.3rem; font-weight: 300; line-height: 1.4; margin-bottom: 24px; }
p { margin-bottom: 12px; }

/* --- Bereiche ----------------------------------------------------------- */
.bp-page-content > .section-default { padding-top: 80px; padding-bottom: 80px; }
.bp-page-content .frame:not(.frame-background-none):not(.frame-type-menu_thumbnail_dir),
.bp-page-content .frame-default { padding-top: 32px; padding-bottom: 32px; }
.frame-ruler-after > .frame-group-container,
.frame-ruler-after::after { border-color: #eee; }
.carousel-small, .carousel-small .carousel-item { height: 400px; min-height: 400px; }
.section-primary {
    background-color: var(--id4web-grey-light);
    /* ganz leichter Verlauf um das Bestandsgrau #f2f2f2 */
    background-image: linear-gradient(170deg, #f7f7f7 0%, #f2f2f2 55%, #ebebeb 100%);
    color: inherit;
}
.section-primary a:not(.btn) { color: var(--id4web-text); }
.section { border-bottom: 1px solid #fff; }

/* Listen mit Pfeil-Aufzählung */
.main-section li {
    list-style-image: url('../Images/li.png');
    line-height: 160%;
    padding-left: 10px;
}

/* --- Thumbnail-Menü als Cards (Startseite / Projekte) -------------------- */
/* Modernisiert gegenüber Bestand (graue Kachel mit Pfeil): Card mit Schatten,
   Titel + Pfeil unter dem Bild, Hover hebt die Card an und zoomt das Bild.
   BP 16-Overlay (unsichtbarer Titel, Graustufen-Hover) wird neutralisiert. */
.thumbnail-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 8px 0 16px;
}
.thumbnail-menu .thumbnail-menu-item { width: auto; max-width: none; padding: 0; margin: 0; }
.thumbnail-menu .thumbnail-menu-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    overflow: hidden;
    color: var(--id4web-text);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(43, 50, 135, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.thumbnail-menu .thumbnail-menu-image {
    aspect-ratio: 16 / 10;
    height: auto;
    overflow: hidden;
}
.thumbnail-menu .thumbnail-menu-image img,
.thumbnail-menu .thumbnail-menu-image picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none !important;
    transition: transform .4s ease;
}
.thumbnail-menu .thumbnail-menu-caption {
    position: static;
    opacity: 1;
    height: auto;
    flex: 1 0 auto;
    justify-content: space-between;
    background: #fff;
    border-top: 3px solid var(--id4web-blue);
    color: var(--id4web-text);
}
.thumbnail-menu .thumbnail-menu-caption-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    text-align: left;
}
.thumbnail-menu .thumbnail-menu-caption-title {
    opacity: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--id4web-blue);
}
.thumbnail-menu .thumbnail-menu-caption-inner::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--id4web-blue);
    border-right: 2px solid var(--id4web-blue);
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.thumbnail-menu .thumbnail-menu-link:hover,
.thumbnail-menu .thumbnail-menu-link:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 14px 32px rgba(43, 50, 135, .16);
}
.thumbnail-menu .thumbnail-menu-link:hover .thumbnail-menu-image img,
.thumbnail-menu .thumbnail-menu-link:focus-visible .thumbnail-menu-image img { transform: scale(1.05); }
.thumbnail-menu .thumbnail-menu-link:hover .thumbnail-menu-caption-inner::after,
.thumbnail-menu .thumbnail-menu-link:focus-visible .thumbnail-menu-caption-inner::after { transform: translateX(4px) rotate(45deg); }
.thumbnail-menu .thumbnail-menu-link:focus-visible { outline: 3px solid var(--id4web-blue); outline-offset: 3px; }
@media (max-width: 991.98px) {
    .thumbnail-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 479.98px) {
    .thumbnail-menu { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .thumbnail-menu .thumbnail-menu-link,
    .thumbnail-menu .thumbnail-menu-image img { transition: none; }
}

/* --- Frame "Schnelleinstiege id4web" ------------------------------------ */
.frame-id4web-entry { background: var(--id4web-grey-light); padding: 0; margin: 0 0 35px; }
.frame-id4web-entry img { border: 10px solid var(--id4web-grey-light); }
.frame-id4web-entry .caption { text-align: center; font-size: 16px; text-transform: uppercase; }
.frame-id4web-entry .caption a { color: var(--id4web-blue); }

/* --- Zitat Startseite (vormals Frame "Jumbotron", jetzt Hintergrund "Tertiär") */
.frame-background-tertiary {
    background-color: #ffbe45;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    /* gleicher dezenter Schatten wie die Cards */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(43, 50, 135, .08);
}
.frame-background-tertiary h3 { font-size: 1.8em; line-height: 200%; font-style: italic; }
.frame-background-tertiary h4 { font-size: .8em; }
.frame-background-tertiary p { color: var(--id4web-text); font-size: 1.45em; line-height: 180%; font-style: italic; }
.frame-background-tertiary sup { font-size: .55em; font-style: normal; }
.frame-background-tertiary blockquote {
    border: none;
    background: url('../Images/quote.png') no-repeat;
    padding: 0 0 0 20px;
    margin: 0;
}

/* --- Fußbereich --------------------------------------------------------- */
.footer-section-content {
    background: #666 url('../Images/bg.png') center bottom no-repeat;
    color: #fff;
}
.footer-section-meta {
    background-color: var(--id4web-blue);
    background-image: none;
    color: #fff;
}
.footer-section-content { padding-top: 80px; padding-bottom: 80px; }
.footer-section-meta { padding-top: 48px; padding-bottom: 48px; }
.footer-section-meta .frame { padding-top: 0; padding-bottom: 0; }
.bp-page-footer .footer-section a,
.bp-page-footer .footer-section a:visited { color: #fff; text-decoration: none; }
.bp-page-footer .footer-section a:hover,
.bp-page-footer .footer-section a:focus-visible { color: #fff; text-decoration: underline; }
@media (max-width: 768px) {
    .awesome { font-size: 2em; }
    .superawesome, .superawesome p { font-size: 1.5em; }
    .balken { display: block; }
    .footer-section-content { background-image: url('../Images/bg_750.png'); }
}
@media (max-width: 480px) {
    .awesome { font-size: 1.6em; }
    .footer-section-content { background-image: url('../Images/bg_360.png'); }
    h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-size: 150%; }
    .frame-background-tertiary h3 { font-size: 18px; line-height: 170%; }
    .thumbnail-menu-caption { text-align: left; }
}