/*
 * Neonblau Offsite 2026 – Stylesheet
 *
 * 1:1 aus der WordPress-Seite /offsite-2026/ übernommen: alle Stylesheets in
 * derselben Reihenfolge wie dort, reduziert auf die Regeln, die diese Seite
 * tatsächlich verwendet. Die Offsite-eigenen Styles stehen im Abschnitt
 * „Child-Theme style.css“ unter „OFFSITE 2026“.
 */

/* ==================== Aus WordPress übernommen: WP block-library (inline) ==================== */
:root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,161;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px;--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color)}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}

/* ==================== Aus WordPress übernommen: WP global-styles (inline) ==================== */
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--base: #FFFFFF;--wp--preset--color--contrast: #111111;--wp--preset--color--accent-1: #FFEE58;--wp--preset--color--accent-2: #F6CFF4;--wp--preset--color--accent-3: #503AA8;--wp--preset--color--accent-4: #686868;--wp--preset--color--accent-5: #FBFAF3;--wp--preset--color--accent-6: color-mix(in srgb, currentColor 20%, transparent);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 0.875rem;--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);--wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);--wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);--wp--preset--font-family--manrope: Manrope, sans-serif;--wp--preset--font-family--fira-code: "Fira Code", monospace;--wp--preset--spacing--20: 10px;--wp--preset--spacing--30: 20px;--wp--preset--spacing--40: 30px;--wp--preset--spacing--50: clamp(30px, 5vw, 50px);--wp--preset--spacing--60: clamp(30px, 7vw, 70px);--wp--preset--spacing--70: clamp(50px, 7vw, 90px);--wp--preset--spacing--80: clamp(70px, 10vw, 140px);--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:root { --wp--style--global--content-size: 645px;--wp--style--global--wide-size: 1340px; }:where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1.2rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1.2rem; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1.2rem;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1.2rem;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1.2rem;}:root :where(.is-layout-grid){gap: 1.2rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: var(--wp--preset--color--base);color: var(--wp--preset--color--contrast);font-family: var(--wp--preset--font-family--manrope);font-size: var(--wp--preset--font-size--large);font-weight: 300;letter-spacing: -0.1px;line-height: 1.4;--wp--style--root--padding-top: 0px;--wp--style--root--padding-right: var(--wp--preset--spacing--50);--wp--style--root--padding-bottom: 0px;--wp--style--root--padding-left: var(--wp--preset--spacing--50);}a:where(:not(.wp-element-button)){color: currentColor;text-decoration: underline;}:root :where(a:where(:not(.wp-element-button)):hover){text-decoration: none;}h1, h2, h3, h4, h5, h6{font-weight: 400;letter-spacing: -0.1px;line-height: 1.125;}h1{font-size: var(--wp--preset--font-size--xx-large);}h2{font-size: var(--wp--preset--font-size--x-large);}h3{font-size: var(--wp--preset--font-size--large);}h4{font-size: var(--wp--preset--font-size--medium);}h5{font-size: var(--wp--preset--font-size--small);letter-spacing: 0.5px;}h6{font-size: var(--wp--preset--font-size--small);font-weight: 700;letter-spacing: 1.4px;text-transform: uppercase;}:root :where(.wp-element-button, .wp-block-button__link){background-color: var(--wp--preset--color--contrast);border-width: 0;color: var(--wp--preset--color--base);font-family: inherit;font-size: var(--wp--preset--font-size--medium);line-height: inherit;padding-top: 1rem;padding-right: 2.25rem;padding-bottom: 1rem;padding-left: 2.25rem;text-decoration: none;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);border-color: transparent;color: var(--wp--preset--color--base);}:root :where(.wp-element-button:focus, .wp-block-button__link:focus){outline-color: var(--wp--preset--color--accent-4);outline-offset: 2px;}:root :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption){font-size: var(--wp--preset--font-size--small);line-height: 1.4;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-base-color{color: var(--wp--preset--color--base) !important;}.has-contrast-color{color: var(--wp--preset--color--contrast) !important;}.has-accent-1-color{color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-color{color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-color{color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-color{color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-color{color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-color{color: var(--wp--preset--color--accent-6) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-background-color{background-color: var(--wp--preset--color--base) !important;}.has-contrast-background-color{background-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-background-color{background-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-background-color{background-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-background-color{background-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-background-color{background-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-background-color{background-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-background-color{background-color: var(--wp--preset--color--accent-6) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-border-color{border-color: var(--wp--preset--color--base) !important;}.has-contrast-border-color{border-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-border-color{border-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-border-color{border-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-border-color{border-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-border-color{border-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-border-color{border-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-border-color{border-color: var(--wp--preset--color--accent-6) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;}.has-manrope-font-family{font-family: var(--wp--preset--font-family--manrope) !important;}.has-fira-code-font-family{font-family: var(--wp--preset--font-family--fira-code) !important;}

/* ==================== Aus WordPress übernommen: Plugin neonblau-gruppen frontend.css ==================== */
/* Neonblau Gruppen Frontend Styles - Vereinfacht */

/* Group Title - Integriert in Collage */

/* ::before Pseudo-Element entfernt - keine zusätzliche Nummer gewünscht */

/* Gruppe 1 - Titel Position */

/* Gruppe 2 - Titel Position */

/* Gruppe 3 - Titel Position */

/* Gruppe 4 - Titel Position */

/* Gruppe 5 - Titel Position */

/* Gruppen-Beschreibung - Relativ zur Collage positioniert */

/* Gruppe 1 - Beschreibung Position basierend auf Slider */

/* Gruppe 2 - Beschreibung Position basierend auf Slider */

/* Gruppe 3 - Beschreibung Position basierend auf Slider */

/* Gruppe 4 - Beschreibung Position basierend auf Slider */

/* Gruppe 5 - Beschreibung Position basierend auf Slider */

/* Group Member Slider - Figma Specifications */

