/* VdHBF Block-Theme. Farben, Schrift und Abstände kommen aus theme.json, hier nur Gestaltung, die theme.json nicht abbildet. */ :root { --kopf-h: 117px; /* Höhe des festen Kopfs, für den bildschirmhohen Aufmacher */ --rand: clamp(1rem, 4vw, 3rem); --radius-gross: 28px; --radius: 14px; --eis: var(--wp--preset--color--eis); --fels: var(--wp--preset--color--fels); --schiefer: var(--wp--preset--color--schiefer); --nebel: var(--wp--preset--color--nebel); --tanne: var(--wp--preset--color--tanne); --weiss: var(--wp--preset--color--weiss); /* Flächen mit fester Rolle, damit sie im Dunkelmodus nicht mit umkippen */ --kopf-grund: rgba(237, 241, 242, .98); /* fast deckend: sonst scheint Text beim Scrollen durch (Glas-Eindruck) */ --kopf-linie: rgba(24, 32, 36, .08); --fuss-grund: #182024; --fuss-tief: #10171A; /* Fuß eine Stufe dunkler als die Partnerfläche, damit beide sich trennen (Markus 18.10.2026) */ --band-grund: #0B6B4C; --logo-grund: #FFFFFF; /* dunkle Flächen leicht abgestuft: links etwas heller, nach rechts dunkler */ --dunkel-verlauf: linear-gradient(100deg, #27333B 0%, #1C262B 45%, #182024 100%); color-scheme: light dark; } /* Dunkelmodus folgt automatisch der Einstellung von Gerät oder Browser. Kontraste nach WCAG: Text 13–15:1, Nebentext und Links 7,5–8,5:1 */ @media (prefers-color-scheme: dark) { :root:root { --wp--preset--color--eis: #12191C; --wp--preset--color--weiss: #1B2428; --wp--preset--color--nebel: #2E3A40; --wp--preset--color--schiefer: #A8B5BA; --wp--preset--color--fels: #E7ECEE; --wp--preset--color--tanne: #5BC79C; --kopf-grund: rgba(18, 25, 28, .98); --kopf-linie: rgba(255, 255, 255, .08); --fuss-grund: #0A0F11; --fuss-tief: #050809; --logo-grund: #E9EEF0; --dunkel-verlauf: linear-gradient(100deg, #18222A 0%, #10171A 45%, #0A0F11 100%); } .vdg-logo img { background: #F4F6F7; padding: 8px 12px; border-radius: 10px !important; } .marke-abzeichen img { background: #F4F6F7; padding: 4px 5px; border-radius: 12px; } } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, .wp-block-post-title { font-stretch: 112%; text-wrap: balance; } p { text-wrap: pretty; } :where(a):focus-visible, .wp-element-button:focus-visible { outline: 3px solid var(--tanne); outline-offset: 3px; border-radius: 4px; } .wp-site-blocks > * + * { margin-block-start: 0; } /* Kopf */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 20; } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } } @media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } } html { scroll-padding-top: 96px; } /* Unschärfe auf ::before, damit das mobile Menü (position: fixed) nicht im Kopf gefangen bleibt */ .kopf { padding: 14px var(--rand); gap: 24px; position: relative; z-index: 0; box-shadow: 0 1px 0 var(--kopf-linie); } .kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kopf-grund); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .marke { gap: 14px; } /* Abzeichen: schwarze Umschrift, deshalb auf dunklem Grund (Fuß, Dunkelmodus) auf heller Fläche */ .marke-abzeichen img { display: block; height: auto; } .fuss-marke img { background: #F4F6F7; padding: 5px 6px; border-radius: 12px; } .marke .wp-block-image { margin: 0; } .marke-name { margin: 0; line-height: 1.1; } .marke-name a { display: block; color: var(--fels); text-decoration: none; font-weight: 800; font-stretch: 118%; font-size: 1.375rem; letter-spacing: -0.01em; } .marke-name span { display: block; font-size: 0.8125rem; color: var(--schiefer); margin-top: 3px; } .haupt .wp-block-navigation-item__content { color: var(--fels); text-decoration: none; padding: 6px 2px; } .haupt .wp-block-navigation-item__content:hover { color: var(--tanne); } .kopf-login .wp-block-button__link { padding: 0.6em 1.1em; font-size: 0.9375rem; border: 1.5px solid var(--fels); background: transparent; color: var(--fels); } .kopf-login .wp-block-button__link:hover { background: var(--fels); color: var(--weiss); } /* Kopf bleibt einzeilig: Knopf und Menüpunkte brechen nie um, Untertitel erst ab 1140 px, Burger-Menü bis 960 px (sechs Menüpunkte) (WordPress schaltet sonst erst unter 600 px um) */ .kopf-login .wp-block-button__link, .haupt .wp-block-navigation-item__content { white-space: nowrap; } @media (max-width: 1140px) { .marke-name span { display: none; } } @media (min-width: 600px) and (max-width: 960px) { .haupt .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .haupt .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* Aufmacher: großes Bild mit Text darauf, Bilder wechseln (theme.js). Farben fest, weil der Text immer auf dem Foto steht */ .held { padding: 0; } .held-buehne { position: relative; display: grid; isolation: isolate; overflow: hidden; min-height: max(480px, calc(100vh - var(--kopf-h))); min-height: max(480px, calc(100svh - var(--kopf-h))); background: #182024; } .held-dias { position: absolute; inset: 0; margin: 0; } .held-dias::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(12, 17, 20, .85) 0%, rgba(12, 17, 20, .55) 42%, rgba(12, 17, 20, 0) 72%), linear-gradient(to right, rgba(12, 17, 20, .55) 0%, rgba(12, 17, 20, 0) 60%); } .held-dia { position: absolute; inset: 0; margin: 0 !important; opacity: 0; transition: opacity 1400ms ease; } .held-dia:first-child { opacity: 1; } .held-reigen.laeuft .held-dia { opacity: 0; } .held-reigen.laeuft .held-dia.aktiv { opacity: 1; } .held-dia img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .held-dia-grat img { object-position: 50% 62%; } .held-dia-fels img { object-position: 50% 40%; } .held-dia-ski img { object-position: 50% 40%; } .held-dia-eis img { object-position: 50% 60%; } .held-dia-rettung img { object-position: 50% 35%; } .held-inhalt { position: relative; z-index: 2; align-self: end; max-width: calc(760px + var(--rand)); padding: clamp(28px, 7vh, 72px) var(--rand); color: #FFFFFF; } .held-vorzeile { margin: 0 0 6px; font-size: clamp(0.9375rem, 1.2vw, 1.125rem); font-weight: 600; font-stretch: 105%; color: rgba(255, 255, 255, .86); } .held-wort { margin: 0; font-size: clamp(2.25rem, 4.6vw, 4rem); white-space: nowrap; font-weight: 750; font-stretch: 108%; letter-spacing: -0.025em; line-height: 1; hyphens: manual; color: #FFFFFF; } .held-text { margin: 14px 0 0; font-size: var(--wp--preset--font-size--gross); line-height: 1.45; color: rgba(255, 255, 255, .92); } /* Stichwörter der vier Aufgaben: das aktive hell mit Fortschrittsstrich, darunter sein Satz */ .held-themen { position: relative; display: flex; flex-wrap: wrap; gap: 0 26px; margin: 22px 0 0; padding: 0; list-style: none; } .held-themen li { position: static; margin: 0; } .held-themen a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .72); font-weight: 650; text-decoration: none; transition: color 300ms ease; } .held-themen a:hover, .held-themen a:focus-visible, .held-themen li.aktiv a { color: #FFFFFF; } .held-themen a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: rgba(255, 255, 255, .25); } .held-fortschritt { position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: #FFFFFF; transform: scaleX(0); transform-origin: left; z-index: 1; } .held-themen span { display: none; } .held-reigen.laeuft .held-themen { padding-bottom: 3em; } .held-reigen.laeuft .held-themen span { display: block; position: absolute; left: 0; top: 52px; max-width: 100%; font-size: 0.9375rem; line-height: 1.4; color: rgba(255, 255, 255, .9); opacity: 0; transform: translateY(6px); transition: opacity 500ms ease, transform 500ms ease; pointer-events: none; } .held-reigen.laeuft .held-themen li.aktiv span { opacity: 1; transform: none; } .held-knoepfe { margin-top: 22px; gap: 12px; } .held-knopf-voll .wp-block-button__link { background: #FFFFFF; color: #182024; border: 1px solid #FFFFFF; } .held-knopf-voll .wp-block-button__link:hover { background: #EDF1F2; } .held-knopf-rand .wp-block-button__link { background: rgba(12, 17, 20, .25); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .8); } .held-knopf-rand .wp-block-button__link:hover { background: rgba(255, 255, 255, .14); } /* Pfeil zurück, Anhalten (WCAG 2.2.2), Pfeil vor: unten rechts im Bild */ .held-steuer { position: absolute; right: var(--rand); bottom: clamp(28px, 7vh, 72px); z-index: 3; display: flex; gap: 8px; } .held-pause, .held-pfeil { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(12, 17, 20, .35); color: #FFFFFF; font-size: 0.875rem; cursor: pointer; } .held-pause:hover, .held-pfeil:hover { background: rgba(12, 17, 20, .6); } .held-pfeil-vor svg { transform: scaleX(-1); } .held-pause:focus-visible, .held-pfeil:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .held-reigen.laeuft .held-dia { transition: none; } } @media (prefers-reduced-motion: no-preference) { .held-inhalt > * { animation: wort-steigt 900ms cubic-bezier(.2, .7, .1, 1) both; } .held-inhalt > :nth-child(2) { animation-delay: 80ms; } .held-inhalt > :nth-child(n+3) { animation-delay: 180ms; } /* langsames Heranziehen; nach dem Ausblenden springt das Bild unsichtbar zurück */ .held-reigen.laeuft .held-dia img { transform: scale(1); transition: transform 0s linear 1500ms; } .held-reigen.laeuft .held-dia.aktiv img { transform: scale(1.06); transition: transform 8s linear; } } @keyframes wort-steigt { from { transform: translateY(0.35em); opacity: 0; } to { transform: none; opacity: 1; } } /* Abschnitte */ .abschnitt { padding-block: var(--wp--preset--spacing--50) 0; } /* Abschnittskopf: Titel und Einleitung untereinander, bündig mit den Bildern darunter */ .abschnitt-kopf { display: block; margin-bottom: clamp(24px, 3vw, 36px); } .abschnitt-kopf h2, .abschnitt-kopf p { margin: 0; } .abschnitt-kopf > p { margin-top: 10px; color: var(--schiefer); font-size: var(--wp--preset--font-size--gross); line-height: 1.5; max-width: 40em; } .abschnitt-kopf.zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; } .abschnitt-kopf.zeile > div > p { margin-top: 10px; color: var(--schiefer); font-size: var(--wp--preset--font-size--gross); line-height: 1.5; max-width: 40em; } .mehr-link a { font-weight: 600; text-decoration: none; white-space: nowrap; } .mehr-link a::after { content: " →"; } .mehr-link a:hover { text-decoration: underline; } /* kleine Vorzeile über Überschriften, z. B. „Ausbildung“ oder „01“ */ .auf-nummer { margin: 0 0 8px !important; font-size: var(--wp--preset--font-size--klein); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tanne); } /* Aufgaben: vier gleich große Karten, Text unter dem Bild */ .mosaik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .mosaik > * { margin: 0 !important; } .kachel { display: flex; flex-direction: column; } .kachel img { width: 100%; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; display: block; border-radius: var(--radius) !important; } .kachel figcaption { margin: 14px 0 0; text-align: left; color: var(--schiefer); font-size: 0.9375rem; line-height: 1.5; } .kachel figcaption strong { display: block; color: var(--fels); font-size: var(--wp--preset--font-size--gross); font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 4px; } /* ganze Kachel ist Link zur Seite Aufgaben */ .kachel { position: relative; } .kachel a { display: block; overflow: hidden; border-radius: var(--radius); } .kachel a::after { content: ""; position: absolute; inset: 0; } .kachel img { transition: transform 500ms cubic-bezier(.2, .7, .1, 1); } .kachel:hover img { transform: scale(1.04); } .kachel figcaption strong::after { content: " →"; color: var(--tanne); } .kachel:hover figcaption strong { color: var(--tanne); } .kachel-d img { object-position: 50% 40%; } .kachel-a img { object-position: 50% 30%; } /* Startseite: Hinweis auf den Weg zum Heeresbergführer, unter den vier Aufgaben */ .weg-teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: clamp(24px, 3vw, 36px) !important; background: var(--weiss); border-radius: var(--radius-gross); overflow: hidden; } .weg-teaser > * { margin: 0 !important; } .weg-teaser-bild img { width: 100%; height: 100%; min-height: 220px; max-height: 320px; object-fit: cover; object-position: 50% 35%; display: block; border-radius: 0 !important; } .weg-teaser-text { padding: clamp(24px, 3.4vw, 48px); align-self: center; } .weg-teaser-text h3 { margin: 0 0 10px !important; font-size: clamp(1.375rem, 2vw, 1.625rem); font-stretch: 112%; letter-spacing: -0.015em; } .weg-teaser-text > p:not(.auf-nummer) { margin: 0; color: var(--schiefer); max-width: 34em; line-height: 1.55; } .weg-marken { list-style: none; padding: 0; margin: 18px 0 22px !important; display: flex; flex-wrap: wrap; gap: 8px; } .weg-marken li { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--eis); font-size: var(--wp--preset--font-size--klein); font-weight: 600; color: var(--fels); } .weg-teaser-text .wp-block-buttons { gap: 10px; } .weg-teaser-text .is-style-outline .wp-block-button__link { border: 1.5px solid var(--fels); background: transparent; color: var(--fels); } .weg-teaser-text .is-style-outline .wp-block-button__link:hover { background: var(--fels); color: var(--weiss); } /* Startseite: Einblicke, Bildband zum Durchblättern (Bilder in natürlichem Format) */ .einblicke-band { display: flex; gap: clamp(12px, 1.6vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 !important; padding-bottom: 4px; } .einblicke-band::-webkit-scrollbar { display: none; } .einblicke-band > figure { flex: none; margin: 0 !important; scroll-snap-align: start; } .einblicke-band img { display: block; height: clamp(180px, 18vw, 260px); width: auto; max-width: 82vw; object-fit: cover; border-radius: var(--radius); } .einblicke-band figcaption { width: 0; min-width: 100%; margin: 8px 0 0; text-align: left; font-size: var(--wp--preset--font-size--klein); color: var(--schiefer); line-height: 1.4; } .einblicke-knoepfe { display: flex; gap: 8px; } .einblicke-knoepfe button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--fels); background: transparent; color: var(--fels); font: inherit; font-size: 1.125rem; cursor: pointer; transition: background 200ms ease, color 200ms ease, opacity 200ms ease; } .einblicke-knoepfe button:hover:not([aria-disabled=true]) { background: var(--fels); color: var(--weiss); } .einblicke-knoepfe button[aria-disabled=true] { opacity: .3; cursor: default; } .einblicke-knoepfe button:focus-visible { outline: 3px solid var(--tanne); outline-offset: 3px; } /* Ausbildung: drei ruhige Karten auf hellem Grund */ .ausbildung-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .ausbildung-karten > * { margin: 0 !important; } .ausbildung-bild img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: 50% 30%; } .ausbildung-karte { background: var(--weiss); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 32px); } .ausbildung-karte h3 { margin: 0 0 14px; font-size: var(--wp--preset--font-size--gross); font-stretch: 108%; } .ausbildung-karte ul { list-style: none; padding: 0; margin: 0; } .ausbildung-karte li { padding: 9px 0; border-top: 1px solid var(--eis); } .ausbildung-karte table, .ausbildung-karte tbody { display: block; } .anforderungen { margin: 0; } .anforderungen table { border-collapse: collapse; width: 100%; font-size: 1rem; } .anforderungen tr { display: block; border-top: 1px solid var(--eis); padding: 9px 0; } .anforderungen td { display: block; border: 0; padding: 0; } .anforderungen td:first-child { color: var(--schiefer); font-size: var(--wp--preset--font-size--klein); } .anforderungen td:last-child { font-weight: 600; } .ausbildung-mehr { margin: 20px 0 0 !important; font-weight: 600; } /* Meldungen */ .meldungen .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; list-style: none; padding: 0; margin: 0; } .meldungen .wp-block-post-template > li { display: flex; flex-direction: column; gap: 10px; margin: 0; } .meldungen .wp-block-post-featured-image { margin: 0 0 6px; overflow: hidden; } .meldungen .wp-block-post-date, .meldungen .wp-block-post-title, .meldungen .wp-block-post-excerpt { margin: 0; } .meldungen .wp-block-post-excerpt__excerpt { margin: 0; color: var(--schiefer); font-size: 0.9375rem; } .meldungen .wp-block-post-excerpt__more-text { display: none; } /* Aktuelles: neueste Meldung groß links, die nächsten drei als Liste rechts */ .aktuelles .meldungen .wp-block-post-template { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto) 1fr; gap: 0 clamp(28px, 4vw, 64px); align-items: start; } .aktuelles .meldungen li:first-child { grid-column: 1; grid-row: 1 / 5; } .aktuelles .meldungen li:first-child .wp-block-post-title { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; } .aktuelles .meldungen li:not(:first-child) { grid-column: 2; gap: 6px; padding: 18px 0; border-top: 1px solid var(--nebel); } .aktuelles .meldungen li:nth-child(2) { border-top: 0; padding-top: 0; } .aktuelles .meldungen li:not(:first-child) .wp-block-post-featured-image { display: none; } .aktuelles .meldungen li:not(:first-child) .wp-block-post-title { font-size: var(--wp--preset--font-size--gross); line-height: 1.3; } .aktuelles .meldungen li:not(:first-child) .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .meldungen .wp-block-post-title a:hover { color: var(--tanne); } /* Seite Aktuelles: neueste Meldung groß über die volle Breite, die früheren kleiner darunter (ab Seite 2 nur die kleine Form) */ .meldungen-archiv .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); } .meldungen-archiv .wp-block-post-template > li { display: grid; grid-template-columns: clamp(120px, 14vw, 176px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 4px 20px; align-content: start; padding: 20px 0; border-top: 1px solid var(--nebel); } .meldungen-archiv li .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / 4; margin: 0; } .meldungen-archiv li > :not(.wp-block-post-featured-image) { grid-column: 2; } .meldungen-archiv li .wp-block-post-title { font-size: var(--wp--preset--font-size--gross); line-height: 1.3; } .meldungen-archiv li .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body:not(.paged) .meldungen-archiv li:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto auto 1fr auto; gap: 0 clamp(28px, 4vw, 56px); padding: 0; border-top: 0; } body:not(.paged) .meldungen-archiv li:first-child .wp-block-post-featured-image { grid-row: 1 / 6; } body:not(.paged) .meldungen-archiv li:first-child .wp-block-post-date { grid-row: 2; } body:not(.paged) .meldungen-archiv li:first-child .wp-block-post-title { grid-row: 3; margin-top: 8px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.12; font-stretch: 112%; } body:not(.paged) .meldungen-archiv li:first-child .wp-block-post-excerpt { grid-row: 4; margin-top: 14px; } body:not(.paged) .meldungen-archiv li:first-child .wp-block-post-excerpt__excerpt { display: block; font-size: 1.0625rem; line-height: 1.6; } body:not(.paged) .meldungen-archiv li:first-child:not(:last-child)::after { content: "Frühere Meldungen"; grid-column: 1 / -1; grid-row: 6; margin-top: clamp(40px, 5vw, 64px); padding-bottom: 12px; font-size: var(--wp--preset--font-size--klein); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tanne); } body:not(.paged) .meldungen-archiv li:nth-child(2), body:not(.paged) .meldungen-archiv li:nth-child(3) { border-top: 1px solid var(--nebel); } /* Verband: gleich unter dem Aufmacher, Bild links, Text und Aufgaben des Verbands rechts */ .verband { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(28px, 4vw, 56px); align-items: stretch; } .verband > * { margin: 0 !important; } .verband-bild { margin: 0; } .verband-bild img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: 50% 45%; } .verband-text h2 { margin-top: 0; } .verband-text p { max-width: 36em; } .verband-text .einleitung { font-size: var(--wp--preset--font-size--gross); line-height: 1.5; } .verband-mehr { margin-top: 20px !important; font-weight: 600; } .verband-vdg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 20px !important; } .verband-vdg p { margin: 0; flex: 1 1 16em; } .verband-vdg .vdg-logo { order: -1; } /* Logo vor dem Satz, sonst hängt es am rechten Rand hinter dem Flatterrand */ .verband-vdg .vdg-logo img { width: 150px !important; } .vdg-logo { margin: 0; flex: none; } .vdg-logo a { display: block; transition: opacity 200ms ease; } .vdg-logo a:hover { opacity: .75; } .vdg-logo img { max-width: 100%; height: auto; border-radius: 0 !important; } .vdg-spalten { align-items: center; } /* drei Zahlen statt Aufzählung, Einzelheiten stehen auf der Seite Verband */ .verband-zahlen { display: flex; flex-wrap: wrap; gap: 16px clamp(28px, 4vw, 56px); margin-top: 28px !important; padding-top: 22px; border-top: 1px solid var(--nebel); } .verband-zahlen p { margin: 0 !important; color: var(--schiefer); font-size: var(--wp--preset--font-size--klein); } .verband-zahlen strong { display: block; color: var(--fels); font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 750; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.1; } .verband-text .verband-mehr { margin-top: 28px !important; } .verband-aufgaben { margin-top: 28px !important; } .verband-aufgaben h3 { margin: 0 0 4px; font-size: var(--wp--preset--font-size--gross); font-stretch: 108%; } .verband-aufgaben ul { list-style: none; padding: 0; margin: 0; } .verband-aufgaben li { padding: 10px 0; border-top: 1px solid var(--nebel); color: var(--schiefer); line-height: 1.5; } .verband-aufgaben li:first-child { border-top: 0; } .verband-aufgaben strong { color: var(--fels); font-weight: 600; } /* Seite Verband: Bild und Text im Wechsel, Karten, Zeitleiste */ .seite-breit .seite-titel { margin-bottom: clamp(16px, 2.2vw, 28px); } .seite-breit > .wp-block-post-content { padding-inline: 0 !important; } .fliesstext > .vb-reihe, .fliesstext > .vb-abschnitt, .fliesstext > .partner { margin-top: clamp(40px, min(5vw, 8vh), 64px); } .fliesstext > .vb-reihe:first-child, .fliesstext > :first-child { margin-top: 0; } .vb-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 56px); align-items: center; } .vb-reihe > * { margin: 0 !important; } .vb-reihe.bild-rechts > .vb-bild { order: 2; } .vb-bild img { width: 100%; aspect-ratio: 3 / 2; max-height: 58vh; height: auto; object-fit: cover; display: block; border-radius: var(--radius); } .vb-bild figcaption { margin: 10px 0 0; text-align: left; font-size: var(--wp--preset--font-size--klein); color: var(--schiefer); } .vb-text h2, .vb-abschnitt h2 { margin: 0 0 16px !important; } .vb-text > * + * { margin-top: 1em; } .vb-text p { max-width: 36em; } .vb-einleitung { font-size: var(--wp--preset--font-size--gross); line-height: 1.5; color: var(--fels); } .vb-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0 !important; } .vb-karten > * { margin: 0 !important; } .vb-karte { background: var(--weiss); border-radius: var(--radius); padding: clamp(18px, 2vw, 26px); } .vb-karte h3 { margin: 0 0 6px !important; font-size: var(--wp--preset--font-size--gross); font-stretch: 108%; } .vb-karte p { margin: 0 !important; color: var(--schiefer); font-size: 0.9375rem; line-height: 1.5; } .zeitleiste, .vb-liste { list-style: none; padding: 0; margin: 0; } .zeitleiste li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--nebel); line-height: 1.5; margin: 0; } .zeitleiste li:first-child { border-top: 0; padding-top: 0; } .zeitleiste strong { color: var(--tanne); font-weight: 700; font-variant-numeric: tabular-nums; } .vb-bild.bild-oben img { aspect-ratio: 791 / 885; max-height: min(64vh, 520px); object-position: 50% 30%; } /* Kletterer ganz zeigen */ /* Aus der Chronik: drei kleine Archivbilder (Seitenausschnitte, deshalb klein) */ .vb-chronik h3 { margin: 0 0 14px !important; font-size: var(--wp--preset--font-size--gross); } .vb-chronik-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: 0 !important; } .vb-chronik-bilder > * { margin: 0 !important; } .vb-chronik-bilder img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; border-radius: var(--radius); } .vb-chronik-bilder figcaption { margin: 8px 0 0; text-align: left; font-size: var(--wp--preset--font-size--klein); color: var(--schiefer); line-height: 1.45; } .fliesstext > .vb-chronik { margin-top: clamp(28px, 4vw, 48px); } /* Verbindungen: Logos der befreundeten Verbände auf heller Fläche, Namen in fester dunkler Farbe (auch im Dunkelmodus) */ .vb-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--logo-grund); border-radius: var(--radius); padding: 8px; margin-top: 16px !important; } .vb-logos > figure { margin: 0 !important; padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } .vb-logos a { display: block; transition: opacity 200ms ease; } .vb-logos a:hover { opacity: .75; } .vb-logos img { height: 72px; width: auto; max-width: 100%; object-fit: contain; border-radius: 0 !important; display: block; margin-inline: auto; } .vb-logos figcaption { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.35; color: #4A575D; } /* Seite Aufgaben: Sprungmarken, Wechselreihen wie Verband, Weg zum Heeresbergführer als Route */ .sprung { list-style: none; padding: 0; margin: 24px 0 0 !important; display: flex; flex-wrap: wrap; gap: 10px; } .sprung li { margin: 0; } .sprung a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--weiss); color: var(--fels); text-decoration: none; font-weight: 600; font-size: 0.9375rem; transition: background 200ms ease, color 200ms ease; } .sprung a:hover { background: var(--fels); color: var(--weiss); } .auf-kopf .vb-einleitung { max-width: 40em; margin: 0 !important; } .auf-zwischen { margin: 0 0 14px !important; font-size: var(--wp--preset--font-size--gross) !important; } .vb-karten.auf-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weg { background: var(--weiss); border-radius: var(--radius-gross); padding: clamp(20px, 3vw, 40px); } .weg-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(28px, 4vw, 48px); margin: 0 !important; } .weg-kopf > * { margin: 0 !important; } .weg-intro h2 { margin: 0 0 16px !important; } .weg-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px !important; } .weg-werte p { margin: 0 !important; padding: 16px 18px; border-radius: var(--radius); background: var(--eis); color: var(--schiefer); font-size: 0.9375rem; line-height: 1.4; } .weg-werte strong { display: block; margin-bottom: 4px; color: var(--fels); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 750; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.1; } .weg-bild img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); display: block; } /* Weg zum Heeresbergführer: fünf Schritte als Route, Module nur als Stichworte */ .weg-schritte { counter-reset: schritt; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: clamp(28px, 3vw, 40px) 0 0 !important; } .weg-schritte > * { margin: 0 !important; } .weg-schritt { counter-increment: schritt; position: relative; padding-top: 60px; } .weg-schritt::before { content: counter(schritt); position: absolute; top: 0; left: 0; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--tanne); color: var(--weiss); display: grid; place-items: center; font-weight: 700; font-size: 1.0625rem; transition: transform 300ms cubic-bezier(.2, .7, .1, 1); } .weg-schritt:hover::before { transform: scale(1.12); } .weg-schritt::after { content: ""; position: absolute; top: 21px; left: 54px; right: -14px; border-top: 2px dashed var(--nebel); transform-origin: left center; } /* Route zum nächsten Schritt */ .weg-schritt:last-child::after { display: none; } .weg-schritt h3 { margin: 0 0 8px !important; font-size: var(--wp--preset--font-size--gross); font-stretch: 108%; line-height: 1.25; } /* Kleines Bild je Schritt, Titel im Bild auf dunklem Verlauf */ .weg-schritt { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; } .weg-schritt-bild { grid-row: 1; grid-column: 1; position: relative; margin: 0 0 12px !important; border-radius: var(--radius); overflow: hidden; } .weg-schritt-bild img { display: block; width: 100%; height: clamp(110px, 10vw, 150px); object-fit: cover; border-radius: 0 !important; transition: transform 600ms ease; } .weg-schritt-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 20, 24, .78) 0%, rgba(14, 20, 24, .25) 45%, rgba(14, 20, 24, 0) 70%); } .weg-schritt:hover .weg-schritt-bild img { transform: scale(1.04); } .weg-schritt > .weg-schritt-bild + h3 { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 1; margin: 0 0 12px !important; padding: 0 12px 10px; color: #FFFFFF; } .weg-schritt p { margin: 0 !important; color: var(--schiefer); font-size: 0.9375rem; line-height: 1.5; } .weg-chips { list-style: none; padding: 0; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; } .weg-chips li { margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--eis); font-size: var(--wp--preset--font-size--klein); font-weight: 600; color: var(--fels); } .weg-orte { margin-top: clamp(28px, 3vw, 40px) !important; padding-top: 22px; border-top: 1px solid var(--nebel); } .weg-route { list-style: none; padding: 0; margin: 6px 0 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; } .weg-route li { margin: 0; display: flex; align-items: center; font-weight: 650; font-stretch: 108%; font-size: clamp(1.0625rem, 1.6vw, 1.375rem); color: var(--fels); } .weg-route li + li::before { content: ""; width: clamp(18px, 3vw, 44px); margin: 0 12px; border-top: 2px dashed var(--tanne); transform-origin: left center; } /* Ausbildungsorte: Karte des Alpenraums (karte_ausbildungsorte.js) und nummerierte Liste mit Länderflagge */ .weg-orte { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(28px, 4vw, 56px); align-items: center; } .weg-orte > * { margin: 0 !important; } .weg-karte img { width: 100%; height: auto; display: block; border-radius: var(--radius); } .weg-orte-text h3 { margin: 0 0 14px !important; font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-stretch: 110%; } .orte-liste { list-style: none; counter-reset: ort; padding: 0; margin: 0 !important; display: grid; grid-template-columns: 30px minmax(0, 1fr) max-content; column-gap: 12px; row-gap: 2px; } .orte-liste li { counter-increment: ort; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; margin: 0; padding: 10px 0; border-top: 1px solid var(--nebel); } .orte-liste li:first-child { border-top: 0; } .orte-liste li::before { content: counter(ort); width: 26px; height: 26px; border-radius: 50%; background: var(--tanne); color: var(--weiss); display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; } .ort-name { font-weight: 650; font-stretch: 108%; color: var(--fels); font-size: 1.0625rem; } .ort-land { display: inline-flex; align-items: center; gap: 8px; color: var(--schiefer); font-size: var(--wp--preset--font-size--klein); white-space: nowrap; } .flagge { width: 24px; height: 16px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(24, 32, 36, .12); display: block; } @media (max-width: 900px) { .weg-orte { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: no-preference) { .bewegt .orte-liste li { opacity: 0; transform: translateX(-12px); transition: opacity 500ms ease, transform 600ms cubic-bezier(.2, .7, .1, 1); } .bewegt .orte-liste.sichtbar li { opacity: 1; transform: none; } .bewegt .orte-liste li:nth-child(2) { transition-delay: 100ms; } .bewegt .orte-liste li:nth-child(3) { transition-delay: 200ms; } .bewegt .orte-liste li:nth-child(4) { transition-delay: 300ms; } .bewegt .orte-liste li:nth-child(5) { transition-delay: 400ms; } .bewegt .orte-liste li:nth-child(6) { transition-delay: 500ms; } .bewegt .weg-karte img { opacity: 0; transform: scale(.97); transition: opacity 800ms ease, transform 1000ms cubic-bezier(.2, .7, .1, 1); } .bewegt .weg-karte.sichtbar img { opacity: 1; transform: none; } } .weg-knoepfe { gap: 10px; margin-top: clamp(28px, 3vw, 40px) !important; } .weg-knoepfe .is-style-outline .wp-block-button__link { border: 1.5px solid var(--fels); background: transparent; color: var(--fels); } .weg-knoepfe .is-style-outline .wp-block-button__link:hover { background: var(--fels); color: var(--weiss); } .weg-bild { overflow: hidden; border-radius: var(--radius); } .zaehler { font-variant-numeric: tabular-nums; } /* Bewegung beim Hineinscrollen (theme.js setzt .bewegt und .sichtbar); ohne Skript oder bei reduzierter Bewegung steht alles sofort da */ @media (prefers-reduced-motion: no-preference) { .bewegt .weg-werte p, .bewegt .weg-schritt, .bewegt .weg-route li { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 700ms cubic-bezier(.2, .7, .1, 1); } .bewegt .weg-werte.sichtbar p, .bewegt .weg-schritte.sichtbar .weg-schritt, .bewegt .weg-route.sichtbar li { opacity: 1; transform: none; } .bewegt .weg-schritt::after, .bewegt .weg-route li + li::before { transform: scaleX(0); transition: transform 500ms ease; } .bewegt .weg-schritte.sichtbar .weg-schritt::after, .bewegt .weg-route.sichtbar li + li::before { transform: scaleX(1); } .bewegt :is(.weg-werte p, .weg-schritt, .weg-route li):nth-child(2), .bewegt :is(.weg-schritt, .weg-route li):nth-child(1)::after { transition-delay: 140ms; } .bewegt :is(.weg-werte p, .weg-schritt, .weg-route li):nth-child(3), .bewegt :is(.weg-schritt, .weg-route li):nth-child(2)::after, .bewegt .weg-route li:nth-child(2)::before { transition-delay: 280ms; } .bewegt :is(.weg-werte p, .weg-schritt, .weg-route li):nth-child(4), .bewegt :is(.weg-schritt, .weg-route li):nth-child(3)::after, .bewegt .weg-route li:nth-child(3)::before { transition-delay: 420ms; } .bewegt :is(.weg-schritt, .weg-route li):nth-child(5), .bewegt .weg-schritt:nth-child(4)::after, .bewegt .weg-route li:nth-child(4)::before { transition-delay: 560ms; } .bewegt .weg-route li:nth-child(6), .bewegt .weg-route li:nth-child(5)::before { transition-delay: 700ms; } .bewegt .weg-route li:nth-child(6)::before { transition-delay: 840ms; } .bewegt .weg-bild img { transform: scale(1.1); transition: transform 2600ms cubic-bezier(.2, .7, .1, 1); } .bewegt .weg-bild.sichtbar img { transform: scale(1); } } @media (max-width: 1100px) { .weg-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; } .weg-schritt:nth-child(3)::after { display: none; } } @media (max-width: 900px) { .weg-teaser, .weg-kopf { grid-template-columns: minmax(0, 1fr); } .weg-teaser-bild img { min-height: 0; max-height: none; aspect-ratio: 21 / 9; height: auto; object-position: 50% 27%; } /* Helm nicht am Rand */ .weg-bild img { aspect-ratio: 16 / 9; height: auto; } .weg-schritte { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .weg-schritt { padding: 0 0 0 62px; min-height: 44px; } .weg-schritt::after, .weg-schritt:nth-child(3)::after { display: block; top: 52px; bottom: -22px; left: 21px; right: auto; border-top: 0; border-left: 2px dashed var(--nebel); transform-origin: center top; } .weg-schritt:last-child::after { display: none; } .bewegt .weg-schritt::after { transform: scaleY(0); } .bewegt .weg-schritte.sichtbar .weg-schritt::after { transform: scaleY(1); } } @media (max-width: 600px) { .vb-karten.auf-zwei, .weg-werte { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .vb-reihe { grid-template-columns: minmax(0, 1fr); } .vb-reihe.bild-rechts > .vb-bild { order: 0; } .vb-bild img { aspect-ratio: 16 / 9; } .vb-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .vb-karten { grid-template-columns: minmax(0, 1fr); } .vb-chronik-bilder { grid-template-columns: minmax(0, 1fr); } .vb-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Seite Medien: Videokarten, Vorschaubild mit Abspielknopf; der Klick öffnet das Video auf YouTube (nichts eingebettet) */ .videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px); margin: 0 !important; } .videos > * { margin: 0 !important; } .video-karte > * { margin: 0 !important; } .video-bild { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0A0F11; } .video-bild a { display: block; height: 100%; } .video-bild img { width: 100%; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; transition: transform 500ms cubic-bezier(.2, .7, .1, 1), opacity 300ms ease; } .video-bild a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23182024'/%3E%3C/svg%3E") 55% 50% / 28px no-repeat; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); transition: transform 200ms ease; } .video-bild a:hover img { transform: scale(1.04); opacity: .9; } .video-bild a:hover::after { transform: scale(1.08); } .video-meta { margin-top: 14px !important; font-size: var(--wp--preset--font-size--klein); color: var(--schiefer); } .video-karte h3 { margin-top: 4px !important; font-size: var(--wp--preset--font-size--gross); font-stretch: 108%; line-height: 1.25; } .video-karte h3 + p { margin-top: 6px !important; color: var(--schiefer); font-size: 0.875rem; line-height: 1.5; } /* Seite Medien: hervorgehobene Doku oben, dunkle Fläche mit festen Farben (auch im Dunkelmodus) */ .doku { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: clamp(24px, 3vw, 40px) !important; padding: clamp(16px, 2vw, 28px); border-radius: var(--radius-gross); background: var(--dunkel-verlauf); color: #C7D2D6; } .doku > * { margin: 0 !important; } .doku .auf-nummer { color: #8FD1B5; } .doku-text h2 { margin: 0 0 10px !important; color: #FFFFFF; font-size: clamp(1.75rem, 3vw, 2.5rem); font-stretch: 112%; letter-spacing: -0.02em; } .doku-text > p:not(.auf-nummer) { margin: 0; line-height: 1.55; } .doku-teile { list-style: none; padding: 0; margin: 20px 0 0 !important; display: grid; gap: 4px; } .doku-teile li { margin: 0; } .doku-teile a { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 8px; border-radius: 12px; color: #FFFFFF; text-decoration: none; transition: background 200ms ease; } .doku-teile a:hover { background: rgba(255, 255, 255, .08); } .doku-teile img { grid-row: 1 / 3; width: 96px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 8px; } .doku-teil { grid-column: 2; font-size: var(--wp--preset--font-size--klein); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8FD1B5; } .doku-titel { grid-column: 2; font-weight: 600; line-height: 1.3; } .doku-dauer { grid-column: 3; grid-row: 1 / 3; font-size: var(--wp--preset--font-size--klein); color: #9FB0B6; white-space: nowrap; } .doku-gesamt { margin-top: 14px !important; padding-left: 8px; } .doku-gesamt a { color: #FFFFFF; font-weight: 600; } .doku-gesamt a::after { content: " ↗"; } .doku :where(a):focus-visible { outline-color: #8FD1B5; } @media (max-width: 900px) { .doku { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 400px) { .doku-teile a { grid-template-columns: 72px minmax(0, 1fr); } .doku-teile img { width: 72px; } .doku-dauer { grid-column: 2; grid-row: auto; } } .medien-hinweis { margin: -4px 0 24px !important; color: var(--schiefer); font-size: var(--wp--preset--font-size--klein); } .medien-bilder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); margin: 0 !important; } .medien-bilder > * { margin: 0 !important; } .medien-bilder img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; display: block; border-radius: var(--radius); } .medien-bilder figcaption { margin: 6px 0 0; text-align: left; font-size: var(--wp--preset--font-size--klein); color: var(--schiefer); line-height: 1.4; } @media (max-width: 1100px) { .medien-bilder { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .videos { grid-template-columns: minmax(0, 1fr); } .medien-bilder { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Mitgliederbereich */ .mitglieder-band { margin-top: var(--wp--preset--spacing--50); background: var(--band-grund); color: #E8F3EE; border-radius: var(--radius-gross); padding: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; } .mitglieder-band h2 { color: #FFFFFF; margin: 0 0 12px; } .mitglieder-band p { margin: 0; max-width: 34em; font-size: var(--wp--preset--font-size--gross); line-height: 1.45; } .knopf-hell .wp-block-button__link { background: var(--weiss); color: var(--fels); } .knopf-hell .wp-block-button__link:hover { background: var(--fels); color: var(--weiss); } /* Partner */ .partner-titel { font-size: var(--wp--preset--font-size--normal); font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--schiefer); margin-bottom: 18px; } /* Partner: Titel und Satz in einer Zeile, darunter 5 × 3 Logos über die volle Breite auf weißer Fläche. Originallogos, Breite in Prozent der Zelle (partnerlogos.py) */ .partner { display: block; } .partner-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; margin-bottom: 18px !important; } .partner-kopf > * { margin: 0; } .partner-titel { font-size: var(--wp--preset--font-size--gross); font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; color: var(--fels); } .partner-text { margin-top: 0 !important; color: var(--schiefer); font-size: 0.9375rem; line-height: 1.5; } .partner-reihe { display: flex; flex-wrap: wrap; justify-content: center; background: var(--logo-grund); border-radius: var(--radius); padding: clamp(4px, 1vw, 12px); margin: 0 !important; } .partner-reihe > .wp-block-image, .partner-reihe > .partner-paar { margin: 0 !important; flex: 0 0 20%; width: 20%; aspect-ratio: 3 / 1; display: flex; align-items: center; justify-content: center; background: var(--logo-grund); } .partner-reihe .wp-block-image a { display: block; width: 86%; margin-inline: auto; text-align: center; border-radius: 6px; transition: opacity 200ms ease; } .partner-reihe .wp-block-image a:hover { opacity: .7; } .partner-paar { gap: 0 !important; } .partner-paar > .wp-block-image { width: 50%; margin: 0; } .partner-paar > .wp-block-image:first-child a { margin-right: 3%; text-align: right; } .partner-paar > .wp-block-image:last-child a { margin-left: 3%; text-align: left; } .partner-reihe img { height: auto; border-radius: 0; vertical-align: middle; } /* Mit Skript: ein schmales Laufband in einer Zeile, hält beim Darüberfahren an. Ohne Skript oder bei reduzierter Bewegung bleibt das Raster. */ .partner-reihe.laeuft { display: block; overflow: hidden; padding: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .partner-spur { display: flex; width: max-content; will-change: transform; } /* bewegt von theme.js */ .partner-spur > .wp-block-image, .partner-spur > .partner-paar { flex: none; width: 200px; height: 104px; margin: 0 !important; display: flex; align-items: center; justify-content: center; } .partner-spur > .partner-paar { width: 400px; } .partner-kopf .partner-knoepfe { margin-left: auto; } @media (max-width: 600px) { .partner-spur > .wp-block-image { width: 150px; height: 84px; } .partner-spur > .partner-paar { width: 300px; height: 84px; } } /* Partner: Bergsportgeschäfte und Partnerverbände unter dem Herstellerband, je eine helle Karte */ .partner-gruppen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(12px, 1.6vw, 20px) !important; } .partner-gruppen > * { margin: 0 !important; } .partner-gruppe { background: var(--logo-grund); border-radius: var(--radius); padding: clamp(16px, 2vw, 22px) clamp(16px, 2.4vw, 32px) clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; } .partner-gruppe h3 { margin: 0 !important; padding-bottom: 12px; border-bottom: 1px solid rgba(24, 32, 36, .1); font-size: var(--wp--preset--font-size--klein); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0B6B4C; } .partner-logos { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; justify-items: center; gap: 16px 28px; min-height: 104px; padding-top: clamp(18px, 2vw, 24px); margin: 0 !important; } .partner-logos > figure { margin: 0 !important; max-width: 100%; } .partner-logos a { display: block; transition: opacity 200ms ease; } .partner-logos a:hover { opacity: .7; } .partner-logos img { display: block; height: 56px; width: auto; max-width: min(180px, 100%); object-fit: contain; border-radius: 0 !important; } .partner-logos .rund img { height: 72px; } @media (max-width: 900px) { .partner-gruppen { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .partner-logos { min-height: 0; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .partner-logos img { height: 44px; max-width: 130px; } .partner-logos .rund img { height: 60px; } } /* Startseite, Aktuelles als schmale Zeile: drei Meldungen mit kleinem Bild */ .aktuelles-kurz .meldungen .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 2.4vw, 32px); } .aktuelles-kurz .meldungen li { display: grid; grid-template-columns: clamp(96px, 9vw, 120px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 16px; align-content: start; } .aktuelles-kurz .meldungen li .wp-block-post-featured-image { grid-row: 1 / 3; margin: 0; } .aktuelles-kurz .meldungen li .wp-block-post-title { font-size: var(--wp--preset--font-size--gross); line-height: 1.3; hyphens: manual; overflow-wrap: break-word; } @media (max-width: 900px) { .aktuelles-kurz .meldungen .wp-block-post-template { grid-template-columns: minmax(0, 1fr); } } /* Startseite, Abschluss: dunkle Karte mit Kontakt und Mitgliederbereich */ .abschluss { background: var(--dunkel-verlauf); color: #C7D2D6; border-radius: var(--radius-gross); padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 48px; } .abschluss h2 { color: #FFFFFF; margin: 0 0 8px; } .abschluss p { margin: 0; max-width: 36em; } .abschluss .abschluss-knoepfe { margin: 0 !important; gap: 10px; } .abschluss .wp-block-button__link { background: #FFFFFF; color: #182024; } .abschluss .wp-block-button__link:hover { background: #8FD1B5; color: #182024; } .abschluss .is-style-outline .wp-block-button__link { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, .6); } .abschluss .is-style-outline .wp-block-button__link:hover { background: transparent; color: #8FD1B5; border-color: #8FD1B5; } @media (max-width: 760px) { .abschluss { grid-template-columns: minmax(0, 1fr); } } /* Verbandsseite, Partner und Unterstützer: festes Raster, kleine Logos, im Editor pflegbar */ .partner-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); margin-top: 20px !important; background: var(--logo-grund); border-radius: var(--radius); padding: 6px 10px; } .partner-raster > .wp-block-image { margin: 0 !important; height: 56px; display: flex; align-items: center; justify-content: center; } .partner-raster a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: opacity 200ms ease; } .partner-raster a:hover { opacity: .7; } .partner-raster img { height: 19px; width: auto; max-width: 74%; object-fit: contain; border-radius: 0 !important; } .partner-raster .logo-hoch img { height: 29px; } .partner-kurz .partner-kopf { margin-bottom: 0 !important; } /* Zwei Gruppen auf einer hellen Fläche: Partner (Hersteller) und Unterstützer (Bergsportgeschäfte) */ .partner-flaeche { margin-top: 20px !important; background: var(--logo-grund); border-radius: var(--radius); padding: clamp(14px, 1.8vw, 20px) clamp(14px, 2.2vw, 28px); } .partner-flaeche > * { margin-block: 0 !important; } .partner-flaeche .partner-raster { background: none; padding: 0; margin-top: 4px !important; } .partner-flaeche .partner-raster + .partner-gruppe-titel { margin-top: 12px !important; padding-top: 14px; border-top: 1px solid rgba(24, 32, 36, .1); } .partner-gruppe-titel { font-size: var(--wp--preset--font-size--klein); font-weight: 700; font-stretch: 100%; letter-spacing: .08em; text-transform: uppercase; color: #0B6B4C; } @media (max-width: 600px) { .partner-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 6px; } .partner-raster > .wp-block-image { height: 46px; } .partner-raster img { height: 15px; max-width: 80%; } .partner-raster .logo-hoch img { height: 24px; } } /* Fuß */ .fuss { background: var(--fuss-tief); color: #C7D2D6; margin-top: var(--wp--preset--spacing--50); padding-block: clamp(32px, 4vw, 48px) 20px; font-size: 0.9375rem; } .fuss a { color: #E4EAEC; text-decoration: none; } .fuss a:hover { color: #8FD1B5; text-decoration: underline; } .fuss strong { color: #FFFFFF; } .fuss-oben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; } .fuss-marke { display: flex; align-items: center; gap: 16px; } .fuss-marke .wp-block-image { margin: 0; flex: none; } .fuss-anschrift { margin: 0; line-height: 1.5; } .fuss-nav, .fuss-recht { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; } .fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; margin-top: 28px !important; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--wp--preset--font-size--klein); color: #9FB0B6; } .fuss-hinweis { margin: 0; } .fuss-recht a { color: #C7D2D6; } /* Instagram und Facebook: einfache Links, keine Einbettung (keine Verbindung zu Meta vor dem Klick) */ .fuss .wp-block-social-links.fuss-sozial { gap: 10px; margin: 0; padding: 0; } .fuss .wp-block-social-links.fuss-sozial .wp-social-link { color: #E4EAEC; background: transparent; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; transition: color 200ms ease, border-color 200ms ease; } .fuss .wp-block-social-links.fuss-sozial .wp-social-link a { padding: 9px; } .fuss .wp-block-social-links.fuss-sozial .wp-social-link svg { width: 18px; height: 18px; } .fuss .wp-block-social-links.fuss-sozial .wp-social-link:hover { color: #8FD1B5; border-color: #8FD1B5; transform: none; } /* Unterseiten und Meldung */ .seite { padding-top: clamp(24px, 3.5vw, 44px); } .seite-titel { font-size: var(--wp--preset--font-size--riesig); font-stretch: 118%; font-weight: 800; letter-spacing: -0.03em; margin-bottom: clamp(16px, 2.4vw, 28px); } .meldung-kopf .wp-block-post-date { margin-bottom: 32px; } .meldung-titel { font-size: var(--wp--preset--font-size--titel); margin-top: 8px; } .zurueck a { text-decoration: none; font-weight: 600; } .fliesstext { font-size: 1.0625rem; line-height: 1.65; } .fliesstext > * + * { margin-top: 1.1em; } .fliesstext h2 { font-size: clamp(1.375rem, 2vw, 1.625rem); margin-top: 2em; } .fliesstext h3 { font-size: 1.0625rem; margin-top: 1.6em; } .fliesstext h2 + *, .fliesstext h3 + * { margin-top: 0.5em; } /* Meldung: Bildergalerie (Markus 18.10.2026: „mehrere Bilder“). Gleich große Kacheln 3:2, ab drei Bildern etwas breiter als der Text, letzte Reihe ohne Strecken. Lange Galerien zeigen erst zwei Reihen, der Knopf darunter klappt den Rest auf (theme.js). Klick auf ein Bild öffnet die Großansicht mit Blättern. */ .meldung .fliesstext > .wp-block-gallery { --galerie-breite: min(960px, calc(100vw - 2 * var(--wp--style--root--padding-left, 24px))); width: var(--galerie-breite); max-width: none; margin: clamp(32px, 4vw, 48px) 0 0 calc(50% - var(--galerie-breite) / 2) !important; --wp--style--unstable-gallery-gap: clamp(8px, 1.2vw, 14px); gap: var(--wp--style--unstable-gallery-gap); } .meldung .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { flex-grow: 0; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; } .meldung .wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover !important; border-radius: 0; transition: transform 500ms cubic-bezier(.2, .7, .1, 1); } .meldung .wp-block-gallery figure.wp-block-image:hover img { transform: scale(1.04); } .meldung .fliesstext > .wp-block-gallery:not(:has(> figure.wp-block-image:nth-child(3))) { --galerie-breite: 100%; } /* Bildunterschrift höchstens zwei Zeilen; der durchsichtige Rand unten hält Abstand, ohne dass eine dritte Zeile halb hineinragt */ .meldung .wp-block-gallery figure.wp-block-image figcaption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: none; padding: 20px 10px 0; border-bottom: 8px solid transparent; font-size: var(--wp--preset--font-size--klein); line-height: 1.35; } .meldung .wp-block-gallery.galerie-zu figure.wp-block-image:nth-child(n+7):not(#individual-image) { display: none; } .galerie-mehr { display: block; margin: 20px auto 0; font: inherit; font-weight: 600; padding: 12px 22px; border: 1.5px solid var(--fels); border-radius: 10px; background: transparent; color: var(--fels); cursor: pointer; transition: background 200ms ease, color 200ms ease; } .galerie-mehr:hover { background: var(--fels); color: var(--weiss); } .galerie-mehr:focus-visible { outline: 3px solid var(--tanne); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .meldung .wp-block-gallery figure.wp-block-image img { transition: none; } .meldung .wp-block-gallery figure.wp-block-image:hover img { transform: none; } } /* Großansicht: dunkler Grund wie im Bildbetrachter, helle Knöpfe (WordPress setzt sonst die Seitenfarbe) */ .wp-lightbox-overlay .scrim { background-color: #0E1316 !important; opacity: .96; } @media (prefers-reduced-motion: reduce) { .wp-lightbox-overlay .scrim { opacity: 1 !important; } } /* Meldung: Video als Link statt Player (functions.php). Bild und Abspielknopf wie auf der Seite Medien (.video-bild) */ .video-link { margin-block: 1.6em; } .video-link .video-bild { margin: 0; } .video-link .video-meta { margin-top: 12px !important; } .video-link-titel { margin-top: 2px !important; font-size: var(--wp--preset--font-size--gross); font-weight: 700; font-stretch: 108%; line-height: 1.3; } .video-link-titel a { color: inherit; text-decoration: none; } .video-link-titel a::after { content: " ↗"; content: " ↗" / ""; font-weight: 400; color: var(--tanne); } .video-link-titel a:hover { color: var(--tanne); } .einbettung-link a::after { content: " ↗"; content: " ↗" / ""; } /* Aktuelles: Hinweis auf Facebook unter den Meldungen, nur Link (keine Einbettung, keine Verbindung zu Meta vor dem Klick) */ .aktuelles-facebook { margin-top: clamp(32px, 4vw, 48px) !important; padding-top: 20px; border-top: 1px solid var(--nebel); color: var(--schiefer); font-size: 0.9375rem; } .aktuelles-facebook a::after { content: " ↗"; content: " ↗" / ""; } .wp-block-embed .wp-block-embed__wrapper::before { display: none; } .wp-lightbox-overlay > button { fill: #F2F5F6 !important; color: #F2F5F6; } .login-formular form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; } .login-formular input[type=text], .login-formular input[type=password] { font: inherit; padding: 12px 14px; border: 1.5px solid var(--nebel); border-radius: 10px; background: var(--weiss); color: inherit; } .login-formular input[type=text]:focus, .login-formular input[type=password]:focus { outline: 3px solid var(--tanne); outline-offset: 1px; border-color: var(--tanne); } .login-formular .login-remember { flex-direction: row; align-items: center; } .login-formular input[type=submit] { font: inherit; font-weight: 600; background: var(--fels); color: var(--weiss); border: 0; border-radius: 10px; padding: 12px 22px; cursor: pointer; } .login-formular input[type=submit]:hover { background: var(--tanne); } /* Mobiles Menü in den Farben der Seite (WordPress setzt sonst festes Weiß und Schwarz) */ /* Telefon und Tablet */ @media (max-width: 900px) { .marke-name span { display: none; } .marke-abzeichen img { width: 50px !important; } .kopf { padding-block: 12px; gap: 12px; } .kopf-login .wp-block-button__link { white-space: nowrap; font-size: 0.8125rem; padding: 0.5em 0.8em; } .mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); } .verband { grid-template-columns: 1fr; } .verband-bild img { aspect-ratio: 16 / 9; height: auto; min-height: 0; } .ausbildung-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ausbildung-bild { grid-column: 1 / -1; } .ausbildung-bild img { aspect-ratio: 21 / 9; height: auto; min-height: 0; } .aktuelles .meldungen li:first-child, .aktuelles .meldungen li:not(:first-child) { grid-column: 1; grid-row: auto; } .aktuelles .meldungen li:first-child { padding-bottom: 24px; } .aktuelles .meldungen li:nth-child(2) { border-top: 1px solid var(--nebel); padding-top: 18px; } .meldungen .wp-block-post-template, .aktuelles .meldungen .wp-block-post-template, .meldungen-archiv .wp-block-post-template { grid-template-columns: minmax(0, 1fr); } body:not(.paged) .meldungen-archiv li:first-child { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } body:not(.paged) .meldungen-archiv li:first-child > * { grid-column: 1; grid-row: auto !important; } body:not(.paged) .meldungen-archiv li:first-child .wp-block-post-featured-image { margin-bottom: 16px; } body:not(.paged) .meldungen-archiv li:first-child:not(:last-child)::after { grid-row: auto; } /* 12 Spalten mit Lücken wären bei 320 px zu breit */ .meldungen .wp-block-post-excerpt__excerpt { hyphens: auto; overflow-wrap: break-word; } .fuss-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; width: 100%; } } /* Partner: 5 je Zeile, Telefon 3 */ @media (max-width: 900px) { .partner-reihe > .wp-block-image, .partner-reihe > .partner-paar { aspect-ratio: 5 / 2; } } @media (max-width: 600px) { .partner-reihe > .wp-block-image, .partner-reihe > .partner-paar { flex-basis: 33.333%; width: 33.333%; aspect-ratio: 2 / 1; } .partner-reihe .wp-block-image a { width: 100%; } } /* Telefon: das große Wort in zwei Zeilen, Tablet behält eine Zeile */ @media (max-width: 600px) { .ausbildung-karten { grid-template-columns: minmax(0, 1fr); } .mosaik { grid-template-columns: minmax(0, 1fr); gap: 18px; } .kachel { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; } .kachel img { aspect-ratio: 1; border-radius: 10px !important; } .kachel a { border-radius: 10px; } .kachel figcaption { margin: 0; } } /* Fuß bleibt unten, auch bei kurzen Seiten */ .wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; } .wp-site-blocks > main, .wp-site-blocks > .seite { flex: 1; } /* Überschriften ohne automatische Trennung („Deut-scher“), lange Wörter brechen nur im Notfall */ .wp-block-post-title, .seite-titel { hyphens: manual; overflow-wrap: break-word; } .meldungen-archiv .wp-block-post-title { font-size: var(--wp--preset--font-size--gross); line-height: 1.2; } .login .seite-titel { font-size: var(--wp--preset--font-size--titel); } /* ── Geräteprüfung 17.10.2026: Telefonmenü, Tippflächen, Zoom, Kontrastmodus, Kontakt ── */ /* Telefonmenü: Knopf mit dem Wort „Menü“ und 44 px Tippfläche; offenes Menü in den Farben der Seite, auch im Dunkelmodus */ .haupt .wp-block-navigation__responsive-container-open, .haupt .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: var(--fels); } .haupt .wp-block-navigation__responsive-container-open { gap: 6px; padding: 0 6px; font: inherit; font-size: 0.9375rem; font-weight: 600; } .haupt .wp-block-navigation__responsive-container-open::after { content: "Menü"; } .haupt .wp-block-navigation__responsive-container-close { top: 14px; right: var(--rand); } :root .haupt.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--eis); color: var(--fels); padding: 14px var(--rand) 32px; } .haupt .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 72px; align-items: stretch; } .haupt .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; align-items: stretch; } .haupt .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--nebel); } .haupt .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 14px 2px; font-size: 1.375rem; font-weight: 650; font-stretch: 108%; color: var(--fels); } .haupt .nav-login { display: none; } .haupt .wp-block-navigation__responsive-container.is-menu-open .nav-login { display: block; border-bottom: 0; margin-top: 20px; } .haupt .wp-block-navigation__responsive-container.is-menu-open .nav-login .wp-block-navigation-item__content { display: inline-block; width: auto; padding: 12px 20px; border: 1.5px solid var(--fels); border-radius: 10px; font-size: 1.0625rem; } @media (max-width: 400px) { .marke { gap: 10px; } .marke-name a { font-size: 1.25rem; } .kopf { gap: 8px; } } /* sehr schmale Telefone (320–374 px): nur das Abzeichen, damit Menü und Login Platz haben */ @media (max-width: 374px) { .marke-name { display: none; } } .marke .wp-block-image { flex: none; } @media (max-width: 900px) { .kopf-login .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; } } /* Fuß: Links mit ausreichender Tippfläche */ @media (max-width: 900px) { .fuss-nav { gap: 0 24px; } .fuss-nav a, .fuss-recht a { display: inline-block; padding-block: 11px; } .fuss-anschrift a { display: inline-block; padding-block: 10px; } .fuss .wp-block-social-links.fuss-sozial .wp-social-link a { padding: 13px; } } /* Anmeldung: 16 px in Feldern (iOS zoomt sonst hinein), deutlich sichtbare Rahmen, großes Häkchen */ .login-formular input[type=text], .login-formular input[type=password] { font-size: max(1rem, 16px); border-color: var(--schiefer); } .login-formular input[type=checkbox] { width: 22px; height: 22px; margin: 0 8px 0 0; accent-color: var(--tanne); } .login-formular .login-remember label { display: inline-flex; align-items: center; min-height: 44px; } /* Querformat am Telefon: Kopf nicht festhalten, er nähme ein Viertel der Höhe */ @media (orientation: landscape) and (max-height: 500px) { .wp-site-blocks > header.wp-block-template-part { position: static; } html { scroll-padding-top: 0; } } /* Druck und sehr große Vergrößerung: alles, was beim Hineinscrollen erscheint, steht sofort da */ @media print { .bewegt :is(.weg-werte p, .weg-schritt, .weg-route li, .orte-liste li, .weg-karte img, .weg-bild img) { opacity: 1 !important; transform: none !important; } .wp-site-blocks > header.wp-block-template-part { position: static; } } /* Windows-Kontrastmodus: Logos behalten ihre helle Fläche, Knöpfe und Marken ihren Rahmen */ @media (forced-colors: active) { .partner-flaeche, .partner-raster, .vb-logos, .koop, .vdg-logo img, .marke-abzeichen img, .fuss-marke img { forced-color-adjust: none; } .wp-element-button, .wp-block-button__link, .weg-marken li, .einblicke-knoepfe button, .sprung a, .haupt .wp-block-navigation__responsive-container-open { border: 1px solid ButtonText; } .weg-schritt-bild::after { display: none; } } /* Kontakt mit Formular (18.10.2026, Markus: „ein Formular, in das ich direkt schreiben kann“): links Mail, Post und Ausbildungsfragen, rechts das Formular auf weißer Fläche */ :root { --kf-rot: #B3261E; } @media (prefers-color-scheme: dark) { :root { --kf-rot: #FF8A80; } } /* Reihenfolge im Markup: Einleitung, Formular, Angaben (Tab-Folge und Telefon); am Laptop stellt das Raster das Formular rechts daneben */ .kontakt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "einleitung formular" "info formular"; column-gap: clamp(28px, 5vw, 80px); row-gap: 26px; align-items: start; } .kontakt-raster > *, .kontakt-info > *, .kontakt-angabe > * { margin: 0 !important; } .kontakt-raster > .kontakt-einleitung { grid-area: einleitung; } .kontakt-raster > .kf { grid-area: formular; } .kontakt-raster > .kontakt-info { grid-area: info; } .kontakt-info { display: flex; flex-direction: column; gap: 26px; } .kontakt-einleitung { max-width: 24em; } .kontakt-angabe { padding-top: 18px; border-top: 1px solid var(--nebel); } .kontakt-angabe .auf-nummer { margin-bottom: 6px !important; } .kontakt-angabe p:not(.auf-nummer) { color: var(--fels); line-height: 1.6; } .kontakt-angabe p a { color: var(--tanne); } p.kontakt-adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); line-height: 1.2 !important; font-weight: 650; font-stretch: 108%; letter-spacing: -0.01em; } .kontakt-adresse a { display: inline-block; padding-block: 9px; color: var(--fels) !important; text-decoration: underline; text-decoration-color: var(--tanne); text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-skip-ink: none; } .kontakt-adresse a:hover { color: var(--tanne) !important; } .kontakt-kopieren { min-width: 10.5em; min-height: 44px; padding: 0 16px; border: 1px solid var(--schiefer); border-radius: 10px; background: transparent; color: var(--fels); font: inherit; font-size: 0.9375rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; cursor: pointer; } .kontakt-kopieren:hover { border-color: var(--tanne); color: var(--tanne); } .kontakt-kopieren:focus-visible { outline: 3px solid var(--tanne); outline-offset: 2px; } .kontakt-status, .kf-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .einblicke-band:focus-visible { outline: 3px solid var(--tanne); outline-offset: 4px; } .kf { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3vw, 40px); background: var(--weiss); border-radius: var(--radius-gross); scroll-margin-top: 48px; } .kf > *, .kf-feld > * { margin: 0 !important; } .kf:focus { outline: none; } .fliesstext .kf h2 { margin: 0 !important; font-size: clamp(1.375rem, 2vw, 1.625rem); font-stretch: 108%; } .kf-sprung { position: absolute; top: 0; scroll-margin-top: 48px; } .kf-feld { display: flex; flex-direction: column; gap: 8px; } .kf label { font-size: 0.9375rem; font-weight: 600; color: var(--fels); } .kf :is(input[type=text], input[type=email], select, textarea) { box-sizing: border-box; width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: max(1rem, 16px); color: var(--fels); background-color: var(--eis); border: 1px solid var(--schiefer); border-radius: 10px; } .kf :is(input, select, textarea):focus { outline: 3px solid var(--tanne); outline-offset: 1px; border-color: var(--tanne); } .kf select { appearance: none; padding-right: 44px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 22px center, right 16px center; background-size: 6px 6px; background-repeat: no-repeat; } .kf textarea { min-height: 180px; resize: vertical; line-height: 1.5; } .kf-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .kf-hinweis { padding: 12px 16px; border-left: 3px solid var(--tanne); border-radius: 0 10px 10px 0; background: var(--eis); color: var(--schiefer); font-size: 0.9375rem; line-height: 1.5; } .kf-hinweis[hidden] { display: none; } .kf-hinweis a { color: var(--fels); } .kf-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .kf-ende { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .kf-senden { min-height: 50px; padding: 0 26px; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--weiss); background: var(--fels); border: 0; border-radius: 10px; cursor: pointer; } .kf-senden:hover { background: var(--tanne); } .kf-senden:focus-visible { outline: 3px solid var(--tanne); outline-offset: 3px; } .kf-senden[aria-disabled="true"] { opacity: .6; cursor: progress; } .kf p.kf-datenschutz { flex: 1 1 16em; color: var(--schiefer); font-size: 0.875rem; line-height: 1.5; } .kf-datenschutz a { color: var(--fels); } .kf-fehler { color: var(--kf-rot); font-size: 0.9375rem; font-weight: 600; hyphens: manual; } .kf .hat-fehler :is(input, select, textarea) { border: 2px solid var(--kf-rot); } .kf-zusammenfassung { padding: 14px 18px; border: 2px solid var(--kf-rot); border-radius: 10px; background: color-mix(in srgb, var(--kf-rot) 6%, transparent); } /* Wird nur per Skript fokussiert und als Alarm vorgelesen; der rote Rahmen genügt als Markierung */ .kf-zusammenfassung:focus { outline: none; } .kf-zusammenfassung p { margin: 0 0 6px !important; font-weight: 600; color: var(--fels); } .kf-zusammenfassung ul { margin: 0 !important; padding-left: 1.2em; } .kf-zusammenfassung a { color: var(--kf-rot); } .kf-fertig p:not(.auf-nummer) { color: var(--schiefer); line-height: 1.5; } .kf-neu a { display: inline-block; padding-block: 10px; font-weight: 650; color: var(--tanne); } /* Telefon und Tablet: einspaltig in Markup-Reihenfolge, also Einleitung, Formular, Mail und Post */ @media (max-width: 900px) { .kontakt-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "einleitung" "formular" "info"; } } @media (forced-colors: active) { .kf select { appearance: auto; background-image: none; padding-right: 14px; } } @media (max-width: 600px) { .kf-reihe { grid-template-columns: minmax(0, 1fr); } .kf-senden { width: 100%; } } /* Große Systemschrift am Telefon (Android/iOS 150 % und mehr): Kopf bricht um statt über den Rand zu laufen */ @media (max-width: 900px) { .kopf { flex-wrap: wrap; row-gap: 8px; } .kopf-login { margin-left: auto; } } /* Textlinks wie „Alle Aufgaben“ mit ausreichender Tippfläche */ .mehr-link a, .aktuelles-kurz .abschnitt-kopf p a { display: inline-block; padding-block: 12px; } /* ── Startseite aufgeräumt 17.10.2026: Aufmacher am Telefon, Abstände der verbliebenen Abschnitte ── */ @media (max-width: 600px) { /* Telefon: Bild oben, Text darunter auf dunkler Fläche, damit das Bild nicht hinter dem Text verschwindet */ .held-buehne { display: flex; flex-direction: column; min-height: 0; } .held-dias { position: relative; inset: auto; height: clamp(260px, 50vh, 480px); height: clamp(260px, 50svh, 480px); flex: none; } .held-dias::after { inset: 0 0 -2px; background: linear-gradient(to top, #182024 0%, rgba(24, 32, 36, 0) 34%); } .held-inhalt { padding: 4px 20px 24px; margin-top: -28px; } .held-wort { white-space: normal; font-size: clamp(2.125rem, 10vw, 2.625rem); line-height: 1.02; } .held-text { margin-top: 10px; } .held-themen { gap: 0 18px; margin-top: 12px; } .held-themen a { font-size: 0.9375rem; } .held-reigen.laeuft .held-themen { padding-bottom: 3.3em; } .held-reigen.laeuft .held-themen span { top: 46px; font-size: 0.875rem; } .held-knoepfe { margin-top: 18px; flex-direction: column; gap: 10px; } .held-knoepfe .wp-block-button { width: 100%; } .held-knoepfe .wp-block-button__link { width: 100%; } .held-steuer { top: 12px; right: 12px; bottom: auto; } .held-dia-grat img { object-position: 62% 50%; } .held-dia-fels img { object-position: 62% 50%; } .held-dia-ski img { object-position: 70% 50%; } .held-dia-eis img { object-position: 50% 50%; } .held-dia-rettung img { object-position: 50% 40%; } } @media (forced-colors: active) { .held-pause, .held-pfeil, .held-themen a::after { border: 1px solid ButtonText; } } @media (max-width: 900px) { :root { --kopf-h: 87px; } } /* ── Seite Über uns, aufgeräumt 17.10.2026: Auftakt mit Bild, danach jeder Abschnitt im selben Raster (links Überschrift, rechts Inhalt) ── */ .vu-auftakt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 72px); align-items: center; } .vu-auftakt > * { margin: 0 !important; } .vu-auftakt-text > * { margin: 0; } .vu-auftakt-text > * + * { margin-top: 1em; } .vu-auftakt-text h2 { margin-bottom: 4px; } .vu-auftakt-text p { max-width: 38em; } .vu-bild img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); } .vu-bild figcaption { margin: 10px 0 0; text-align: left; font-size: var(--wp--preset--font-size--klein); color: var(--schiefer); line-height: 1.45; } .vu-auftakt-bild img { aspect-ratio: 4 / 5; max-height: min(58vh, 520px); object-position: 50% 30%; } .fliesstext > .vu-teil { margin-top: clamp(36px, min(4.5vw, 7vh), 64px); padding-top: clamp(24px, 2.4vw, 32px); border-top: 1px solid var(--nebel); } .vu-teil { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 72px); align-items: start; } .vu-teil > *, .vu-kopf > * { margin: 0 !important; } .vu-kopf-bild { margin-top: 24px !important; } .vu-kopf-bild img { aspect-ratio: 4 / 5; max-height: 360px; object-position: 50% 35%; } .vu-inhalt > * { margin: 0 !important; } .vu-inhalt > * + * { margin-top: 1.25em !important; } .vu-inhalt p { max-width: 40em; } .vu-ziele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 44px); } .vu-ziele > * + * { margin-top: 0 !important; } .vu-ziel { padding: 18px 0; border-top: 1px solid var(--nebel); } .vu-ziel:nth-child(-n+2) { border-top: 0; padding-top: 0; } .vu-ziel > * { margin: 0 !important; } .vu-ziel h3 { margin-bottom: 6px !important; font-size: var(--wp--preset--font-size--gross); font-stretch: 108%; } .vu-ziel p { color: var(--schiefer); font-size: 0.9375rem; line-height: 1.5; } .vu-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em clamp(24px, 3vw, 44px); } .vu-spalten > * { margin: 0 !important; } .vu-breit img { aspect-ratio: 2.4 / 1; object-position: 50% 30%; } .vu-zwischen { margin-top: 40px !important; font-size: var(--wp--preset--font-size--gross); } .vu-inhalt .vu-zwischen + * { margin-top: 14px !important; } .vu-chronik { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vu-chronik img[src*="holzsteg"] { object-position: 50% 25%; } .vu-inhalt .vb-logos img { height: 58px; } @media (max-width: 900px) { .vu-auftakt, .vu-teil { grid-template-columns: minmax(0, 1fr); } .vu-auftakt-bild { order: -1; } .vu-auftakt-bild img, .vu-kopf-bild img { aspect-ratio: 16 / 9; max-height: none; } .vu-kopf-bild { margin-top: 16px !important; } .vu-chronik { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .vu-ziele, .vu-spalten { grid-template-columns: minmax(0, 1fr); } .vu-ziel:nth-child(2) { border-top: 1px solid var(--nebel); padding-top: 18px; } } /* Kooperationspartner VDBS und VdPBS auf Über uns, 17.10.2026: Logo, darunter der Name. Feste Schriftfarben, die Kachel bleibt hell */ .koop > * { margin-block: 0 !important; } .vu-inhalt .koop { background: var(--logo-grund); border-radius: var(--radius); padding: clamp(18px, 2.2vw, 28px) clamp(14px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px); text-align: center; } .koop .partner-gruppe-titel { text-align: center; } .koop-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(16px, 3vw, 40px); margin-top: 18px !important; } .koop-reihe > figure { margin: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .koop-reihe a { display: block; transition: opacity 200ms ease; } .koop-reihe a:hover { opacity: .75; } @media (min-width: 601px) { .vu-inhalt .vb-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* nach dem Herausnehmen der Kooperationspartner nur noch 4 Verbindungen */ .koop-reihe img { width: 128px; height: 128px; object-fit: contain; border-radius: 0 !important; display: block; margin-inline: auto; } .koop-reihe figcaption { margin: 0; max-width: 15em; font-size: 0.9375rem; line-height: 1.35; font-weight: 600; color: #182024; text-align: center; text-wrap: balance; } @media (max-width: 600px) { .koop-reihe { gap: 16px 12px; } .koop-reihe img { width: 88px; height: 88px; } .koop-reihe figcaption { font-size: 0.8125rem; } } /* ── Partner im Fuß der Startseite (Markus 18.10.2026, Variante C; einfarbig nach MOUN2-Vorbild): dunkel wie der Fuß, Logos weiß ohne Kacheln ── */ .partner-fuss { background: var(--dunkel-verlauf); color: #C7D2D6; margin-block: 0 !important; padding: clamp(40px, min(5vw, 7vh), 64px) var(--wp--style--root--padding-right, 24px) 0; } main.start + footer .fuss { margin-top: 0; } .partner-fuss-innen { max-width: 1200px; margin-inline: auto; padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, .12); } .partner-fuss-innen > * { margin-block: 0 !important; } /* Gesamttitel nur für Bildschirmleser, sichtbar sind die Gruppentitel mit Linien links und rechts */ .partner-fuss-titel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .partner-fuss .partner-gruppe-titel { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); margin: 0 !important; font-size: 0.8125rem; font-weight: 600; font-stretch: 100%; letter-spacing: .18em; text-transform: uppercase; color: #C7D2D6; } .partner-fuss .partner-gruppe-titel::before, .partner-fuss .partner-gruppe-titel::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .22); } .partner-fuss-gruppe { display: block; } .partner-fuss-gruppe + .partner-fuss-gruppe { margin-top: clamp(36px, 4.5vw, 52px) !important; } .partner-fuss-gruppe > * { margin: 0 !important; } /* Feste Spalten, damit keine Einzellogos in der letzten Reihe stehen: 16 Partner = 8 × 2 bzw. 4 × 4, 4 Unterstützer = 4 × 1 bzw. 2 × 2 */ .partner-fuss .partner-raster { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); justify-items: center; align-items: center; gap: clamp(22px, 3vw, 36px) clamp(16px, 2.4vw, 32px); background: none; padding: 0; margin-top: clamp(24px, 3vw, 36px) !important; } .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster { grid-template-columns: repeat(4, minmax(0, 168px)); justify-content: center; } @media (max-width: 1099px) { .partner-fuss .partner-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .partner-fuss .partner-raster > .wp-block-image { height: 48px; display: flex; align-items: center; justify-content: center; } .partner-fuss .partner-raster a { width: auto; height: auto; border-radius: 4px; } .partner-fuss .partner-raster a:hover { opacity: 1; } /* Alle Herstellerlogos als weiße Fläche; die Ladenlogos haben eigene helle Dateien (-hell.png) */ .partner-fuss .partner-raster img { display: block; height: 24px; width: auto; max-width: min(136px, 100%); filter: brightness(0) invert(1); opacity: .78; transition: opacity 200ms ease; } .partner-fuss .partner-raster .logo-hoch img { height: 36px; } .partner-fuss .partner-raster img[src*="faction"] { height: 21px; } .partner-fuss .partner-raster img[src*="-hell"] { filter: none; } @media (max-width: 1099px) { .partner-fuss .partner-raster img { max-width: min(116px, 100%); } } /* Tablet: breite Wortmarken nicht größer als am Laptop */ .partner-fuss .partner-raster a:hover img, .partner-fuss .partner-raster a:focus-visible img { opacity: 1; } .partner-fuss .partner-raster a:focus-visible { outline: 2px solid #8FD1B5; outline-offset: 6px; } /* Unterstützer eine Stufe leiser */ .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster img { height: 30px; opacity: .62; } .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster .logo-hoch img { height: 40px; } @media (max-width: 600px) { .partner-fuss .partner-raster { gap: 24px 18px; } .partner-fuss .partner-raster > .wp-block-image { height: 40px; } .partner-fuss .partner-raster img { height: 17px; max-width: min(78px, 100%); } .partner-fuss .partner-raster .logo-hoch img { height: 28px; } .partner-fuss .partner-raster img[src*="faction"] { height: 15px; } .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster img { height: 26px; } .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster .logo-hoch img { height: 36px; } } @media (forced-colors: active) { .partner-fuss .partner-raster img { filter: none; opacity: 1; background: #FFFFFF; padding: 4px; } } /* Start: Partner als langsam laufendes Band in einer Zeile (theme.js, Klasse .partner-lauf), Unterstützer als feste Reihe darunter (Markus 18.10.2026: Partnerlogos nahmen zu viel Platz). Ohne Skript oder bei reduzierter Bewegung bleibt das Raster oben. */ .partner-fuss .partner-raster.laeuft { display: block; justify-items: normal; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .partner-fuss .partner-raster.laeuft .partner-spur > .wp-block-image { width: 176px; height: 48px; } .partner-fuss-gruppe { position: relative; } .partner-fuss-gruppe:has(.partner-halt) .partner-gruppe-titel { padding-inline: 56px; } .partner-halt { position: absolute; top: -12px; right: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; } .partner-halt::before { content: ""; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3v14H7zM14 5h3v14h-3z' fill='%23C7D2D6'/%3E%3C/svg%3E") center / 14px no-repeat; transition: border-color 200ms ease; } .partner-halt.steht::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23C7D2D6'/%3E%3C/svg%3E"); } .partner-halt:hover::before { border-color: #8FD1B5; } .partner-halt:focus-visible { outline: none; } .partner-halt:focus-visible::before { outline: 2px solid #8FD1B5; outline-offset: 2px; } @media print { .partner-spur { transform: none !important; } .partner-halt { display: none; } } @media (max-width: 600px) { .partner-fuss .partner-raster.laeuft .partner-spur > .wp-block-image { width: 120px; height: 40px; } .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; } .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster img { height: 22px; max-width: 100%; } .partner-fuss-gruppe + .partner-fuss-gruppe .partner-raster .logo-hoch img { height: 30px; } } /* ── Über uns neu (Markus 18.10.2026: „muss deutlich besser werden“): großer Auftakt mit dem Abzeichen, Ziele nummeriert, Gruppenbild über die volle Breite ── */ /* Markus 18.10. abends: „Bild viel zu groß, die Überschrift hängt oben drauf“. Seitentitel als kleine Zeile über der einen großen Überschrift, Text oben bündig mit dem Bild, Abzeichen im Querformat */ .seite:has(.vu-auftakt) .seite-titel { margin-bottom: 12px; font-size: 0.8125rem; font-weight: 600; font-stretch: 100%; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--tanne); } .vu-auftakt { align-items: start; } .vu-auftakt-text h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 6px !important; text-wrap: balance; } .vu-auftakt-text .vb-einleitung { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.55; color: var(--fels); } .vu-auftakt-text p:not(.vb-einleitung) { color: var(--schiefer); line-height: 1.6; } .vu-auftakt-bild img[src*="verband-abzeichen"] { aspect-ratio: 4 / 3; max-height: min(52vh, 400px); object-position: 50% 55%; } @media (max-width: 900px) { .vu-auftakt-bild { order: 0; } .vu-kopf-bild img[src*="verband-fahne"] { object-position: 50% 75%; } } /* Fahnenträger: Gesichter nicht anschneiden (Sonnet R1) */ /* Telefon: kleine Zeile und Überschrift zusammen, Bild darunter */ .vu-ziele { counter-reset: ziel; } .vu-ziel { counter-increment: ziel; } .vu-ziel h3::before { content: counter(ziel, decimal-leading-zero); display: block; margin-bottom: 6px; font-size: 0.8125rem; font-weight: 600; letter-spacing: .14em; color: var(--tanne); font-variant-numeric: tabular-nums; } .vu-teil > .vu-ganz { grid-column: 1 / -1; margin-top: clamp(8px, 1vw, 16px) !important; } .vu-ganz img { aspect-ratio: 21 / 9; object-position: 50% 45%; } @media (max-width: 900px) { .vu-auftakt { align-items: start; } .vu-auftakt-bild img[src*="verband-abzeichen"] { aspect-ratio: 4 / 3; object-position: 50% 52%; } .vu-ganz img { aspect-ratio: 3 / 2; } } /* ── Ausbildung: der Weg als fünf Etappen (Ideensichtung 18.10.2026, Vorschlag 1; Vorbild Forma/Kamm Trek). theme.js baut die Leiste und setzt .wechselt; ohne Skript und am Telefon stehen alle Etappen untereinander. Alle Etappen liegen im selben Rasterfeld, damit die Höhe beim Wechsel nicht springt ── */ .weg-intro .vb-einleitung { max-width: 44em; } .weg-etappen { counter-reset: etappe; margin-top: clamp(28px, 3.4vw, 44px) !important; } .weg-etappen > * { margin: 0 !important; } .weg-etappe { counter-increment: etappe; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-auto-rows: min-content; align-content: start; column-gap: clamp(28px, 4vw, 56px); } .weg-etappe + .weg-etappe { margin-top: clamp(32px, 4vw, 48px) !important; } .weg-etappe > * { grid-column: 1; margin: 0 !important; } .weg-etappe > .weg-etappe-bild { grid-column: 2; grid-row: 1 / span 6; } .weg-etappe-bild img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--radius); } .weg-etappe-bild img[src*="etappe-sommer"] { object-position: 50% 15%; } /* Helm bleibt im Bild */ .weg-etappe h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.15; } .weg-etappe h3::before { content: counter(etappe, decimal-leading-zero); display: block; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: .14em; color: var(--tanne); font-variant-numeric: tabular-nums; } .weg-etappe h3 + * { margin-top: 14px !important; } .weg-etappe > p { color: var(--schiefer); line-height: 1.55; max-width: 32em; } .weg-etappe > p + .weg-liste { margin-top: 18px !important; } .weg-liste { list-style: none; padding: 0; border-top: 1px solid var(--nebel); } .weg-liste li { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--nebel); color: var(--schiefer); line-height: 1.4; } .weg-liste strong { color: var(--fels); font-weight: 700; margin-right: 4px; } .weg-liste.zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5em, 1fr)); column-gap: 24px; } /* zu schmal für zwei Spalten: einspaltig */ .weg-liste.zweispaltig li { color: var(--fels); font-weight: 550; } /* Leiste mit den Etappen */ .weg-etappen-leiste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(8px, 1.2vw, 16px); margin-bottom: clamp(24px, 3vw, 36px) !important; } .weg-etappen-leiste button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 14px 0 6px; border: 0; border-top: 2px solid var(--nebel); background: none; font: inherit; font-size: 0.9375rem; font-weight: 600; text-align: left; color: var(--schiefer); cursor: pointer; transition: color 200ms ease, border-color 300ms ease; } .weg-etappen-leiste button:hover { color: var(--fels); } .weg-etappen-leiste button.erledigt { border-top-color: color-mix(in srgb, var(--tanne) 45%, var(--nebel)); } .weg-etappen-leiste button[aria-selected="true"] { border-top-color: var(--tanne); color: var(--fels); } .weg-etappen-leiste button:focus-visible { outline: 2px solid var(--tanne); outline-offset: 4px; border-radius: 2px; } .weg-etappen-nr { font-size: 0.8125rem; letter-spacing: .14em; color: var(--tanne); font-variant-numeric: tabular-nums; } @media (min-width: 901px) { .weg-etappen.wechselt { display: grid; grid-template-columns: minmax(0, 1fr); } .weg-etappen.wechselt > .weg-etappe { grid-area: 2 / 1; margin: 0 !important; visibility: hidden; opacity: 0; transition: opacity 350ms ease, visibility 0s linear 350ms; } .weg-etappen.wechselt > .weg-etappe.aktiv { visibility: visible; opacity: 1; transition: opacity 350ms ease; } .weg-etappen.wechselt .weg-etappe h3::before { display: none; } /* Nummer steht in der Leiste */ } @media (max-width: 900px) { .weg-etappen-leiste { display: none; } .weg-etappe { grid-template-columns: minmax(0, 1fr); } .weg-etappe > .weg-etappe-bild { grid-column: 1; grid-row: 1; margin-bottom: 18px !important; } .weg-etappe-bild { max-width: 520px; } /* Tablet: Foto nicht über die volle Breite, sonst wird die Seite sehr lang */ } @media (prefers-reduced-motion: reduce) { .weg-etappen.wechselt > .weg-etappe { transition: none !important; } } /* ── Eine Kante für alles (Ideensichtung 18.10.2026, Vorschlag 2): Kopf und Aufmachertext stehen ab 1296 px an der Inhaltskante (1200 px Inhalt mittig) wie Leitsatz, Partner, Fuß und Seiteninhalt. % bezieht sich jeweils auf die volle Breite des Elternteils ── */ .kopf { padding-inline: max(var(--rand), calc((100% - 1200px) / 2)); } .held-inhalt { padding-inline: max(var(--rand), calc((100% - 1200px) / 2)) var(--rand); max-width: calc(760px + max(var(--rand), calc((100% - 1200px) / 2))); } .held-steuer { right: max(var(--rand), calc((100% - 1200px) / 2)); } @media (max-width: 600px) { .held-inhalt { padding: 4px var(--rand) 24px; max-width: none; } } /* Tippflächen auf Touchgeräten (iPad quer, Zielgruppenprüfung): Kopf- und Fußlinks mindestens 44 px hoch, Schrift und Abstände bleiben gleich. Im Fuß vergrößert eine unsichtbare Fläche (::after) den Link, damit der Fuß nicht höher wird; ab 900 px abwärts gilt die eigene Regel weiter unten */ @media (pointer: coarse) { .haupt .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; } .fuss .wp-block-social-links.fuss-sozial .wp-social-link a { padding: 13px; } } /* Weitere Tippflächen (Bildprüfung Etappen S3): unsichtbare Fläche, immer 44 px hoch, ohne das Layout zu verschieben */ @media (pointer: coarse) { .leitsatz-link a, .partner-fuss .partner-raster a, .doku-gesamt a, .fuss-recht a { position: relative; } .leitsatz-link a::after, .partner-fuss .partner-raster a::after, .doku-gesamt a::after, .fuss-recht a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); } } @media (pointer: coarse) and (min-width: 901px) { .fuss-nav a, .fuss-recht a, .fuss-anschrift a { position: relative; } .fuss-nav a::after, .fuss-recht a::after, .fuss-anschrift a::after { content: ""; position: absolute; inset: -15px -8px; } } /* ── Startseite: Leitsatz zwischen Aufmacher und Partnern (Markus 18.10.2026), helles Band für Luft und Rhythmus dunkel – hell – dunkel ── */ .leitsatz { background: var(--eis); margin-block: 0 !important; padding: clamp(48px, min(7vw, 10vh), 96px) var(--rand); } .leitsatz-innen { max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px clamp(24px, 4vw, 56px); align-items: start; } .leitsatz-innen > *, .leitsatz-text > * { margin-block: 0 !important; } .leitsatz-marke { padding-top: 10px; border-top: 2px solid var(--tanne); width: fit-content; font-size: 0.8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--schiefer); } .leitsatz-satz { max-width: 30em; font-size: clamp(1.375rem, 2.2vw, 2rem); font-weight: 650; font-stretch: 104%; letter-spacing: -0.01em; line-height: 1.28; color: var(--fels); text-wrap: balance; } .leitsatz-zusatz { margin-top: clamp(14px, 1.6vw, 20px) !important; max-width: 40em; font-size: var(--wp--preset--font-size--gross); line-height: 1.55; color: var(--schiefer); text-wrap: pretty; } .leitsatz-link { margin-top: clamp(14px, 1.6vw, 20px) !important; } .leitsatz-link a { display: inline-block; padding-block: 10px; font-weight: 600; color: var(--tanne); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; } .leitsatz-link a:hover { color: var(--fels); } @media (max-width: 900px) { .leitsatz-innen { grid-template-columns: minmax(0, 1fr); gap: 18px; } } /* ── Startseite: Kopf liegt durchsichtig auf dem Aufmacher (Markus 18.10.2026, Vorbild wetterstein-bergfuehrer.de), ab dem ersten Scrollen wieder hell (theme.js setzt kopf-fest). Ohne Skript bleibt er durchsichtig, darunter folgen auf der Startseite nur dunkle Flächen ── */ body.home main.start { margin-top: calc(-1 * var(--kopf-ist, var(--kopf-h))) !important; } body.home .held-buehne { min-height: max(520px, 100vh); min-height: max(520px, 100svh); } body.home .kopf { transition: box-shadow 300ms ease; } body.home .kopf::before { transition: opacity 300ms ease; } html:not(.kopf-fest) body.home .kopf { box-shadow: none; } /* Gescrollt: stärker verwischt, damit das Foto nicht als Fleck durch den hellen Kopf scheint */ html.kopf-fest body.home .kopf::before { -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1); } html.kopf-fest body.home .kopf::before { background: rgba(237, 241, 242, .98); } @media (prefers-color-scheme: dark) { html.kopf-fest body.home .kopf::before { background: rgba(18, 25, 28, .98); } } html:not(.kopf-fest) body.home .kopf::before { background: linear-gradient(to bottom, rgba(12, 17, 20, .62) 0%, rgba(12, 17, 20, .28) 60%, rgba(12, 17, 20, 0) 100%); -webkit-backdrop-filter: none; backdrop-filter: none; } html:not(.kopf-fest) body.home .marke-name a { color: #FFFFFF; } html:not(.kopf-fest) body.home .marke-name span { color: rgba(255, 255, 255, .82); } html:not(.kopf-fest) body.home .marke-abzeichen img { background: #F4F6F7; padding: 4px 5px; border-radius: 12px; } html:not(.kopf-fest) body.home .haupt .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { color: #FFFFFF; } html:not(.kopf-fest) body.home .haupt .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover { color: #BFE8D6; } html:not(.kopf-fest) body.home .haupt .wp-block-navigation__responsive-container-open { color: #FFFFFF; } html:not(.kopf-fest) body.home .kopf-login .wp-block-button__link { border-color: rgba(255, 255, 255, .9); color: #FFFFFF; } html:not(.kopf-fest) body.home .kopf-login .wp-block-button__link:hover { background: #FFFFFF; color: #182024; } html:not(.kopf-fest) body.home .kopf a:focus-visible { outline-color: #FFFFFF; } @media (max-width: 600px) { /* Telefon: Bildfläche um die Kopfhöhe länger, Anhalten-Knopf unter den Kopf; das gezoomte Bild bleibt in seiner Fläche */ body.home .held-buehne { min-height: 0; } body.home .held-dias { overflow: hidden; height: calc(clamp(260px, 50vh, 480px) + var(--kopf-ist, var(--kopf-h))); height: calc(clamp(260px, 50svh, 480px) + var(--kopf-ist, var(--kopf-h))); } body.home .held-steuer { top: calc(var(--kopf-ist, var(--kopf-h)) + 8px); right: var(--rand); bottom: auto; } body.home .held-pause, body.home .held-pfeil { background: rgba(12, 17, 20, .55); } } /* ── Über uns, Verbindungen ruhiger (Markus 18.10.2026: „zu überladen, im Dunkelmodus durch den weißen Hintergrund zu hell“) ── Keine großen hellen Flächen mehr: Siegel der Kooperationspartner frei auf dem Seitengrund (sie sind rund und freigestellt), die übrigen Logos auf kleinen hellen Kacheln neben dem Namen. */ .vu-inhalt .koop { background: none; border-radius: 0; padding: 24px 0 0; border-top: 1px solid var(--nebel); text-align: left; } .vu-inhalt .koop .partner-gruppe-titel, .vu-verbindungen-titel { text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: .14em; color: var(--schiefer); } .vu-inhalt .koop-reihe { margin-top: 16px !important; justify-items: start; grid-template-columns: repeat(2, minmax(0, 15em)); } .vu-inhalt .koop-reihe img { width: 104px; height: 104px; } .vu-inhalt .koop-reihe figcaption { color: var(--fels); font-size: 0.9375rem; } .vu-inhalt .vb-logos { background: none; padding: 0; border-radius: 0; gap: 12px 24px; margin-top: 14px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .vu-inhalt .vb-logos > figure { flex-direction: row; align-items: center; gap: 14px; padding: 0; text-align: left; } .vu-inhalt .vb-logos img { width: 104px; height: 52px; padding: 7px 10px; box-sizing: border-box; object-fit: contain; background: #F4F6F7; border-radius: 10px !important; margin: 0; } .vu-inhalt .vb-logos a { flex: none; } .vu-inhalt .vb-logos figcaption { margin: 0; font-size: 0.9375rem; line-height: 1.35; color: var(--fels); } @media (max-width: 600px) { .vu-inhalt .vb-logos { grid-template-columns: minmax(0, 1fr) !important; } .vu-inhalt .koop-reihe img { width: 84px; height: 84px; } .vu-inhalt .koop-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Befunde Opus 18.10.2026: Holzsteg-Hochformat nicht köpfen, kleine Archivbilder nicht hochrechnen, Abzeichen am Tablet kleiner, VdG-Logo auf gerundeter Kachel */ .vu-inhalt .vdg-logo img { background: #F4F6F7; padding: 8px 12px; border-radius: 10px !important; box-sizing: border-box; } @media (max-width: 600px) { .vu-inhalt .verband-vdg .vdg-logo img { width: 128px !important; } } /* Verbindungen mit mehr Luft (Markus 18.10.2026: „etwas aufteilen, die stehen zu eng“): drei Teile mit Abstand und Trennlinie */ .vu-inhalt .verband-vdg { padding-bottom: clamp(28px, 3vw, 40px); } .vu-inhalt .koop { padding-top: clamp(28px, 3vw, 40px); padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--nebel); margin-top: 0 !important; } .vu-inhalt .koop + p { margin-top: clamp(28px, 3vw, 40px) !important; } .vu-inhalt .koop-reihe { margin-top: 22px !important; gap: 28px clamp(24px, 4vw, 56px); } .vu-inhalt .vb-logos { margin-top: 22px !important; gap: 18px 32px; } /* ── Fragen zur Ausbildung (Markus 18.10.2026: Vorschlag 5, Text aus Parallelsitzung a1, Opus 1,7) ── */ /* Fragen zur Ausbildung: Core-Block „Details“, Nummern per CSS-Zähler (Redaktion pflegt nur Frage und Antwort) */ .fragen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px clamp(32px, 5vw, 80px); } @media (min-width: 900px) { .fragen { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } .fragen-kopf { position: sticky; top: calc(var(--kopf-h) + 24px); } } .fragen > * { margin-block: 0 !important; } .fragen-kopf h2 { margin: 0 0 12px !important; } .fragen-hinweis { margin: 0; color: var(--schiefer); } .fragen-hinweis a { color: var(--tanne); font-weight: 600; } .fragen-liste { counter-reset: frage; border-top: 1px solid var(--nebel); } .fragen-liste > .wp-block-details { counter-increment: frage; margin: 0 !important; border-bottom: 1px solid var(--nebel); } .fragen-liste summary { list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 12px; align-items: center; box-sizing: border-box; min-height: 44px; padding: 16px 0; cursor: pointer; font-size: var(--wp--preset--font-size--gross); font-weight: 600; line-height: 1.35; text-wrap: balance; color: var(--fels); } .fragen-liste summary::-webkit-details-marker { display: none; } .fragen-liste summary::before { content: counter(frage, decimal-leading-zero); font-size: var(--wp--preset--font-size--klein); font-weight: 700; letter-spacing: .08em; color: var(--tanne); } /* Zeichen nur fürs Auge: der Zustand kommt über „expanded“, Bildschirmleser sollen „plus“ nicht vorlesen; ältere Browser nehmen die erste Zeile */ .fragen-liste summary::after { content: "+"; content: "+" / ""; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--nebel); box-sizing: border-box; border-radius: 4px; font-size: 18px; font-weight: 400; line-height: 1; color: var(--fels); } .fragen-liste details[open] > summary::after { content: "\2212"; content: "\2212" / ""; } @media (hover: hover) { .fragen-liste summary:hover { color: var(--tanne); } } .fragen-liste summary:focus-visible { outline: 3px solid var(--tanne); outline-offset: 2px; border-radius: 4px; } .fragen-liste details > :not(summary) { margin: 0 40px 12px 56px; max-width: 38em; line-height: 1.6; color: var(--schiefer); } .fragen-liste details > :last-child:not(summary) { margin-bottom: 22px; } .fragen-liste details a { color: var(--tanne); } @media (max-width: 599px) { .fragen-liste summary { grid-template-columns: 32px minmax(0, 1fr) 28px; } .fragen-liste details > :not(summary) { margin-left: 44px; margin-right: 0; } } /* ── Ausbildung: Lehrgangskarte (Markus 18.10.2026: „aktuelle Daten übernehmen, dynamisch attraktiv“, Quelle Lehrgangsplan 2025) ── Links die Karte (karte_lehrgang.js, Inline-SVG), rechts Reiter Sommer/Winter und die Module. Nummern laufen über beide Teile wie auf der Karte, Mittenwald als Raute. --k (Reihenfolge im Teil) setzt karte_lehrgang.js. Ohne Skript stehen beide Listen untereinander und die Karte zeigt alles. */ :root { --lk-meer: #E3EAED; --lk-land: #F5F7F8; --lk-grenze: #C9D3D7; --lk-land-aktiv: #FFFFFF; --lk-grenze-aktiv: #9DAEB5; --lk-landname: #66757C; --lk-ring: #FFFFFF; --lk-nr: #FFFFFF; --lk-aus: #A9B7BD; } @media (prefers-color-scheme: dark) { :root:root { --lk-meer: #0E1417; --lk-land: #1F292D; --lk-grenze: #33424A; --lk-land-aktiv: #26333A; --lk-grenze-aktiv: #4A5D66; --lk-landname: #8FA1A8; --lk-ring: #12191C; --lk-nr: #0A0F11; --lk-aus: #4A5D66; } } .lehrgang { counter-reset: lg-ort; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "karte kopf" "karte teile"; grid-template-rows: auto 1fr; gap: 0 clamp(28px, 4vw, 56px); margin-top: clamp(28px, 3vw, 40px) !important; padding-top: 22px; border-top: 1px solid var(--nebel); } .lehrgang > * { margin: 0 !important; } .lehrgang-kopf { grid-area: kopf; } .lehrgang-kopf h3 { margin: 0 0 8px !important; font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-stretch: 110%; } .lehrgang-hinweis { margin: 0 !important; color: var(--schiefer); font-size: var(--wp--preset--font-size--klein); line-height: 1.5; } .lehrgang-karte { grid-area: karte; align-self: start; margin: 0; } @media (min-width: 901px) { .lehrgang-karte { position: sticky; top: calc(var(--kopf-h) + 24px); } } .lehrgang-teile { grid-area: teile; margin-top: 18px !important; } .lehrgang-teil + .lehrgang-teil { margin-top: 28px !important; } .lehrgang-teil > * { margin: 0 !important; } .lehrgang-teil h4 { font-size: 1.0625rem; font-weight: 700; font-stretch: 108%; } .lehrgang-umfang { margin-top: 2px !important; color: var(--schiefer); font-size: var(--wp--preset--font-size--klein); } .lehrgang-liste { list-style: none; padding: 0; margin-top: 10px !important; border-top: 1px solid var(--nebel); } .lehrgang-liste li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "marke gebiet" "marke modul"; column-gap: 12px; margin: 0; padding: 10px 6px 11px 0; border-bottom: 1px solid var(--nebel); transition: background-color 200ms ease; } .lehrgang-liste li::before { grid-area: marke; align-self: start; margin-top: 1px; display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; } .lehrgang-liste li.auf-karte { counter-increment: lg-ort; } #lehrgang-winter .lehrgang-liste { counter-reset: lg-ort 5; } .lehrgang-liste li.auf-karte.gleich { counter-increment: none; } /* zweites Modul am selben Ort: gleiche Nummer */ /* Winter zählt ab 6 weiter wie auf der Karte, auch wenn die Sommerliste ausgeblendet ist */ .lehrgang-liste li.auf-karte::before { content: counter(lg-ort); border-radius: 50%; background: var(--tanne); color: var(--weiss); } .lehrgang-liste li.am-standort::before { content: ""; width: 12px; height: 12px; margin: 8px 0 0 7px; transform: rotate(45deg); background: var(--fels); } .lehrgang-liste li.ohne-ort::before { content: ""; width: 14px; height: 14px; margin: 6px 0 0 6px; border: 2px solid var(--lk-aus); border-radius: 50%; } .lg-gebiet { grid-area: gebiet; font-weight: 650; font-stretch: 108%; color: var(--fels); } .lg-modul { grid-area: modul; color: var(--schiefer); font-size: var(--wp--preset--font-size--klein); line-height: 1.45; } .lg-modul strong { color: var(--fels); font-weight: 600; } .lehrgang-liste li.hervor { background: color-mix(in srgb, var(--tanne) 9%, transparent); } /* Reiter Sommer/Winter (theme.js), Gestaltung wie die Leiste der Etappen */ .lehrgang-leiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .lehrgang-leiste button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 12px 0 6px; border: 0; border-top: 2px solid var(--nebel); background: none; font: inherit; font-size: 1rem; font-weight: 650; text-align: left; color: var(--schiefer); cursor: pointer; transition: color 200ms ease, border-color 200ms ease; } .lehrgang-leiste button span { font-size: var(--wp--preset--font-size--klein); font-weight: 400; color: var(--schiefer); } .lehrgang-leiste button:hover { color: var(--fels); } .lehrgang-leiste button[aria-selected="true"] { border-top-color: var(--tanne); color: var(--fels); } .lehrgang-leiste button:focus-visible { outline: 2px solid var(--tanne); outline-offset: 4px; border-radius: 2px; } .lehrgang-teile.wechselt .lehrgang-teil { display: none; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv { display: block; margin-top: 14px !important; } .lehrgang-teile.wechselt .lehrgang-teil h4 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* steht im Reiter */ .lehrgang-teile.wechselt .lehrgang-umfang { display: none; } /* Karte */ .lk { display: block; width: 100%; height: auto; border-radius: var(--radius); } .lk-meer { fill: var(--lk-meer); } .lk-land { fill: var(--lk-land); stroke: var(--lk-grenze); stroke-width: .8; } .lk-land.aktiv { fill: var(--lk-land-aktiv); stroke: var(--lk-grenze-aktiv); stroke-width: 1; } .lk-landname { font: 600 14px Archivo, Helvetica, Arial, sans-serif; letter-spacing: .12em; fill: var(--lk-landname); text-anchor: middle; } .lk-strahl { fill: none; stroke: var(--tanne); stroke-width: 1.6; stroke-linecap: round; opacity: .6; stroke-dasharray: 1; stroke-dashoffset: 0; } .lk-ort circle { fill: var(--tanne); stroke: var(--lk-ring); stroke-width: 2.5; } .lk-ort circle, .lk-nr { transform-box: fill-box; transform-origin: center; } .lk-nr { font: 700 13px Archivo, Helvetica, Arial, sans-serif; fill: var(--lk-nr); text-anchor: middle; transition: opacity 300ms ease; } .lk-name { font: 650 17px Archivo, Helvetica, Arial, sans-serif; fill: var(--fels); paint-order: stroke; stroke: var(--lk-ring); stroke-width: 4px; stroke-linejoin: round; transition: opacity 300ms ease; } .lk-name.klein { font-size: 14px; font-weight: 600; fill: var(--schiefer); } .lk-raute { fill: var(--fels); stroke: var(--lk-ring); stroke-width: 2; } .lk-ort { cursor: default; } .lk-ort circle { transition: fill 300ms ease, transform 300ms ease; } /* Der andere Teil tritt zurück: grauer, kleiner Punkt ohne Namen und ohne Linie; ein Klick darauf wechselt den Teil */ .lk[data-aktiv="sommer"] .lk-ort[data-teil="winter"], .lk[data-aktiv="winter"] .lk-ort[data-teil="sommer"] { cursor: pointer; } .lk[data-aktiv="sommer"] [data-teil="winter"] circle, .lk[data-aktiv="winter"] [data-teil="sommer"] circle { fill: var(--lk-aus); transform: scale(.72); } .lk[data-aktiv="sommer"] [data-teil="winter"] :is(.lk-name, .lk-nr), .lk[data-aktiv="winter"] [data-teil="sommer"] :is(.lk-name, .lk-nr) { opacity: 0; } /* graue Punkte nur als Wegweiser, ohne Zahl */ .lk[data-aktiv="sommer"] .lk-strahl[data-teil="winter"], .lk[data-aktiv="winter"] .lk-strahl[data-teil="sommer"] { opacity: 0; } .lk-ort.hervor circle { transform: scale(1.25); } .lk-strahl.hervor { opacity: 1; stroke-width: 2.4; } /* Bewegung: beim ersten Sichtbarwerden und bei jedem Wechsel ziehen die Linien von Mittenwald aus der Reihe nach, die Punkte springen auf */ @media (prefers-reduced-motion: no-preference) { .lk.lk-bereit:not(.zeichnen) .lk-strahl { stroke-dashoffset: 1; transition: none; } .lk.lk-bereit:not(.zeichnen) .lk-ort, .lk.lk-bereit:not(.zeichnen):not(.wieder) .lk-standort { opacity: 0; } /* .wieder (theme.js): Mittenwald bleibt beim Wechsel stehen */ .lk.zeichnen .lk-strahl { transition: stroke-dashoffset 900ms cubic-bezier(.3, .7, .2, 1) calc(var(--k) * 110ms), opacity 300ms ease, stroke-width 200ms ease; } .lk.zeichnen:not(.wieder) .lk-standort { animation: lk-auf 300ms ease both; } .lk[data-aktiv="sommer"].zeichnen .lk-ort[data-teil="sommer"] :is(circle, .lk-nr), .lk[data-aktiv="winter"].zeichnen .lk-ort[data-teil="winter"] :is(circle, .lk-nr) { animation: lk-pop 450ms cubic-bezier(.3, 1.5, .5, 1) calc(var(--k) * 110ms + 500ms) backwards; } .lk[data-aktiv="sommer"].zeichnen .lk-ort[data-teil="sommer"] .lk-name, .lk[data-aktiv="winter"].zeichnen .lk-ort[data-teil="winter"] .lk-name { animation: lk-auf 400ms ease calc(var(--k) * 110ms + 700ms) backwards; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li { animation: lg-rein 450ms cubic-bezier(.2, .7, .1, 1) both; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li:nth-child(2) { animation-delay: 50ms; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li:nth-child(3) { animation-delay: 100ms; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li:nth-child(4) { animation-delay: 150ms; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li:nth-child(5) { animation-delay: 200ms; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li:nth-child(6) { animation-delay: 250ms; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li:nth-child(7) { animation-delay: 300ms; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li:nth-child(8) { animation-delay: 350ms; } .lehrgang-teile.wechselt .lehrgang-teil.aktiv li:nth-child(9) { animation-delay: 400ms; } } @keyframes lk-pop { from { transform: scale(0); } } @keyframes lk-auf { from { opacity: 0; } } @keyframes lg-rein { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } @media (max-width: 900px) { .lehrgang { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "karte" "teile"; grid-template-rows: auto; } .lehrgang-karte { margin-top: 16px !important; } .lehrgang-teile { margin-top: 8px !important; } } /* Telefon: auf der Karte nur nummerierte Punkte, die Namen stehen in der Liste */ @media (max-width: 600px) { .lk-ort .lk-name, .lk-standort .lk-name { display: none; } .lk-ort circle, .lk-ort .lk-nr { scale: 1.45; } .lk-raute { transform-box: fill-box; transform-origin: center; scale: 1.5; } .lk-nr { font-size: 16px; } .lk-landname { font-size: 21px; } /* die Karte schrumpft mit der Breite, Schrift in Karteneinheiten */ .lk-landname[data-land="at"] { translate: -14px 0; } .lk-landname[data-land="fr"] { translate: 10px 0; } .lehrgang-liste li { column-gap: 10px; } } .weg-etappe > .weg-mehr { margin-top: 14px !important; font-size: var(--wp--preset--font-size--klein); font-weight: 600; } .weg-mehr a { display: inline-block; padding: 12px 0; margin-block: -12px; color: var(--tanne); text-decoration: none; } /* Tippfläche 44 px ohne mehr Abstand */ .lehrgang { scroll-margin-top: calc(var(--kopf-h) + 24px); } .weg-mehr a:hover { text-decoration: underline; } /* Über uns: Geschichte im Querformat und Verbindungen als Leisten (Markus 18.10.2026: „Zahlen viel zu groß“, „im Querformat“, „befreundete und Kooperationspartner je in einer Leiste“). Ersetzt Bildbühne und Kachelraster von a1. */ /* Geschichte. Ohne Skript: Stationen mit Bild untereinander */ .zeit-unterzeile { margin-top: 6px !important; color: var(--schiefer); } .zeit-leiste { position: relative; padding-left: 24px; } .zeit-leiste::before, .zeit-leiste::after { content: ""; position: absolute; left: 5px; top: 12px; width: 2px; border-radius: 2px; } .zeit-leiste::before { bottom: 12px; background: var(--nebel); } .zeit-leiste::after { height: calc(var(--zeit-fortschritt, 1) * (100% - 24px)); background: var(--tanne); } .zeit-leiste > * { margin: 0 !important; } .zeit-station { position: relative; padding: 12px 0 20px; } .zeit-station > * { margin: 0 !important; } .zeit-station::before { content: ""; position: absolute; left: -24px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: var(--eis); border: 2px solid var(--tanne); box-sizing: border-box; } .zeit-jahr { font-weight: 800; font-stretch: 108%; font-size: 1.625rem; line-height: 1.1; color: var(--tanne); font-variant-numeric: tabular-nums; } .zeit-text { margin-top: 6px !important; max-width: 34em; line-height: 1.55; color: var(--fels); } .zeit-bild { margin-top: 12px !important; max-width: 560px; } .zeit-bild img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius); } .zeit-bild figcaption { margin: 6px 0 0; text-align: left; font-size: var(--wp--preset--font-size--klein); color: var(--schiefer); line-height: 1.45; } .zeit-bild img[src*="holzsteg"] { object-position: 50% 3%; } .zeit-bild img[src*="firngrat"] { object-position: 50% 70%; } .zeit-bild img[src*="silvretta"] { object-position: 60% 50%; } /* Tafel (baut ueberuns.js) und läuft von selbst durch, solange sie zu sehen ist (Markus: „automatisch, dass das einfach durchläuft“). Laptop: Bild links, Jahr und Text rechts. Telefon und Tablet: Bild oben, Text darunter. */ .zeit-panel { display: none; } .zeit.quer { display: block; } /* Bildspalte = Bühnenbreite: 7/12, auf niedrigen Laptops schmaler, damit das Bild 3:2 bleibt und die Knöpfe auf dem Bild sitzen */ .zeit.quer .zeit-panel { display: grid; grid-template-columns: min(calc((100% - clamp(32px, 4vw, 64px)) * 7 / 12), max(390px, calc((100vh - var(--kopf-h) - 220px) * 1.5))) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 0 clamp(32px, 4vw, 64px); } /* die Stationen bleiben für Bildschirmleser und Suchmaschinen im Text, sichtbar ist die Tafel */ .zeit.quer .zeit-leiste { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .zeit.quer .zeit-kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; } .zeit.quer .zeit-kopf > .zeit-unterzeile { margin: 0 !important; } /* Jahresleiste: Punkte gleichmäßig verteilt, die grüne Linie läuft mit */ .zeit-schiene { grid-column: 1 / -1; position: relative; height: 50px; margin: clamp(16px, 2.6vh, 28px) 0 clamp(12px, 2.2vh, 24px); padding: 0 22px; } .zeit-schiene-innen { position: relative; height: 100%; } .zeit-schiene-linie { position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 2px; background: var(--nebel); } .zeit-schiene-fuellung { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--zeit-fortschritt, 0) * 100%); border-radius: 2px; background: var(--tanne); transition: width 600ms cubic-bezier(.65, 0, .35, 1); } /* Wartezeit bis zum nächsten Jahr: die Linie dorthin füllt sich in 4 s (Markus: „7 s viel zu lang“), ihr Ende schaltet weiter (ueberuns.js) */ .zeit-schiene-lauf { position: absolute; top: 0; bottom: 0; left: calc(var(--i, 0) / var(--n) * 100%); width: calc(100% / var(--n)); border-radius: 2px; background: var(--tanne); opacity: .45; transform: scaleX(0); transform-origin: left center; } .zeit-schiene-lauf.zaehlt { animation: zeit-lauf 4s linear forwards; } .zeit-panel.steht .zeit-schiene-lauf { animation-play-state: paused; } .zeit-punkt { position: absolute; top: 0; left: calc(var(--i) / var(--n) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 4px 8px; cursor: pointer; font-size: var(--wp--preset--font-size--klein); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--schiefer); transition: color 300ms ease; } .zeit-punkt i { display: block; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; box-sizing: border-box; background: var(--eis); border: 2px solid var(--nebel); transition: background-color 300ms ease, border-color 300ms ease, transform 300ms ease; } .zeit-punkt.ist-vorbei i { border-color: var(--tanne); } .zeit-punkt.ist-aktiv { color: var(--tanne); } .zeit-punkt.ist-aktiv i { background: var(--tanne); border-color: var(--tanne); transform: scale(1.3); } @media (hover: hover) { .zeit-punkt:hover { color: var(--tanne); } } /* Bühne im Querformat 3:2, auf niedrigen Laptops flacher. Das neue Bild öffnet sich in fester Zeit von der Mitte über dem bisherigen */ .zeit-buehne { grid-column: 1; grid-row: 3; position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--nebel); } .zeit-ebene { position: absolute; inset: 0; z-index: 0; margin: 0; clip-path: inset(50% 0 50% 0); } .zeit-ebene img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); } .zeit-ebene.ist-unten { z-index: 1; clip-path: inset(0); } .zeit-ebene.ist-unten img { transform: scale(1.04); filter: brightness(.7); transition: transform 600ms cubic-bezier(.2, .7, .1, 1), filter 600ms ease; } .zeit-ebene.ist-oben { z-index: 2; clip-path: inset(0); transition: clip-path 600ms cubic-bezier(.65, 0, .35, 1); } .zeit-ebene.ist-oben img { transform: none; transition: transform 900ms cubic-bezier(.2, .7, .1, 1); } .zeit-ebene img[src*="holzsteg"] { object-position: 50% 3%; } /* Kopf des obersten Soldaten im Bild (Sonnet R2) */ .zeit-ebene img[src*="firngrat"] { object-position: 50% 65%; } .zeit-ebene img[src*="silvretta"] { object-position: 66% 50%; } /* 2025: VdG-Logo auf heller Fläche (Markus), nie beschneiden, auch im Dunkelmodus hell */ .zeit-ebene img[src*="vdg-2025"], .zeit-bild img[src*="vdg-2025"] { object-fit: contain; background: #F4F6F7; } /* Pfeile und Zähler unten rechts auf dem Bild, wie im Aufmacher */ .zeit-steuer { grid-column: 1; grid-row: 3; align-self: end; justify-self: end; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0 14px 14px 0; } .zeit-zaehler { margin-right: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(12, 17, 20, .6); color: #FFFFFF; font-size: var(--wp--preset--font-size--klein); font-weight: 600; font-variant-numeric: tabular-nums; } .zeit-pfeil { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(12, 17, 20, .62); color: #FFFFFF; cursor: pointer; transition: background-color 200ms ease, opacity 200ms ease; } .zeit-pfeil:hover { background: rgba(12, 17, 20, .8); } .zeit-pfeil:disabled { opacity: .35; cursor: default; } .zeit-pfeil:disabled:hover { background: rgba(12, 17, 20, .62); } .zeit-pfeil-vor svg { transform: scaleX(-1); } /* doppelter Ring: auf hellem Logo und Schnee ebenso sichtbar wie auf dunklen Fotos (WCAG 2.4.7) */ .zeit-pfeil:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 4px #0B6B4C; } @media (forced-colors: active) { .zeit-pfeil { border: 1px solid ButtonText; } } @media (prefers-reduced-motion: reduce) { .zeit-ebene, .zeit-ebene img, .zeit-schiene-fuellung { transition: none !important; } .zeit-schiene-lauf { display: none; } } .zeit-pause { font-size: 0.875rem; } /* Tafel: Jahr, Text, Bildunterschrift */ .zeit-tafel { grid-column: 2; grid-row: 3; align-self: start; padding-top: clamp(16px, 6vh, 64px); } .zeit-tafel > * { margin: 0 !important; } .zeit-tafel-jahr { overflow: hidden; font-weight: 800; font-stretch: 108%; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.1; color: var(--tanne); font-variant-numeric: tabular-nums; } .zeit-tafel-jahr span { display: block; } .zeit-tafel-text { margin-top: 10px !important; max-width: 30em; font-size: var(--wp--preset--font-size--gross); line-height: 1.55; color: var(--fels); } .zeit-tafel-unter { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--nebel); font-size: var(--wp--preset--font-size--klein); line-height: 1.45; color: var(--schiefer); } .zeit-tafel.wechsel .zeit-tafel-jahr span { animation: zeit-jahr-rein 420ms cubic-bezier(.2, .7, .1, 1); } .zeit-tafel.wechsel .zeit-tafel-text, .zeit-tafel.wechsel .zeit-tafel-unter { animation: zeit-text-rein 420ms ease; } @media (max-width: 899px) { .zeit.quer .zeit-panel { grid-template-columns: minmax(0, 1fr); } .zeit-schiene { margin: 14px 0 10px; padding: 0 14px; } .zeit-buehne { aspect-ratio: 16 / 10; max-height: none; min-height: 0; } /* feste Mindesthöhe, damit die Tafel beim Wechsel nicht springt */ .zeit-steuer { grid-row: 4; justify-self: end; margin: 10px 0 0; } .zeit-zaehler { background: none; padding: 0; color: var(--schiefer); } .zeit-pfeil { border-color: var(--nebel); background: var(--weiss); color: var(--fels); } .zeit-pfeil:hover, .zeit-pfeil:disabled:hover { background: var(--eis); } .zeit-pfeil:focus-visible { outline-color: var(--tanne); box-shadow: none; } .zeit-tafel { grid-column: 1; grid-row: 5; align-self: start; min-height: 10.5em; padding-top: 6px; } .zeit-tafel-jahr { font-size: 1.5rem; } .zeit-tafel-text { margin-top: 4px !important; font-size: var(--wp--preset--font-size--normal); } .zeit-tafel-unter { margin-top: 10px !important; padding-top: 8px; } } /* Telefon quer (niedrig): Bild und Text nebeneinander wie am Laptop, damit Text und Knöpfe im Fenster bleiben (Opus S2) */ @media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) { .zeit.quer .zeit-panel { grid-template-columns: min(calc((100% - 24px) * 7 / 12), calc((100vh - 180px) * 1.5)) minmax(0, 1fr); column-gap: 24px; } .zeit-steuer { grid-column: 1; grid-row: 4; } .zeit-tafel { grid-column: 2; grid-row: 3; min-height: 0; padding-top: 0; } } @media (max-width: 599px) { .zeit-schiene { padding: 0 12px; } .zeit-punkt { font-size: 0.6875rem; padding: 0 0 8px; } .zeit-steuer { gap: 6px; } } @keyframes zeit-jahr-rein { from { transform: translateY(100%); } to { transform: none; } } @keyframes zeit-lauf { to { transform: scaleX(1); } } @keyframes zeit-text-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Verbindungen: drei Leisten mit feinen Linien. Links die Art der Verbindung, rechts die Logos nebeneinander */ .netz { grid-template-columns: minmax(0, 1fr) !important; } .netz-kopf { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 5vw, 72px); align-items: baseline; } .netz-kopf > * { margin: 0 !important; } .netz-einleitung { max-width: 40em; color: var(--schiefer); } .netz-zeilen { margin-top: clamp(18px, 2.2vw, 28px) !important; border-top: 1px solid var(--nebel); } .netz-zeilen > * { margin: 0 !important; } .netz-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); border-bottom: 1px solid var(--nebel); } .netz-zeile > * { margin: 0 !important; } .netz-art { padding: 22px 16px 0 0; font-size: 0.75rem; font-weight: 600; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; color: var(--tanne); } .netz-eintraege { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .netz-eintraege > * { margin: 0 !important; } .netz-eintrag { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px clamp(16px, 1.8vw, 24px) 22px; transition: background-color 200ms ease; } .netz-eintrag + .netz-eintrag { border-left: 1px solid var(--nebel); } .netz-eintrag > * { margin: 0 !important; } .netz-logo { display: block; width: calc(100% - 26px); } .netz-logo a { display: block; width: fit-content; max-width: 100%; } /* Safari: sonst schrumpft das Logo im Inline-Link auf wenige Pixel */ .netz-logo img { display: block; height: 56px; width: auto; max-width: 100%; padding: 7px 10px; box-sizing: border-box; object-fit: contain; background: #F4F6F7; border-radius: 10px; transition: transform 260ms cubic-bezier(.2, .7, .1, 1); } .netz-logo a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .netz-logo a:focus-visible { outline: none; } .netz-eintrag:has(a:focus-visible) { outline: 3px solid var(--tanne); outline-offset: -3px; border-radius: 6px; } .netz-eintrag:has(a)::after { content: "↗"; content: "↗" / ""; position: absolute; top: 18px; right: 16px; font-size: 16px; line-height: 1; color: var(--schiefer); transition: transform 260ms cubic-bezier(.2, .7, .1, 1), color 200ms ease; } .netz-eintrag h3 { font-size: var(--wp--preset--font-size--normal); font-weight: 600; line-height: 1.35; letter-spacing: 0; hyphens: manual; overflow-wrap: break-word; text-wrap: balance; color: var(--fels); } /* Editor: der Bildblock setzt dort height:auto inline, sonst stünden die Logos in Originalgröße (Opus M3) */ .editor-styles-wrapper .netz-logo img { height: 56px !important; width: auto !important; } .editor-styles-wrapper .netz-haupt .netz-logo img { height: 76px !important; } /* VdG: ein Eintrag über die ganze Leiste, Logo links, Text rechts */ .netz-haupt { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px clamp(20px, 2.4vw, 32px); align-items: start; } .netz-haupt .netz-logo { grid-row: 1 / span 2; width: auto; } .netz-haupt .netz-logo img { height: 76px; padding: 8px 12px; } .netz-haupt h3 { font-size: var(--wp--preset--font-size--gross); font-weight: 700; padding-right: 28px; } .netz-haupt p { max-width: 44em; line-height: 1.55; color: var(--fels); } @media (hover: hover) { .netz-eintrag:has(a):hover { background: rgba(11, 107, 76, .05); } .netz-eintrag:has(a):hover .netz-logo img { transform: scale(1.04); } .netz-eintrag:has(a):hover::after { transform: translate(2px, -2px); color: var(--tanne); } } /* Einträge kommen nacheinander herein (nur mit Skript und ohne reduzierte Bewegung) */ .netz.mit-bewegung .netz-eintrag { opacity: 0; transform: translateY(14px); transition: opacity 480ms ease calc(var(--netz-i, 0) * 60ms), transform 560ms cubic-bezier(.2, .7, .1, 1) calc(var(--netz-i, 0) * 60ms), background-color 200ms ease; } .netz.mit-bewegung.sichtbar .netz-eintrag { opacity: 1; transform: none; } @media (max-width: 999px) { .netz-kopf { grid-template-columns: minmax(0, 1fr); } .netz-zeile { grid-template-columns: minmax(0, 1fr); } .netz-art { padding: 18px 0 0; } .netz-eintrag { padding-top: 14px; } .netz-eintraege > .netz-eintrag:first-child { padding-left: 0; } } @media (max-width: 719px) { /* zwei Spalten: Linien nur zwischen den Spalten und zwischen den Reihen */ .netz-eintraege { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .netz-eintrag { padding: 14px 14px 16px; } .netz-eintrag + .netz-eintrag { border-left: 0; } .netz-eintraege > .netz-eintrag:nth-child(odd) { padding-left: 0; } .netz-eintraege > .netz-eintrag:nth-child(even) { border-left: 1px solid var(--nebel); } .netz-eintraege > .netz-eintrag:nth-child(n+3) { border-top: 1px solid var(--nebel); } .netz-eintrag:has(a)::after { top: 14px; right: 12px; } .netz-logo img { height: 48px; padding: 6px 8px; } .netz-sektion .netz-eintraege { grid-template-columns: minmax(0, 1fr); } .netz-haupt { grid-template-columns: minmax(0, 1fr); padding-left: 0; } .netz-haupt .netz-logo { grid-row: auto; } .netz-haupt .netz-logo img { height: 64px; } } @media (max-width: 400px) { /* zwei Spalten wären unter 400 px zu schmal für „Heeresbergführerverband“ (Sonnet M1) */ .netz-eintraege { grid-template-columns: minmax(0, 1fr); } .netz-eintraege > .netz-eintrag { flex-direction: row; align-items: center; gap: 14px; padding: 12px 28px 12px 0 !important; border-left: 0 !important; } .netz-eintraege > .netz-eintrag + .netz-eintrag { border-top: 1px solid var(--nebel); } .netz-eintrag:not(.netz-haupt) .netz-logo { flex: none; width: 76px; } .netz-eintrag:has(a)::after { top: 50%; transform: translateY(-50%); } .netz-haupt { flex-direction: column !important; align-items: stretch !important; } .netz-haupt:has(a)::after { top: 14px; transform: none; } } /* ── Endprüfung 18.10.2026: Kopf am Telefon einzeilig (iPhone SE/mini 375, 16 Pro 402, auch angemeldet) ── */ @media (max-width: 440px) { .marke { gap: 8px; } .marke-abzeichen img { width: 44px !important; } .marke-name a { font-size: 1.125rem; } .kopf { gap: 6px; } .kopf-login .wp-block-button__link { padding: 0.5em 0.65em; } } /* Telefon quer (Endprüfung 18.10.2026): Aufmacher nicht höher als der Bildschirm, sonst liegen die Knöpfe darunter */ @media (orientation: landscape) and (max-height: 520px) and (min-width: 601px) { body.home .held-buehne { min-height: 100vh; min-height: 100svh; } }