/*
 * PCI — main.css
 *
 * Hier nur das, was sich nicht über theme.json regeln lässt.
 * Farben, Schriften und Abstände gehören in die theme.json.
 */


/* ==========================================================================
   Reset
   Browserstandardwerte wegräumen, damit wir auf einer sauberen Basis starten.
   ========================================================================== */

#wpadminbar {
    overflow: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.site-footer :where(.is-layout-constrained) > * {
    margin-block-start: 0 !important;
}
/* Formularelemente erben die Schrift der Seite, sonst nutzen Browser ihre eigene */
input, button, textarea, select {
    font: inherit;
}

.wp-block-paragraph a:hover {
    text-decoration: none !important;
}
/* ==========================================================================
   Header
   Der Header liegt transparent über dem Hero-Bereich und scrollt nicht mit.
   Breite begrenzt auf 1440px, damit er auf sehr großen Bildschirmen nicht
   zu breit wird.
   ========================================================================== */

/* WordPress umhüllt Template-Parts automatisch mit einem <header>-Tag,
   der auf 100% gezogen werden muss */
header.wp-block-template-part {
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */

header.wp-block-template-part {
    width: 100%;
    max-width: 100%;
}

.site-header {
    max-width: 1440px;
    margin-inline: auto;
    width: 100%;
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent !important;
}

.site-header .wp-block-navigation {
    font-size: 22px !important;
}

.site-header .wp-block-navigation-item__content {
    font-size: 22px !important;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 22px !important;
}

/* Navigationspunkte */
.site-header .wp-block-navigation-item__content {
    text-decoration: none;
    transition: color 0.2s ease, text-underline-offset 0.2s ease;
    text-underline-offset: 7px;
    text-decoration-thickness: 1px;
}

.site-header .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--secondary-5) !important;
    text-decoration: underline;
    text-underline-offset: 10px;
}

/* Dropdown nur auf Desktop */
@media (min-width: 751px) {
    .site-header .wp-block-navigation-item.has-child {
        position: relative;
    }

    .site-header .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
        left: 50%;
        transform: translateX(-50%);
        top: calc(100% + 12px);
        border: 1px solid var(--wp--preset--color--neutral-1);
        white-space: nowrap;
        width: max-content;
    }

    /* Unsichtbare Brücke */
    .site-header .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }
}

/* Untermenüpunkte */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--neutral-1) !important;
    text-decoration: none;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--neutral-1) !important;
    text-decoration: underline;
    text-underline-offset: 10px;
}

/* Pfeil ausblenden */
.site-header .wp-block-navigation__submenu-icon {
    display: none;
}

/* Hamburger und Close Icon */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
    height: 34px;
    width: 34px;
    color: #fefefe;
}

.wp-block-navigation__responsive-container-close {
    position: absolute;
    right: 15px;
    top: -70px;
}

.wp-block-navigation__responsive-container-content .wp-block-site-logo {
    position: absolute;
    top: -70px;
    left: 0;
}

/* Mobiles Menü */
.wp-block-navigation__responsive-container.is-menu-open {
    padding: 80px 24px 24px 34px !important;
}

/* Hamburger ab 900px anzeigen */
@media (max-width: 900px) {
    .site-header .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }

    .site-header .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container {
        left: 0 !important;
        transform: none !important;
        position: static !important;
    }
}
/* ==========================================================================
   Akkordeon
   ========================================================================== */

.wp-block-accordion-heading button:hover,
.wp-block-accordion-heading button:hover * {
    text-decoration: none !important;
}

.wp-block-accordion-heading__toggle-icon {
    display: none;
}