/* Navigation Arrows - Figma Specifications */

/* Buttons sind nie deaktiviert - endloser Slider */

/* Collage + Slider Layouts - Analog zur Startseite */

/* Layout für Gruppe 1 - Figma Spezifikationen mit festen Pixeln */

/* Slider Position für Gruppe 1 - Feste Pixel-Position */

/* Collage-Bild Positionen für Gruppe 1 - Exakte Figma-Pixel */

/* Layout für Gruppe 2 - Figma Spezifikationen mit relativen Positionen */

/* Slider Position für Gruppe 2 - Relative Position */

/* Collage-Bild Positionen für Gruppe 2 - Relative Positionen */

/* Layout für Gruppe 3 - Figma Spezifikationen mit relativen Positionen */

/* Slider Position für Gruppe 3 - Relative Position */

/* Collage-Bild Positionen für Gruppe 3 - Relative Positionen */

/* Layout für Gruppe 4 - Figma Spezifikationen mit relativen Positionen */

/* Slider Position für Gruppe 4 - Relative Position */

/* Collage-Bild Positionen für Gruppe 4 - Relative Positionen */

/* Layout für Gruppe 5 - Figma Spezifikationen mit relativen Positionen */

/* Slider Position für Gruppe 5 - Relative Position */

/* Collage-Bild Positionen für Gruppe 5 - Relative Positionen */

/* No Content Message */

/* Responsive Design - Analog zur Startseite */

@media (max-width: 768px) {
    
    /* Responsive Styles für integrierte Überschrift */
    
    /* Responsive Styles für Beschreibung */
    
    /* Responsive Styles für Gruppe 2 */
    
    /* Responsive Styles für Gruppe 3 */
    
    /* Responsive Styles für Gruppe 4 */
    
    /* Responsive Styles für Gruppe 5 */
    
    /* Skaliere Slider proportional für Tablet */
    
    /* Slider-Dimensionen für Gruppe 2 - Figma Spezifikationen */
    
    /* Slider-Dimensionen für Gruppe 3 - Figma Spezifikationen */
    
    /* Slider-Dimensionen für Gruppe 5 - Figma Spezifikationen */
    
    /* Navigation-Pfeile für Gruppe 2 - Tablet */
    
    /* Navigation-Pfeile für Gruppe 3 - Tablet */
    
    /* Navigation-Pfeile für Gruppe 5 - Tablet */
}

@media (max-width: 480px) {
    
    /* Skaliere Slider proportional für Mobile */
    
    /* Mobile-Styles für Gruppe 2 */
    
    /* Mobile-Styles für Gruppe 3 */
    
    /* Mobile-Styles für Gruppe 5 */
    
    /* Mobile-Styles für Beschreibung */
}

/* ==========================================================================
   Alumninetzwerk
   ========================================================================== */

/* --- Abschnitt auf der Gruppenseite (unterhalb der letzten Gruppe) --- */

/* --- Grid auf der Unterseite /alumninetzwerk --- */

/* Kachel übernimmt die Optik der Mitglieder-Slides (363 x 432) */

@media (max-width: 480px) {

    /* Auf schmalen Kacheln umbricht der Name schnell – Overlay kompakt halten */
}

/* ==================== Aus WordPress übernommen: Parent-Theme twentytwentyfive style.css ==================== */
/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */

/* Increase the bottom margin on submenus, so that the outline is visible. */

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/

/* ==================== Aus WordPress übernommen: Child-Theme style.css ==================== */
/*
Theme Name:   Twenty Twentyfive Child
Template:     twentytwentyfive
*/

@font-face {
  font-family: 'NeonblauHandschrift';
  src: url('../fonts/NeonblauHandschrift-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-handwriting: 'NeonblauHandschrift', cursive;
}

/** GLOBALER CONTAINER **/
.page-container {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  padding: 0px;
}

@media (max-width: 1960px) {
  .page-container {
    padding: 0px;
  }
}

@media (max-width: 768px) {
  .page-container {
    padding: 0 15px;
  }
}

/** Hintergrund **/ 
body {
  margin: 0;
  padding: 0;
  background: none;
  position: relative;
  min-height: 100vh;
}

/* Globaler Hintergrund für alle Seiten AUSSER Template-Seiten */
body:not(.linkedin-page-template):not(.ueber-uns-page-template):not(.gruppen-page-template):not(.alumni-page-template):not(.sounding-page-template):not(.offsite-page-template)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/background-neonblau-2.webp') repeat;
  background-size: 1000px 1000px;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* Stellt sicher, dass Inhalt über dem Hintergrund liegt */
body > * { 
  position: relative; 
  z-index: 1; 
}

/** NAVIGATION BAR UNTEN **/
  
  /* Navbar im collapsed Zustand */
  
  /* Navbar verstecken wenn Mobile Menu offen */
  
  /* Burger Button */
  
  /* Menu Toggle Button (3 Punkte) */

  /* Sichtbares Feedback im geöffneten (Legal-)Zustand – nur Farbe, keine Drehung */
  
  /* Navigation */
  
  /* Ziehharmonika-Wrapper: animiert seine Breite fließend zwischen den
	 beiden Navigationen. Die Breite wird per JS gesetzt. */

  /* Haupt-Navigation bleibt im Fluss und bestimmt die Höhe. */

  /* Legal-Navigation liegt als Overlay darüber und wird ein-/ausgeblendet. */

  /* Aktiver/inaktiver Zustand – nur Opacity, kein Scale (kein Springen). */
  
  /* --- Responsive --- */
  @media (max-width: 1100px) {
	/* Desktop-Navigation ausblenden */
	
	/* Desktop Navigation Container ausblenden */
	
	/* Desktop Menu Toggle ausblenden */
	
	/* Mobile Navigation: Nur aktive Seite + 3 Punkte */
	
	/* Aktive Seite anzeigen */
	
	/* Mobile Menu Toggle sichtbar */
	
	/* Mobile Overlay Menu */
	
	/* Mobile Menu Container */
	
	/* Mobile Menu Close Button */
	
	/* Mobile Menu Sections */
	
	/* Separator */
  }
  
  /* Desktop: Mobile Elemente ausblenden */

/** FOOTER **/
.site-footer {
  padding: 120px;
  text-align: center;
}

.text-center {
  text-align: center;
}

/** BILDCOLLAGE STYLES **/

/* Responsive Anpassungen für die Image-Collage */

@media (max-width: 768px) {
  /* === Hero-Collage "neu arrangiert": Logo mittig, je ~4 Fotos oben/unten,
        Handschrift-Texte zwischen/über den Bildern (Scrapbook wie Desktop) === */

  /* Foto-Items: angepinnte Polaroids (weißer Rand, Schatten, leichte Rotation) */

  /* Reihenfolge: LinkedIn -> 2 Fotos -> Logo (hoch) -> Slogan -> 2 Fotos -> E-Mail -> Rest */  /* collage-3 */  /* collage-5 */  /* collage-2 */  /* collage-4 */  /* collage-6 */  /* collage-9 */ /* collage-7 (letztes Bild) */

  /* Mobile: nur 5 Fotos zeigen (statt 7) -> collage-7, 8, 9 & 10 ausblenden */

  /* Oberstes linkes Foto (collage-3) etwas nach unten versetzt -> Scrapbook-Staffelung */

  /* Logo weit oben (direkt beim Öffnen sichtbar, aber nicht ganz oben) */

  /* Handschrift-Texte: volle Breite, zwischen/leicht über den Fotos */

  /* LinkedIn links zwischen erster Fotoreihe und Logo */

  /* Slogan etwas getrennt vom Logo (2 Fotos liegen dazwischen) */

  /* E-Mail direkt über dem letzten Bild */
}

/** TEXT-ELEMENTE STYLES (Hero-Collage Startseite) **/

/* Responsive Anpassungen für Text-Elemente */

/** NEONBLAU UPDATE BEREICH STYLES **/

/* Mehr Beiträge Button */

/* Zahlen über Neonblau – Stat Cards */

/* CTA zu LinkedIn */

/* Zahlen über Neonblau – Mobile */

/* Responsive Anpassungen für den Update-Bereich */

/** ÜBER UNS HERO COLLAGE STYLES **/

/* Spezifische Größen und Positionen für jedes Bild */

/* Zentraler Hero Text */

/* Responsive Anpassungen für Über-uns Collage */

/* Mobile Layout für Über uns Page (< 769px) */
@media (max-width: 768px) {
  /* Overflow verhindern */
  
  /* Hero Section - Mobile optimiert */
  
  /* Scrollbar Styling für Webkit-Browser */
  
  /* Alle Bilder standardmäßig ausblenden */
  
  /* Logo im Bilder-Container ausblenden */
  
  /* Logo im Hero Text Container positionieren - über dem Text */
  
  
  /* Neues Logo-Element im Text-Container */
  
  /* Nur Bilder 1-5 anzeigen - im horizontalen Slider */
  
  /* Hero Text - über dem Slider, mit Logo oben rechts */
  
  /* Erster und letzter Bild-Item mit Padding für visuellen Effekt "aus der Seite gezogen" */
  
  /* Content Sections - Mobile optimiert */
  
  /* Page Container für Mobile */
  .page-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  .page-container main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}

/** ABOUT COLLAGE SECTION STYLES **/

/* Responsive Anpassungen für About Collage */

@media (max-width: 1439px) {
  
  /* Desktop Titel ausblenden */
}

@media (max-width: 768px) {

  /* Titel-Überlappung vermeiden (negative Margins vom 1439er-Breakpoint zurücksetzen) */

  /* Fotos als angepinnte Polaroids -> gleicher Scrapbook-Look wie die Hero-Collage */

  /* Mobile: nur 4 Fotos zeigen (5. ausblenden) */
}

/** ABOUT TEXT ELEMENTE STYLES **/

/* Responsive Anpassungen für About Text */

/* Teams Section - Überarbeitete Version */

/* Spezifische Positionierung der Teams - überarbeitet */


/* Responsive Anpassungen für Teams Section */


/* Responsive Anpassungen für Teams Section */

/* Gruppen-Cards mobil im Scrapbook-Look der Hero-Section: angepinnte Karten,
   weißer Grund, weicher Schatten, leichte Rotation (wie die Polaroids) */
@media (max-width: 768px) {
  /* Grid sauber einpassen: width:100% + padding ohne border-box lief sonst
     rechts aus dem Viewport (und die Rotation kippte die Karten über den Rand) */

  /* Karten ohne Rotation (gerade ausgerichtet) */

  /* Schrift größer für bessere Lesbarkeit */

  /* Beschreibungstext unter den Karten mittig einpassen */
}

/** FUTURE SECTION STYLES **/

/** FUTURE TEXT ELEMENTE STYLES **/

/* Responsive Anpassungen für Future Section */

@media (max-width: 768px) {
  
  /* Fotos als angepinnte Polaroids -> gleicher Scrapbook-Look wie die Hero-Collage */

  /* Mobile: nur 4 Fotos zeigen (5. & 6. ausblenden) */
}



/*** Template-spezifische Background Styles ***/

/* LinkedIn Page */

/* Über uns Page */

/* Gruppen Page */

/* Gruppen Page Header - Linksbündig */

/* Tablet Anpassung */



/* Gemeinsame Header Styling für alle Templates */

/* Über uns Content Styling */



/* Section 1 - Zentriert */

/* Section 2 - Links versetzt */

/* Section 3 - Rechts versetzt */

/* Überschriften Styling */

/* Text Styling */


/* Responsive Design */
@media (max-width: 1200px) {
  
  /* Reset Desktop-spezifische Styles für mobile Ansicht */
  
  /* Alle Sections zentriert auf mobilen Geräten */
}

/* Mobile Styles für Content Sections sind bereits oben im @media (max-width: 768px) Block definiert */

/* Legacy Content Section Styling (für andere Templates) */

/* LinkedIn Posts Styling */


/* Gruppen-Page spezifische Styles */

/* Alumninetzwerk Page – übernimmt Hintergrund und Kopfbereich der Gruppenseite */

/* Responsive Anpassungen für Gruppen-Page - Mobile Layout (< 769px) */
@media (max-width: 768px) {
  /* Overflow verhindern */
  
  /* Header-Container Anpassungen */
  
  /* Container und Wrapper */
  
  /* Page Container */
  .page-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  .page-container main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Gruppen-Sektionen - einheitliches Spacing (mehr Abstand -> Gruppen klar trennbar) */
  
  /* Neonblau Group Container */
  
  /* Collage-Bilder ausblenden */
  
  /* Gruppen-Layout - Flexbox für einheitliche Reihenfolge */
  
  /* Collage-Container - nur für Titel, erste Position */
  
  /* Gruppen-Titel - konsistentes Styling */
  
  /* Mitglieder-Slider - zwischen Titel und Beschreibung */
  
  /* Member Display Area - responsive Größe */
  
  /* Bild füllt den Portrait-Rahmen (wie Desktop) statt in natürlicher Höhe
     zu schrumpfen -> kein großer Abstand mehr zwischen Foto und Namensleiste */
  
  /* Member Name Overlay - Mobile optimiert */
  
  /* Navigation Arrows - Mobile optimiert */
  
  /* Gruppen-Beschreibung - nach dem Slider */
  
  /* Alle Layout-spezifischen Positionen zurücksetzen */
  
  /* Alle Collage-Container zurücksetzen */
}

/* Global default: hide hero-logo on desktop/tablet */

@media (max-width: 768px) {
  /* Overflow verhindern */
  
  /* Hero Section - Mobile optimiert */


  /* Logo-Badge an die Bilder 1–5 heften */

  /* Gemeinsamer Badge-Style */

  /* Varierte Positionen für dynamischen Look */

  /* ... existing code ... */
}

/* ============================================================
   ÜBER-UNS HERO – Scrapbook-Stil wie Home (Mobile)
   Steht am Dateiende und überschreibt bewusst die älteren
   Slider-/Badge-Regblöcke weiter oben (gleiche Spezifität, später).
   ============================================================ */
@media (max-width: 768px) {

  /* Titel oben */

  /* Collage als Scrapbook-Pinnwand (Logo mittig, Fotos drüber/drunter) */

  /* Foto-Items: einheitliche Polaroids (weißer Rand, Schatten, Rotation) */

  /* Alte Slider-Badges entfernen */

  /* Nur 6 Tiles zeigen (Ordner hat nur 4 Motive), Rest ausblenden.
     Wiederholte Motive werden unterschiedlich zugeschnitten. */

  /* Reihenfolge: 3 Fotos -> Logo (mittig) -> 3 Fotos */

  /* Bildausschnitte (gesichtsbewusst, Wiederholungen verschieden zugeschnitten) */ /* A: Gesicht */ /* B: Gesicht */ /* C: oben */ /* D: Gesichter unten */ /* A erneut: anderer Ausschnitt */ /* C erneut: linke Person */

  /* Logo mittig (modest, ohne Rahmen) */
}

/* ============================================================
   SOUNDING PAGE
   Aufbau wie Über uns: Hero-Collage auf festem 1920er-Raster
   (per scale() an kleinere Viewports angepasst), Handschrift-
   Titel mittig, darunter Inhalt in Geno.
   ============================================================ */

/* Hero Collage */

/* Links: Workshop-Szenen */

/* Rechts: Menschen & Energie */

/* Zentraler Hero-Text (Neonblau-Handschrift) */

/* Inhalt – Typografie wie auf der Gruppen-Seite:
   Handschrift-Überschrift (.group-title), Gruppenname (.group-description-title),
   Beschreibung (.group-description-text p), Button (.alumni-teaser-link) */

/* Überschrift in Neonblau-Handschrift (Größe wie .group-title) */

/* Zielgruppe */

/* Kleine Bildcollage – überlappend wie die Hero-Collage, Positionen in %
   (Basis 760 × 490 px), damit sie mit der Inhaltsspalte mitskaliert */

/* Kontakt-CTA – Herz wie auf der Kontaktseite als Doodle an der Überschrift */

/* Letztes Wort + Herz brechen nur gemeinsam um */

/* Responsive: Collage wie Über uns stufenweise skalieren */

/* Mobile (< 769px): Collage "neu arrangiert" als Polaroid-Pinnwand */
@media (max-width: 768px) {

  /* Titel oben */

  /* Fotos als Polaroids (weißer Rand, Schatten, Rotation) */

  /* Max. 4 Fotos: Workshop-Tisch, Notizen, Post-its, Duo */

  /* Gerissene Papierkante rechts im Workshop-Foto abschneiden */

  /* Logo als Sticker unten rechts über der Pinnwand */

  /* Inhalt – mobile Werte der Gruppen-Seite */

  /* Kleine Collage mobil: gleiche Anordnung, als Polaroids */
}

/* ============================================================
   OFFSITE 2026
   Infoseite für Teilnehmende und Supporter (Vorstände BVR &
   VR-Banken), Inhalte aus inc/offsite-2026.php. Reiter,
   Tagesauswahl und „Jetzt“-Markierung steuert das Skript im
   Template. Typo wie Sounding: Handschrift-Headlines, Text in
   Geno, Blau #003366 / #0066B3, Karten mit Polaroid-Schatten.
   ============================================================ */
.offsite-page-template {
  background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url('../img/background-neonblau-2.webp') repeat;
  background-size: 1000px 1000px;
}

.offsite {
  --offsite-ink: #111111;
  --offsite-blue: #0066B3;
  --offsite-navy: #003366;
  --offsite-sky: #00bfff;
  --offsite-line: #d5dee8;
  --offsite-soft: #eef4fa;
  --offsite-card: rgba(255, 255, 255, 0.95);
  --offsite-shadow: 0 6px 14px rgba(0, 51, 102, 0.12);
  --offsite-sticky: 64px; /* Höhe der Sprungnavigation, für scroll-margin */
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 20px 80px;
  box-sizing: border-box;
  font-family: "GenosGFG", sans-serif;
  color: #000000;
}

.offsite *,
.offsite *::before,
.offsite *::after {
  box-sizing: border-box;
}

/* display-Regeln unten dürfen das hidden-Attribut nicht aushebeln */
.offsite [hidden] {
  display: none !important;
}

:where(.offsite) p {
  margin: 0;
}

.offsite-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kopf */
.offsite-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 40px;
  margin-bottom: 32px;
}