.wp-block-accordion-heading__toggle::after {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fdff96' d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm45.66-109.66a8,8,0,0,1,0,11.32l-40,40a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L128,140.69l34.34-34.35A8,8,0,0,1,173.66,106.34Z'%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.wp-block-accordion-heading__toggle::after {
    /* existing styles... */
    transition: transform 0.3s ease;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle::after {
    transform: rotate(180deg);
}
/* ==========================================================================
   Footer
   Gleiche Maximalbreite wie der Header.
   ========================================================================== */

footer.wp-block-template-part {
    width: 100%;
    background-color: var(--wp--preset--color--primary-1);
}

.site-footer {
    max-width: 1440px;
    margin-inline: auto;
    width: 100%;
}

.site-footer .wp-block-columns {
    justify-content: space-between !important;
}

.site-footer a:hover {
    text-decoration: none;
}

/* ==========================================================================
   Slider
   ========================================================================== */
.nextend-arrow {
 background-color: #FDFF96;
 padding: 10px;
 border-radius: 50px;
}

/* ==========================================================================
   Layout-Korrekturen
   WordPress fügt manchmal ungewollte Abstände ein, die wir hier entfernen.
   ========================================================================== */

.wp-site-blocks {
    padding-top: 0 !important;
}

.wp-block-post-content {
    margin-top: 0 !important;
}

/* ==========================================================================
   Buttons
   Hover-Farbe und Höhe lassen sich nicht über theme.json steuern.
   ========================================================================== */
.wp-block-button__link {
    padding: 5px 24px !important;
    height: auto;
    display: flex;
    align-items: center;
}

/*  Buttons (gelb) */
.wp-block-button__link:hover {
    background: var(--wp--preset--color--neutral-1) !important;
    color: var(--wp--preset--color--neutral-4) !important;
    border-color: var(--wp--preset--color--neutral-1) !important;
}

/* Green buttons override */
.has-secondary-1-background-color.wp-block-button__link:hover {
    background: var(--wp--preset--color--primary-2) !important;
    color: var(--wp--preset--color--neutral-1) !important;
}
/* Slider */
.n2-ss-slider-controls-absolute-left-bottom {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}
/* ==========================================================================
   Link Konzept
   ========================================================================== */
:root {
	--link-kind-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 3.41421L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L20.5858 2H18C17.4477 2 17 1.55228 17 1C17 0.447715 17.4477 0 18 0H23C23.5523 0 24 0.447715 24 1V6C24 6.55228 23.5523 7 23 7C22.4477 7 22 6.55228 22 6V3.41421ZM12.9838 3C13.536 3 13.9838 3.44772 13.9838 4C13.9838 4.55228 13.536 5 12.9838 5H3C2.44772 5 2 5.44772 2 6V21C2 21.5523 2.44772 22 3 22H18.0011C18.5534 22 19.0011 21.5523 19.0011 20.9973L18.9734 11.0028C18.9719 10.4505 19.4184 10.0015 19.9706 10C20.5229 9.99847 20.9719 10.4449 20.9734 10.9972L21.0011 21C21.0011 22.6569 19.658 24 18.0011 24H3C1.34315 24 0 22.6569 0 21V6C0 4.34315 1.34315 3 3 3H12.9838Z'/%3E%3C/svg%3E");
	--link-kind-icon-internal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.5858 8H1C0.447715 8 0 7.5523 0 7C0 6.4477 0.447715 6 1 6H20.5858L16.2929 1.70711C15.9024 1.31658 15.9024 0.68342 16.2929 0.29289C16.6834 -0.09763 17.3166 -0.09763 17.7071 0.29289L23.7071 6.2929C24.0976 6.6834 24.0976 7.3166 23.7071 7.7071L17.7071 13.7071C17.3166 14.0976 16.6834 14.0976 16.2929 13.7071C15.9024 13.3166 15.9024 12.6834 16.2929 12.2929L20.5858 8z'/%3E%3C/svg%3E");

	--link-kind-gap: 0.35em;          /* Abstand Icon ↔ Text */
	--link-kind-external-size: 0.85em; /* quadratisch (24 × 24) */
	--link-kind-internal-width: 1em;   /* Pfeil (24 × 14) */
	--link-kind-internal-height: calc(1em * 14 / 24);
}

/* Gemeinsame Basis */
a.link-kind--internal-standalone::before,
a.link-kind--external-standalone::before,
a.link-kind--external-inline::after {
	display: inline;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

/* ---------- Interner Link – freistehend: Pfeil davor ---------- */
a.link-kind--internal-standalone::before {
	content: "\2060";
	content: "\2060" / "";
	padding-inline-end: calc(var(--link-kind-internal-width) + var(--link-kind-gap));
	-webkit-mask-image: var(--link-kind-icon-internal);
	mask-image: var(--link-kind-icon-internal);
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: var(--link-kind-internal-width) var(--link-kind-internal-height);
	mask-size: var(--link-kind-internal-width) var(--link-kind-internal-height);
}

/* ---------- Externer Link – freistehend: Icon davor ---------- */
a.link-kind--external-standalone::before {
	content: "\2060";
	content: "\2060" / "Externer Link:";
	padding-inline-end: calc(var(--link-kind-external-size) + var(--link-kind-gap));
	-webkit-mask-image: var(--link-kind-icon-external);
	mask-image: var(--link-kind-icon-external);
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: var(--link-kind-external-size) var(--link-kind-external-size);
	mask-size: var(--link-kind-external-size) var(--link-kind-external-size);
}

a.link-kind--external-standalone[target="_blank"]::before {
	content: "\2060" / "Externer Link, öffnet in neuem Tab:";
}

/* ---------- Externer Link – Fließtext: Icon danach ---------- */
a.link-kind--external-inline::after {
	content: "\2060";
	content: "\2060" / "(Externer Link)";
	padding-inline-start: calc(var(--link-kind-external-size) + var(--link-kind-gap));
	-webkit-mask-image: var(--link-kind-icon-external);
	mask-image: var(--link-kind-icon-external);
	-webkit-mask-position: right center;
	mask-position: right center;
	-webkit-mask-size: var(--link-kind-external-size) var(--link-kind-external-size);
	mask-size: var(--link-kind-external-size) var(--link-kind-external-size);
}

a.link-kind--external-inline[target="_blank"]::after {
	content: "\2060" / "(Externer Link, öffnet in neuem Tab)";
}

/* Windows-Kontrastmodus: Icon in Systemfarbe statt unsichtbar */
@media (forced-colors: active) {
	a.link-kind--internal-standalone::before,
	a.link-kind--external-standalone::before,
	a.link-kind--external-inline::after {
		background-color: LinkText;
		forced-color-adjust: none;
	}
}
/* ==========================================================================
   Responsive Startseite
   ========================================================================== */
@media (max-width: 800px) {
 .header-logo {
 width: 70%!important;
}
 .home-hero-img {
  width: 80%;
 }
 .responsive-section-abstand {
  margin-top: 80px!important;
}
.text-content-container {
 width: 100%!important;
}
.text-content-container.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 100%;
    }
.cube-info {
 justify-content: center!important;
}

}
@media (max-width: 450px) {
.fuer-bundeslaender-container {
 padding-left: 24px!important;
 padding-right: 24px!important;
}
 .digitalpakt-container {
  width: 80%;
  height: auto;
 }
 .wp-block-button__link { 
  padding: 5px 14px !important;
}
}
@media (max-width: 400px) {
.fuer-bundeslaender-container {
 padding-left: 8px!important;
 padding-right: 8px!important;
}
 .bundesland-column .is-layout-grid {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
  }

    .bundesland-column .is-layout-grid .is-layout-flex {
        align-items: center !important;
        justify-content: center !important;
    }

    .bundesland-column .is-layout-grid p {
        text-align: center !important;
    }
 .digitalpakt-container {
 width: 90%!important;
}
.wp-block-button__link {
    padding: 5px 14px !important;

}
}
/* ==========================================================================
   Responsive Angebot
   ========================================================================== */
@media (max-width: 500px) {
 .technik-bubble {
   width: 218px;
   height: 218px;
 } 
}
/* ==========================================================================
   Responsive Migration
   ========================================================================== */
@media (max-width: 1300px) {
    .n2-ss-slider-controls-absolute-left-bottom {
        top: 25px !important;
    }
}
@media (max-width: 1000px) {
    .n2-ss-slider-controls-absolute-left-bottom {
        top: 45px !important;
    }
}