.offsite-kicker {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--offsite-blue);
  margin-bottom: 8px;
}

.offsite-title {
  font-family: var(--font-handwriting);
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--offsite-ink);
  margin: 0;
}

.offsite-claim {
  max-width: 540px;
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.4;
  color: var(--offsite-blue);
}

.offsite-hero-photos {
  position: relative;
  height: 280px;
}

.offsite-photo {
  position: absolute;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0, 51, 102, 0.18);
}

.offsite-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offsite-photo-1 { width: 170px; height: 230px; left: 0;     top: 30px; transform: rotate(-4deg); z-index: 1; }
.offsite-photo-2 { width: 210px; height: 150px; left: 140px; top: 0;    transform: rotate(3deg);  z-index: 2; }
.offsite-photo-3 { width: 170px; height: 160px; left: 200px; top: 120px; transform: rotate(-2deg); z-index: 3; }

/* Gerissene Papierkante rechts im Workshop-Foto abschneiden (wie Sounding mobil) */
.offsite-photo-1 img {
  width: 135%;
  max-width: none;
  object-position: 0 50%;
}

.offsite-heart {
  position: absolute;
  right: -4px;
  bottom: 0;
  width: 48px;
  transform: rotate(12deg);
  z-index: 4;
}

/* Reiter Teilnehmende / Supporter */
.offsite-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 32px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 9999px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.offsite-tab {
  appearance: none;
  border: 0;
  border-radius: 9999px;
  background: none;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--offsite-navy);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.offsite-tab small {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}

.offsite-tab:hover {
  background: var(--offsite-soft);
}

.offsite-tab[aria-selected="true"] {
  background: var(--offsite-navy);
  color: #fff;
}

.offsite-tab:focus-visible,
.offsite-day-tab:focus-visible,
.offsite-button:focus-visible,
.offsite-sectionnav a:focus-visible {
  outline: 3px solid var(--offsite-sky);
  outline-offset: 2px;
}

/* Auf einen Blick */
.offsite-glance {
  margin-bottom: 32px;
  padding: 32px;
  background: #fff;
  border-top: 6px solid var(--offsite-navy);
  box-shadow: var(--offsite-shadow);
}

.offsite-glance-title {
  font-family: var(--font-handwriting);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--offsite-ink);
  margin: 0 0 24px;
}

.offsite-glance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0 0 28px;
}

.offsite-glance-item dt,
.offsite-facts dt,
.offsite-channel-label,
.offsite-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--offsite-blue);
}

.offsite-glance-item dt {
  margin-bottom: 6px;
}

.offsite-glance-item dd {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

/* Dunkelblaue Box über die volle Breite (WLAN) */
.offsite-glance-item--highlight {
  grid-column: 1 / -1;
  padding: 20px 24px;
  background: var(--offsite-navy);
  color: #fff;
}

.offsite-glance-item--highlight dt {
  color: var(--offsite-sky);
}

.offsite-wifi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
}

.offsite-wifi span {
  display: flex;
  flex-direction: column;
}

.offsite-wifi small {
  font-size: 14px;
  opacity: 0.85;
}

.offsite-wifi strong {
  font-size: 26px;
  line-height: 1.25;
}

/* WLAN-Passwort mit einem Tipp markieren (zum Kopieren) */
.offsite-wifi-pass {
  user-select: all;
  -webkit-user-select: all;
}

/* Ansprechpersonen als Karte unter „Auf einen Blick“ */
.offsite-persons-card {
  margin-bottom: 32px;
}

.offsite-persons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
}

.offsite-person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.offsite-person strong,
.offsite-wifi strong {
  font-weight: 700;
}

.offsite-phone,
.offsite-mail,
.offsite-room-link {
  color: var(--offsite-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}

.offsite-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  white-space: nowrap;
}

.offsite-mail {
  overflow-wrap: anywhere;
}

.offsite-phone:hover,
.offsite-mail:hover,
.offsite-room-link:hover {
  color: var(--offsite-blue);
}

.offsite-map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Buttons (wie .sounding-mail) */
.offsite-button {
  display: inline-block;
  padding: 14px 28px;
  background: var(--offsite-navy);
  border: 2px solid var(--offsite-navy);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.offsite-button:hover {
  background: var(--offsite-blue);
  border-color: var(--offsite-blue);
  transform: translateY(-2px);
}

.offsite-button--ghost {
  padding: 8px 14px;
  background: #fff;
  color: var(--offsite-navy);
  font-size: 13px;
}

.offsite-button--ghost:hover {
  color: #fff;
}

.offsite-today::after {
  content: " →";
}

/* Sprungnavigation (klebt oben) */
.offsite-sectionnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  margin: 0 -20px 48px;
  padding: 12px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--offsite-line);
}

.offsite-sectionnav::-webkit-scrollbar {
  display: none;
}

.offsite-sectionnav a {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--offsite-line);
  border-radius: 9999px;
  color: var(--offsite-navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.offsite-sectionnav a:hover {
  border-color: var(--offsite-navy);
}

.offsite-sectionnav a[aria-current="true"] {
  background: var(--offsite-navy);
  border-color: var(--offsite-navy);
  color: #fff;
}

/* Abschnitte */
.offsite-section {
  margin-bottom: 88px;
  scroll-margin-top: var(--offsite-sticky);
}

.offsite-section-title {
  font-family: var(--font-handwriting);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--offsite-ink);
  margin: 0 0 28px;
}

.offsite-subtitle {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #000;
  margin: 48px 0 16px;
  scroll-margin-top: calc(var(--offsite-sticky) + 16px);
}

.offsite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.offsite-grid + .offsite-grid,
.offsite-grid + .offsite-card,
.offsite-section > .offsite-card + .offsite-card {
  margin-top: 20px;
}

.offsite-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.offsite-card {
  padding: 24px 28px;
  background: var(--offsite-card);
  box-shadow: var(--offsite-shadow);
}

.offsite-card--wide {
  grid-column: 1 / -1;
}

.offsite-card--accent {
  border-left: 6px solid var(--offsite-blue);
}

.offsite-card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 14px;
}

.offsite-text,
.offsite-list li,
.offsite-checklist li,
.offsite-facts dd {
  font-size: 18px;
  line-height: 1.55;
}

.offsite-text + .offsite-text,
.offsite-facts + .offsite-text {
  margin-top: 12px;
}

.offsite-list,
.offsite-checklist,
.offsite-meal-list,
.offsite-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
}

.offsite-list li + li {
  margin-top: 14px;
}

.offsite-list strong {
  display: block;
}

.offsite-list--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
}

.offsite-list--split li + li {
  margin-top: 0;
}

/* Label-Wert-Paare */
.offsite-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 20px;
  align-items: baseline;
  margin: 0;
}

.offsite-facts dd {
  margin: 0;
}

/* Ablauf: Tagesauswahl */
.offsite-days {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.offsite-day-tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--offsite-line);
  color: var(--offsite-navy);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.offsite-day-tab strong {
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.offsite-day-tab span {
  font-size: 15px;
}

.offsite-day-tab:hover {
  border-color: var(--offsite-navy);
}

.offsite-day-tab[aria-selected="true"] {
  background: var(--offsite-navy);
  border-color: var(--offsite-navy);
  color: #fff;
}

.offsite-today-badge {
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 2px 8px;
  background: var(--offsite-sky);
  color: var(--offsite-navy);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offsite-day {
  scroll-margin-top: var(--offsite-sticky);
}

.offsite-day + .offsite-day {
  margin-top: 40px;
}

.offsite-day-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 16px;
}

.offsite-day-title span {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--offsite-blue);
}

.offsite-agenda + .offsite-day-title {
  margin-top: 40px;
}

/* Ablauf: Programmpunkte */
.offsite-agenda {
  background: var(--offsite-card);
  box-shadow: var(--offsite-shadow);
}

.offsite-item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 28px;
  border-top: 1px solid var(--offsite-line);
  transition: background-color 0.25s ease;
}

.offsite-item:first-child {
  border-top: 0;
}

/* Termine abwechselnd weiß und hellblau, unabhängig vom Typ */
.offsite-item:nth-child(even) {
  background: var(--offsite-soft);
}

.offsite-item-time {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--offsite-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.offsite-tag {
  display: inline-block;
  margin-bottom: 2px;
  font-size: 12px;
}

.offsite-item-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.offsite-item-note {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.4;
  font-style: italic;
  color: #333;
}

/* Jetzt / Als Nächstes (vom Skript gesetzt) */
.offsite-item.is-now {
  background: #e1effb;
  box-shadow: inset 5px 0 0 var(--offsite-blue);
}

.offsite-item.is-next {
  box-shadow: inset 5px 0 0 var(--offsite-sky);
}

.offsite-now-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  background: var(--offsite-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.offsite-item.is-next .offsite-now-badge {
  background: var(--offsite-sky);
  color: var(--offsite-navy);
}

/* Packliste */
.offsite-bring {
  margin-top: 32px;
}

.offsite-checklist li + li {
  margin-top: 10px;
}

.offsite-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.offsite-checklist input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  accent-color: var(--offsite-navy);
  cursor: pointer;
}

.offsite-checklist input:checked + span {
  color: #6b7785;
  text-decoration: line-through;
}

/* Verpflegung */
.offsite-meals {
  margin-bottom: 20px;
}

.offsite-meal-list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0 12px;
  padding: 10px 0;
  border-top: 1px solid var(--offsite-line);
  font-size: 16px;
  line-height: 1.4;
}

.offsite-meal-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.offsite-meal-time {
  grid-row: span 2;
  font-weight: 700;
  color: var(--offsite-navy);
  font-variant-numeric: tabular-nums;
}

.offsite-meal-what {
  font-weight: 700;
}

.offsite-meal-where {
  font-size: 15px;
}

.offsite-card > .offsite-button {
  margin-top: 20px;
}

/* Orientierung */
.offsite-plan {
  display: block;
  margin: 0;
  background: #fff;
  box-shadow: var(--offsite-shadow);
  color: var(--offsite-navy);
  text-decoration: none;
}

.offsite-plan-image {
  display: block;
  padding: 20px 24px 8px;
  cursor: zoom-in;
}

.offsite-plan img {
  display: block;
  width: 100%;
  height: auto;
}

.offsite-plan-hint {
  display: none;
}

/* Legende unter dem Lageplan – Nummern im Stil der Plan-Markierungen */
.offsite-plan-caption {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--offsite-line);
}

.offsite-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px 24px;
}

.offsite-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  line-height: 1.3;
  color: #000;
  scroll-margin-top: calc(var(--offsite-sticky) + 16px);
}

.offsite-legend-nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--offsite-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.offsite-legend-name small {
  display: block;
  font-size: 14px;
  color: #333;
}

.offsite-legend-item.is-flash {
  animation: offsite-flash 1.6s ease-out;
}

.offsite-plan-zoom {
  display: inline-block;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 700;
}

/* Kurz aufleuchten, wenn ein Raum-/Gruppen-Link angesprungen wird */
@keyframes offsite-flash {
  0%, 40% { background-color: #d3e8fa; }
  100% { background-color: transparent; }
}

.offsite-subtitle.is-flash {
  animation: offsite-flash 1.6s ease-out;
}

/* Generelles: Gruppen */
.offsite-group-name {
  font-family: var(--font-handwriting);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--offsite-ink);
  margin: 0 0 6px;
}

.offsite-group-topic {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

/* Orga: Kommunikationskanal */
.offsite-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 28px 32px;
  background: var(--offsite-navy);
  color: #fff;
}

.offsite-channel-label {
  color: var(--offsite-sky);
}

.offsite-channel-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 6px 0 8px;
  color: #fff;
}

.offsite-channel-text {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.5;
}

.offsite-channel .offsite-button {
  flex: none;
}

/* Orga: Ansprechpersonen bei generellen Fragen – nur Namen */
.offsite-names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 24px;
}

.offsite-names li {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .offsite-names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offsite-names li {
    font-size: 16px;
  }
}

/* Supporter */
.offsite-welcome {
  margin-bottom: 32px;
}

.offsite-welcome .offsite-section-title {
  margin-bottom: 16px;
}

.offsite-lead {
  max-width: 760px;
  font-size: 22px;
  line-height: 1.5;
}

.offsite-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 20px;
  font-size: 17px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .offsite-hero {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .offsite-hero-photos {
    transform: scale(0.8);
    transform-origin: right center;
  }

  .offsite-title { font-size: 72px; }
  .offsite-section-title { font-size: 40px; }

  .offsite-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: eine Spalte, Fotos weg, Reiter in voller Breite */
@media (max-width: 768px) {
  /* Globale Mobil-Regel setzt overflow-x: hidden – das macht den Container
     zum Scroll-Container und hebelt die klebende Sprungnavigation aus.
     clip schneidet genauso ab, ohne position: sticky zu brechen. */
  .offsite-page-template .page-container {
    overflow-x: clip !important;
  }

  .offsite {
    --offsite-sticky: 56px;
    padding: 40px 16px 48px;
  }

  .offsite-hero {
    display: block;
    margin-bottom: 20px;
  }

  .offsite-hero-photos {
    display: none;
  }

  .offsite-kicker { font-size: 14px; }
  .offsite-title { font-size: 56px; }

  .offsite-claim {
    font-size: 17px;
    margin-top: 10px;
  }

  .offsite-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin-bottom: 24px;
    border-radius: 28px;
  }

  .offsite-tab {
    padding: 10px 8px;
    border-radius: 22px;
    font-size: 14px;
  }

  .offsite-tab small {
    font-size: 11px;
  }

  .offsite-glance {
    padding: 22px 18px;
    margin-bottom: 24px;
  }

  .offsite-glance-title {
    font-size: 30px;
    margin-bottom: 18px;
  }

  .offsite-glance-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 22px;
  }

  .offsite-glance-item dd {
    font-size: 16px;
  }

  .offsite-glance-item--highlight {
    padding: 16px 18px;
  }

  .offsite-wifi strong { font-size: 22px; }

  .offsite-persons-card {
    margin-bottom: 24px;
  }

  .offsite-persons {
    grid-template-columns: 1fr;
  }

  .offsite-person {
    font-size: 16px;
  }

  .offsite-button {
    padding: 14px 20px;
    font-size: 14px;
  }

  .offsite-today {
    display: block;
  }

  .offsite-button--ghost {
    padding: 8px 12px;
    font-size: 12px;
  }

  .offsite-sectionnav {
    margin: 0 -16px 36px;
    padding: 10px 16px;
  }

  .offsite-sectionnav a {
    padding: 7px 14px;
    font-size: 12px;
  }

  .offsite-section {
    margin-bottom: 56px;
  }

  .offsite-section-title {
    font-size: 30px;
    margin-bottom: 18px;
  }

  .offsite-subtitle {
    font-size: 18px;
    margin: 32px 0 12px;
  }

  .offsite-grid,
  .offsite-grid--3,
  .offsite-list--split {
    grid-template-columns: 1fr;
  }

  .offsite-grid {
    gap: 14px;
  }

  .offsite-grid + .offsite-grid,
  .offsite-grid + .offsite-card,
  .offsite-section > .offsite-card + .offsite-card {
    margin-top: 14px;
  }

  .offsite-card {
    padding: 20px 18px;
  }

  .offsite-card-title {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .offsite-text,
  .offsite-list li,
  .offsite-checklist li,
  .offsite-facts dd {
    font-size: 16px;
    line-height: 1.5;
  }

  .offsite-facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .offsite-facts dd + dt {
    margin-top: 10px;
  }

  .offsite-days {
    gap: 6px;
    margin-bottom: 18px;
  }

  .offsite-day-tab {
    padding: 10px;
  }

  .offsite-day-tab strong,
  .offsite-day-tab span {
    font-size: 13px;
  }

  .offsite-day-title {
    font-size: 18px;
  }

  .offsite-day-title span {
    font-size: 16px;
  }

  .offsite-item {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 14px 18px;
  }

  .offsite-item-time {
    font-size: 15px;
  }

  .offsite-item-title {
    font-size: 17px;
  }

  /* Plan doppelt so breit wie der Bildschirm, seitlich wischbar */
  .offsite-plan-image {
    padding: 12px 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .offsite-plan img {
    width: 720px;
    max-width: none;
  }

  .offsite-plan-hint {
    display: block;
    margin: 0;
    padding: 4px 18px 0;
    font-size: 13px;
    color: #333;
  }

  .offsite-plan-caption {
    padding: 16px 18px 20px;
  }

  .offsite-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }

  .offsite-legend-item {
    gap: 8px;
    font-size: 15px;
  }

  .offsite-legend-nr {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .offsite-group-name {
    font-size: 26px;
  }

  .offsite-group-topic {
    font-size: 16px;
  }

  .offsite-channel {
    flex-direction: column;
    align-items: stretch;
    padding: 22px 18px;
  }

  .offsite-channel-name {
    font-size: 20px;
  }

  .offsite-channel-text {
    font-size: 16px;
  }

  .offsite-lead {
    font-size: 17px;
  }

  .offsite-more {
    flex-direction: column;
    font-size: 16px;
  }
}

/* ==================== Aus WordPress übernommen: Parent-Theme style.css (wird von WP ein zweites Mal geladen) ==================== */
/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */

/* Increase the bottom margin on submenus, so that the outline is visible. */

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/

/* ==================== Aus WordPress übernommen: WP fonts-local (inline) ==================== */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:fallback;src:url('../fonts/Manrope-VariableFont_wght.woff2') format('woff2');}

/* ==================== Aus WordPress übernommen: Footer (inline) ==================== */
.site-footer {
  padding: 20px;
  text-align: center;
  /* Platz für die fixierte Navigations-Pille am unteren Rand */
  padding-bottom: 120px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-slogan {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 64px;
  line-height: 120%;
  margin: 0 0 15px 0;
  letter-spacing: 0;
}

.footer-slogan .dark-blue {
  color: #111111;
}

.footer-slogan .light-blue {
  color: #00bfff;
}

.footer-email {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 22px;
  color: #111111;
  margin: 0;
  text-decoration: none;
  transition: color 0.3s;
}

/* Rechtliche Pflichtlinks */
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.footer-legal a {
  font-family: "GenosGFG", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #0066B3;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: #004c8a;
  text-decoration: underline;
}

.footer-legal-sep {
  font-family: "GenosGFG", sans-serif;
  font-size: 16px;
  color: #0066B3;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
  .footer-slogan {
    font-size: 36px;
  }

  .footer-email {
    font-size: 14px;
  }

  .footer-legal {
    margin-top: 20px;
    gap: 8px;
  }

  .footer-legal a,
  .footer-legal-sep {
    font-size: 14px;
  }
}

/* ==================== Aus WordPress übernommen: Cookie-Hinweis (inline) ==================== */
.nb-cookie {
  position: fixed;
  left: 50%;
  bottom: 96px; /* über der fixierten Navigations-Pille */
  z-index: 1050; /* über der Navigation (1001), unter dem Mobile-Menü (1100) */
  width: calc(100% - 40px);
  max-width: 560px;
  transform: translate(-50%, 16px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.nb-cookie[hidden] {
  display: none;
}

.nb-cookie.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.nb-cookie__inner {
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 24px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  padding: 22px 26px 20px;
}

.nb-cookie__title {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: #0066B3;
  margin: 0 0 8px;
}

.nb-cookie__text {
  font-family: "GenosGFG", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #111111;
  margin: 0 0 16px;
}

.nb-cookie__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
}

.nb-cookie__button {
  font-family: "GenosGFG", sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color: #ffffff;
  background: #0066B3;
  border: 2px solid #0066B3;
  border-radius: 25px;
  padding: 9px 26px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.nb-cookie__button:hover,
.nb-cookie__button:focus-visible {
  background: #004c8a;
  border-color: #004c8a;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 102, 179, 0.3);
}

.nb-cookie__button:focus-visible,
.nb-cookie__link:focus-visible {
  outline: 2px solid #00bfff;
  outline-offset: 3px;
}

.nb-cookie__link {
  font-family: "GenosGFG", sans-serif;
  font-size: 15px;
  color: #0066B3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nb-cookie__link:hover {
  color: #004c8a;
}


@media (max-width: 768px) {
  .nb-cookie {
    bottom: 84px;
    width: calc(100% - 30px);
  }

  .nb-cookie__inner {
    border-radius: 20px;
    padding: 18px 20px 16px;
  }

  .nb-cookie__title {
    font-size: 26px;
  }

  .nb-cookie__text,
  .nb-cookie__button,
  .nb-cookie__link {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nb-cookie,
  .nb-cookie__button {
    transition: none;
  }
}

/* ==================== Landingpage neonblau-offsite.de ==================== */

/*
 * Reiter „Für Teilnehmende / Für Supporter“ als feste Navigation am unteren Rand
 * (ersetzt die Navigations-Pille der WordPress-Seite). Die Pille steht außerhalb
 * von .offsite und wird auch auf den Rechtsseiten (als Links) verwendet – daher
 * Farben, Schrift und box-sizing hier noch einmal.
 */
.offsite-tabs {
  --offsite-navy: #003366;
  --offsite-soft: #eef4fa;
  --offsite-sky: #00bfff;
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1001;
  max-width: calc(100% - 40px);
  margin: 0;
  box-sizing: border-box;
  font-family: "GenosGFG", sans-serif;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

/* Ohne JavaScript verborgen (dann stehen beide Bereiche untereinander) */
.offsite-tabs[hidden] {
  display: none;
}

.offsite-tabs *,
.offsite-tabs *::before,
.offsite-tabs *::after {
  box-sizing: border-box;
}

/* Rechtsseiten: dieselbe Pille als Links zur Offsite-Seite */
a.offsite-tab {
  text-decoration: none;
  text-align: center;
}

/* Cookie-Hinweis mit etwas Abstand über der Pille */
.nb-cookie {
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  .nb-cookie {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .offsite-tabs {
    left: 15px;
    right: 15px;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
    max-width: none;
    margin: 0;
  }
}

@media print {
  .offsite-tabs {
    display: none;
  }
}