/* * CDU Saarbrücken-Land – Hauptstylesheet * Grundlage: CDU Saar Corporate Design Manual, Stand 11/2025. * Keine Inline-Styles, keine externen Ressourcen (CSP: style-src 'self'). */ /* ---------- Schriften (lokal, SIL OFL 1.1) ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff") format("woff"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-800.woff") format("woff"); } @font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-serif-400.woff") format("woff"); } @font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/plex-serif-400i.woff") format("woff"); } /* ---------- Tokens ---------- */ :root { --petrol: #105569; --petrol-dark: #0b3e4d; --tuerkis: #52b7c1; --tuerkis-60: #a7d5dc; --tuerkis-20: #e4f1f4; --orange: #ff7300; --orange-dark: #e56700; --ink: #0a0a0a; --muted: #3d4a4f; /* 9,5:1 auf Weiß */ --line: #c5dde2; --field: #61757b; /* Formularrahmen, 4,6:1 auf Weiß */ --white: #ffffff; --focus: var(--petrol); --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif; --wrap: 75rem; --gutter: clamp(1rem, 0.6rem + 2vw, 2rem); --space: clamp(3rem, 2rem + 4vw, 6rem); --radius: 2px; --shadow: 0 1px 2px rgba(16, 85, 105, .08), 0 12px 32px -12px rgba(16, 85, 105, .25); --ease: cubic-bezier(.2, .7, .2, 1); --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem); --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); --fs-h3: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); --fs-sub: clamp(1.1rem, .95rem + .8vw, 1.6rem); } /* ---------- Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); font-feature-settings: "kern", "liga", "calt"; overflow-x: clip; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--petrol); text-decoration-thickness: .08em; text-underline-offset: .18em; } a:hover { color: var(--petrol-dark); } p, ul, ol, dl, figure, blockquote { margin: 0; } p + p { margin-top: 1em; } h1, h2, h3, h4 { margin: 0; font-family: var(--sans); font-weight: 800; line-height: 1.2; color: var(--petrol); text-wrap: balance; } address { font-style: normal; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .on-dark, .band--petrol, .infobox, .claim-band, .duo__card--petrol, .site-header .brand__box { --focus: var(--white); } ::selection { background: var(--tuerkis-60); color: var(--ink); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--petrol); color: var(--white); padding: .75rem 1rem; font-weight: 700; } .skip:focus { top: 1rem; } main:focus { outline: none; } .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: calc(46rem + 2 * var(--gutter)); } .center { text-align: center; margin-top: 2rem; } .dot { color: var(--orange); } .mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; } .empty, .note { color: var(--muted); } .note { margin-top: 2rem; font-size: .95rem; } .opt { font-weight: 400; color: var(--muted); } /* ---------- Headline-System (Manual Kap. 05) ---------- */ .hl { display: grid; gap: .55rem; justify-items: start; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); } .hl__title { font-size: var(--fs-h2); line-height: 1.22; } .hl--bar .hl__title > span { background: var(--petrol); color: var(--white); padding: .04em .3em .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hl--plain .hl__title > span { color: var(--petrol); } .hl__top, .hl__sub { font: 400 var(--fs-sub)/1.35 var(--serif); color: var(--ink); } .hl__top > span, .hl__sub > span { background: var(--white); padding: .05em .35em .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hl--plain .hl__sub > span, .hl--plain .hl__top > span { padding-inline: 0; background: none; } h1.hl__title { font-size: var(--fs-h1); line-height: 1.16; } /* ---------- Kopf ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease); } .site-header.is-scrolled { box-shadow: 0 6px 24px -14px rgba(16, 85, 105, .45); } .site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; } .brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--petrol); margin-right: auto; } .brand__box { display: grid; place-items: center; background: var(--petrol); color: var(--white); padding: .6rem .8rem; transition: padding .3s var(--ease); } .brand__box .logo { width: 7rem; height: auto; } @media (max-width: 30rem) { .brand__box .logo { width: 5.75rem; } } .brand__name { font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.01em; } .site-header.is-scrolled .brand__box { padding: .4rem .6rem; } .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .5rem .75rem; border: 2px solid var(--petrol); background: var(--white); color: var(--petrol); font-weight: 700; cursor: pointer; border-radius: var(--radius); } .nav-toggle .icon { width: 1.25rem; height: 1.25rem; } .nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; } html:not(.js) .nav-toggle { display: none; } .nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } .nav__list a { display: inline-block; padding: .6rem 0; font-weight: 700; font-size: .975rem; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; } .nav__list a:hover { color: var(--petrol); border-bottom-color: var(--tuerkis); } .nav__list .is-current > a, .nav__list .current-menu-item > a, .nav__list a[aria-current="page"] { color: var(--petrol); border-bottom-color: var(--orange); } @media (max-width: 63.99rem) { html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: .5rem; } html:not(.js) .nav { width: 100%; } .js .nav { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -20px rgba(16, 85, 105, .5); padding: .5rem var(--gutter) 1.5rem; max-height: calc(100vh - 4.5rem); overflow-y: auto; } .js .nav.is-open { display: block; } .js .nav__list { flex-direction: column; gap: 0; } .js .nav__list a { display: block; padding: .85rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); } .js .nav__list .is-current > a, .js .nav__list a[aria-current="page"] { border-bottom: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--orange); padding-left: .85rem; } .nav__donate { margin-top: 1rem; width: 100%; justify-content: center; } .brand__name { font-size: .95rem; } } @media (min-width: 64rem) { .nav-toggle { display: none; } .nav { display: flex; align-items: center; gap: 1.75rem; } } /* ---------- Buttons & Links ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.875rem; padding: .7rem 1.25rem; border: 2px solid transparent; border-radius: var(--radius); font: 700 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); } .btn .icon { width: 1.15rem; height: 1.15rem; } .btn:active { transform: translateY(1px); } .btn--lg { min-height: 3.25rem; padding: .85rem 1.6rem; font-size: 1.075rem; } .btn--sm { min-height: 2.5rem; padding: .5rem .9rem; font-size: .95rem; } .btn--primary { background: var(--petrol); color: var(--white); } .btn--primary:hover { background: var(--petrol-dark); color: var(--white); } .btn--donate { background: var(--orange); color: var(--ink); } /* Schwarz auf Orange 7,7:1 */ .btn--donate:hover { background: var(--orange-dark); color: var(--ink); } .btn--ghost { background: transparent; color: var(--petrol); border-color: var(--petrol); } .btn--ghost:hover { background: var(--petrol); color: var(--white); } .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; color: var(--petrol); } .link-arrow .icon { width: 1.1rem; height: 1.1rem; transition: transform .2s var(--ease); } .link-arrow:hover .icon { transform: translateX(3px); } .link-arrow--light { color: var(--white); } .link-arrow--light:hover { color: var(--white); } /* Icons im Kreis (Manual Kap. 07) */ .icon { width: 1.25rem; height: 1.25rem; flex: none; } .icircle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; } .icircle .icon { width: 1.4rem; height: 1.4rem; } .icircle--pos { background: var(--petrol); color: var(--white); } .icircle--neg { background: var(--white); color: var(--petrol); } .icircle--orange { background: var(--orange); color: var(--ink); } /* ---------- Abschnitte ---------- */ .section { padding-block: var(--space); } .section--tight { padding-block: 2rem var(--space); } .section--tint { background: var(--tuerkis-20); } .section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); } .section__head .hl { margin-bottom: 0; } .tag { display: inline-block; font-weight: 800; font-size: .95rem; letter-spacing: .01em; color: var(--petrol); border-left: 3px solid var(--orange); padding-left: .6rem; margin-bottom: 1rem; } /* ---------- Hero ---------- */ .hero { background: var(--tuerkis-20); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; } .hero__inner { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; } @media (min-width: 64rem) { .hero__inner { grid-template-columns: 1.2fr 1fr; } } .hero__top { margin-bottom: 1.1rem; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); } .hero__title { font-size: clamp(2.2rem, 1rem + 4vw, 4.25rem); line-height: 1.08; display: grid; gap: .12em; justify-items: start; } .hero__line > span { display: inline-block; hyphens: manual; background: var(--petrol); color: var(--white); padding: .02em .28em .1em; } .hero__sub { margin-top: 1.5rem; max-width: 34rem; font-size: 1.125rem; color: var(--ink); } .hero__media { position: relative; } .hero__frame { position: relative; } .hero__frame::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; background: var(--petrol); } .hero__img { position: relative; width: 100%; aspect-ratio: 978 / 486; object-fit: cover; } .hero__cap { position: relative; margin-top: 2.25rem; font: italic 400 1rem/1.4 var(--serif); color: var(--ink); } @media (prefers-reduced-motion: no-preference) { .hero__line, .hero__top, .hero__sub, .hero .actions { animation: rise .8s var(--ease) both; } .hero__top { animation-delay: .05s; } .hero__line:nth-child(1) { animation-delay: .15s; } .hero__line:nth-child(2) { animation-delay: .3s; } .hero__line:nth-child(3) { animation-delay: .45s; } .hero__sub { animation-delay: .6s; } .hero .actions { animation-delay: .7s; } .hero__media { animation: slide-in 1s var(--ease) .25s both; } .hero__line .dot { display: inline-block; animation: pop .5s var(--ease) both; animation-delay: 1s; } } @keyframes rise { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } } @keyframes slide-in { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } } @keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.5); } 100% { transform: scale(1); } } @media (min-width: 48rem) { .nb { white-space: nowrap; } } /* ---------- Kandidat ---------- */ .cand { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } @media (min-width: 56rem) { .cand { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } .cand__photo { position: relative; max-width: 30rem; } .cand__photo::after { content: ""; position: absolute; inset: auto -1rem -1rem auto; width: 55%; height: 45%; background: var(--orange); z-index: -1; } .cand__photo, .lt-hero__photo { isolation: isolate; } .cand__img { width: 100%; aspect-ratio: 966 / 1188; object-fit: cover; } .motto { margin-top: 1.25rem; font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); line-height: 1.2; color: var(--petrol); } .motto--xl { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem); } .cand__intro { margin-top: 1rem; font-size: 1.15rem; max-width: 40rem; } .themes-mini { list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: .85rem; } .themes-mini li { display: flex; align-items: center; gap: .9rem; font-weight: 700; font-size: 1.075rem; } .themes-mini .icircle { width: 2.5rem; height: 2.5rem; } /* ---------- Karten ---------- */ .cards { list-style: none; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .card { position: relative; display: flex; flex-direction: column; background: var(--white); border-top: 4px solid var(--orange); box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16, 85, 105, .08), 0 22px 40px -16px rgba(16, 85, 105, .35); } .card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .card__body { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .6rem; } .card__meta { font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; } .card__cat { font-weight: 800; color: var(--petrol); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; } .card__title { font-size: var(--fs-h3); line-height: 1.3; } .card__title a { color: var(--petrol); text-decoration: none; } .card__title a::after { content: ""; position: absolute; inset: 0; } .card__title a:hover { text-decoration: underline; } .card__text { color: var(--ink); } .section--tint .card { box-shadow: none; } .saar-strip { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line); } .saar-strip__title { font-size: 1.15rem; margin-bottom: .75rem; } .saar-strip__list { list-style: none; padding: 0; display: grid; gap: .5rem; } .saar-strip__list li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; align-items: baseline; padding: .6rem 0 .6rem .9rem; border-left: 3px solid var(--orange); background: var(--white); } .saar-strip__list time { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; } .saar-strip__list a { font-weight: 700; text-decoration: none; } .saar-strip__list a:hover { text-decoration: underline; } .saar-strip__list .icon { display: inline; width: .95rem; height: .95rem; vertical-align: -.1em; } @media (max-width: 30rem) { .saar-strip__list li { grid-template-columns: 1fr; gap: .15rem; } } /* ---------- Grundwerte ---------- */ .values { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); } @media (min-width: 48rem) { .values { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); } } .value { display: grid; gap: .5rem; align-content: start; padding: 1.1rem 1rem 1.25rem; background: var(--tuerkis-20); border-top: 3px solid var(--petrol); min-height: 7rem; } @media (min-width: 48rem) { .value { padding: 1.4rem 1.25rem 1.5rem; min-height: 9rem; } } .section--tint .value { background: var(--white); } .value__nr { font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--orange); } .value__text { font-weight: 800; font-size: clamp(1rem, .9rem + .5vw, 1.2rem); line-height: 1.3; color: var(--petrol); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* ---------- Vor Ort ---------- */ .places { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); } .place { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: 1.1rem 1.2rem; background: var(--white); border-left: 3px solid var(--tuerkis); transition: border-color .2s var(--ease), transform .2s var(--ease); } .place .icon { color: var(--petrol); margin-top: .15rem; } .place__body { display: grid; gap: .1rem; } .place__name { font-weight: 800; font-size: 1.1rem; color: var(--petrol); text-decoration: none; } a.place__name::after { content: ""; position: absolute; inset: 0; } .place--link:hover { border-left-color: var(--orange); transform: translateX(2px); } .place__typ, .place__meta { font-size: .9rem; color: var(--muted); } .section:not(.section--tint) .place { background: var(--tuerkis-20); } /* ---------- Willkommen ---------- */ .welcome { display: grid; gap: 1.5rem 2.5rem; align-items: start; max-width: 62rem; } @media (min-width: 48rem) { .welcome { grid-template-columns: 12rem 1fr; } } .portrait { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--white), 0 0 0 8px var(--petrol); } @media (min-width: 48rem) { .welcome .portrait { width: 12rem; height: 12rem; } } .welcome__text { max-width: 40rem; font-size: 1.1rem; } .welcome__salute { font: italic 400 1.2rem/1.4 var(--serif); margin-bottom: .5rem; } .welcome__sign { display: grid; margin: 1.5rem 0 .75rem; } .welcome__name { font-weight: 800; color: var(--petrol); font-size: 1.2rem; } /* ---------- Social ---------- */ .social-cards { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .scard { display: grid; gap: .5rem; align-content: start; padding: 1.75rem; background: var(--white); border-top: 4px solid var(--petrol); } .scard--wa { border-top-color: var(--orange); } .scard .icircle { margin-bottom: .5rem; } .scard__title { font-size: 1.35rem; } .scard__handle { font: 400 1.05rem/1.4 var(--serif); } .scard .link-arrow { margin-top: .5rem; } /* ---------- Bänder ---------- */ .band--petrol { background: var(--petrol); color: var(--white); padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); } .band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; } .band__inner > div { max-width: 44rem; } .band__title { color: var(--white); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); margin-bottom: .6rem; } .band a:not(.btn) { color: var(--white); } /* ---------- Mitmachen (Startseite) ---------- */ .engage { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); } @media (min-width: 60rem) { .engage { grid-template-columns: 1.15fr 1fr; align-items: start; } } .engage__links { list-style: none; padding: 0; display: grid; } .engage__links a { display: flex; gap: 1rem; align-items: center; padding: 1rem .5rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease), padding .2s var(--ease); } .engage__links a:hover { background: var(--tuerkis-20); padding-left: 1rem; } .engage__links strong { color: var(--petrol); font-size: 1.1rem; } .engage__news { background: var(--tuerkis-20); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top: 4px solid var(--orange); } .engage__news .hl { margin-bottom: 1rem; } .engage__news > p { margin-bottom: 1.25rem; } .section--tint .engage__news { background: var(--white); } /* ---------- Formulare ---------- */ .form { display: grid; gap: 1.25rem; } .form__grid { display: grid; gap: 1rem 1.25rem; } @media (min-width: 40rem) { .form__grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } } .field { display: grid; gap: .35rem; } .field label, .choices legend { font-weight: 700; font-size: .95rem; } input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; min-height: 2.875rem; padding: .65rem .85rem; background: var(--white); border: 2px solid var(--field); border-radius: var(--radius); } textarea { resize: vertical; min-height: 9rem; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--petrol); outline-offset: 1px; border-color: var(--petrol); } .field__row { display: flex; gap: .5rem; flex-wrap: wrap; } .field__row input { flex: 1 1 14rem; } .field__hint, .form__hint { font-size: .9rem; color: var(--muted); } .form--compact .form__hint { font-size: .85rem; } .check { display: grid; grid-template-columns: 1.4rem 1fr; gap: .65rem; align-items: start; font-size: .95rem; } .check input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--petrol); } .check--inline { display: inline-grid; grid-template-columns: 1.4rem auto; margin: .35rem 1.25rem .35rem 0; } .choices { border: 0; padding: 0; margin: 0; } .choices legend { margin-bottom: .4rem; } .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form .btn { justify-self: start; } p + .form, p + .notice { margin-top: 1.5rem; } .notice { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; margin-bottom: 1.25rem; border-left: 4px solid var(--petrol); background: var(--white); box-shadow: var(--shadow); } .notice--ok .icon { color: var(--petrol); } .notice--error { border-left-color: var(--orange); background: #fff6ee; } .notice--error .icon { color: #9a3d00; } .notice p { margin: 0; font-weight: 700; } /* ---------- Fuß ---------- */ .claim-band { background: var(--petrol); color: var(--white); } .claim-band__inner { padding-block: 1.1rem; display: flex; justify-content: flex-end; } .claim { font-weight: 800; font-size: clamp(1.15rem, .95rem + 1vw, 1.6rem); line-height: 1.2; text-align: right; } .site-footer__grid { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); } @media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 72rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .fcol + .fcol { border-left: 1px solid var(--line); padding-left: 2rem; } } .fcol { display: grid; gap: .75rem; align-content: start; font-size: .975rem; } .flabel { font-weight: 800; color: var(--petrol); font-size: 1.05rem; } .flist { list-style: none; padding: 0; display: grid; gap: .45rem; } .flist a { display: inline-flex; gap: .5rem; align-items: center; color: var(--ink); text-decoration: none; } .flist a:hover { color: var(--petrol); text-decoration: underline; } .flist--links { margin-top: .75rem; } .social { list-style: none; padding: 0; display: flex; gap: .6rem; } .social a { display: inline-block; border-radius: 50%; } .social .icircle--neg { background: var(--petrol); color: var(--white); transition: background-color .2s var(--ease); } .social a:hover .icircle { background: var(--orange); color: var(--ink); } .brand--footer { margin-bottom: 1rem; } .fnews { display: grid; gap: .6rem; max-width: 26rem; } .site-footer__legal { background: var(--tuerkis-20); font-size: .9rem; } .legal { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; padding-block: 1rem; } .legal__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } .legal__list a { color: var(--ink); } /* ---------- Unterseiten ---------- */ .page-hero { background: var(--tuerkis-20); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); } .page-hero .hl { margin-bottom: 0; } .page-hero .card__meta { margin-bottom: 1rem; } .page-hero__intro { margin-top: 1.25rem; max-width: 46rem; font-size: 1.15rem; } .split { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; } @media (min-width: 60rem) { .split { grid-template-columns: 1.35fr 1fr; } .split--wide { grid-template-columns: 1.6fr 1fr; } } .prose { max-width: 46rem; font-size: 1.1rem; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 2em; } .prose h3 { font-size: 1.3rem; margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .35em; } .prose ul li::marker { color: var(--orange); } .prose blockquote { position: relative; padding: .25rem 0 .25rem 3.25rem; font-weight: 700; color: var(--petrol); font-size: 1.25rem; } .prose blockquote::before { content: "„"; position: absolute; left: 0; top: -1.6rem; font: 800 5rem/1 var(--sans); color: var(--orange); } .prose img { height: auto; } .prose a { font-weight: 700; } /* Landtagswahl */ .lt-hero { background: var(--tuerkis-20); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); overflow: hidden; } .lt-hero__inner { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } @media (min-width: 60rem) { .lt-hero__inner { grid-template-columns: 1.15fr 1fr; } } .lt-hero__photo { position: relative; max-width: 34rem; justify-self: center; } .lt-hero__photo::before { content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; background: var(--petrol); z-index: -1; } .lead { margin-top: 1.25rem; font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); max-width: 40rem; } .facts { list-style: none; padding: 0; display: grid; } .facts li { position: relative; padding: .85rem 0 .85rem 1.75rem; border-bottom: 1px solid var(--line); font-size: 1.075rem; } .facts li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: .9rem; height: 3px; background: var(--orange); } .infobox { background: var(--petrol); color: var(--white); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); display: grid; gap: .9rem; align-content: start; } .infobox__head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 2px solid var(--orange); } .infobox__head .icon { width: 2.25rem; height: 2.25rem; } .infobox__title { font-weight: 800; font-size: 1.4rem; line-height: 1.2; color: inherit; } .infobox__claim { font-weight: 700; font-size: 1.1rem; } .infobox--light { background: var(--tuerkis-20); color: var(--ink); border-top: 4px solid var(--petrol); } .infobox--light .infobox__title { color: var(--petrol); } .when { display: grid; gap: .5rem; } .when > div { display: flex; gap: .75rem; align-items: center; } .when dd { margin: 0; font-weight: 700; } .ticks { list-style: none; padding: 0; display: grid; gap: .75rem; } .ticks li { position: relative; padding-left: 1.5rem; } .ticks li::before { content: ""; position: absolute; left: 0; top: .7em; width: .7rem; height: 3px; background: var(--orange); } .themes { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .theme { display: grid; gap: .8rem; align-content: start; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); background: var(--white); border-top: 4px solid var(--orange); } .theme__title { font-size: 1.4rem; } .quote-band { padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); background: var(--white); } .quote { position: relative; max-width: 62rem; margin-inline: auto; padding: 3.5rem 0 0; } @media (min-width: 48rem) { .quote { padding: .5rem 0 0 clamp(5rem, 3rem + 5vw, 8rem); } .quote::before { top: -3.2rem; } } .quote::before { content: "„"; position: absolute; left: -.05em; top: -4.6rem; font: 800 clamp(7rem, 5rem + 6vw, 11rem)/1 var(--sans); color: var(--orange); } .quote__text { font-weight: 800; font-size: clamp(1.8rem, 1.1rem + 3.2vw, 3.4rem); line-height: 1.15; color: var(--petrol); text-wrap: balance; } .quote figcaption { margin-top: 1.25rem; font: italic 400 1.2rem/1.4 var(--serif); } .quote__w { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .js .quote__text.is-pre .quote__w { opacity: 0; transform: translateY(.4em); } .quote__w { transition: opacity .5s var(--ease), transform .5s var(--ease); } } .team-photo { position: relative; max-width: 60rem; margin-bottom: 2.5rem; } .team-photo__img { width: 100%; aspect-ratio: 978 / 486; object-fit: cover; border-bottom: 6px solid var(--orange); } .wkl__filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; } .wkl__list { list-style: none; padding: 0; display: grid; gap: .5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .wkl__item { display: grid; grid-template-columns: 2.75rem 1fr auto; gap: .75rem; align-items: center; padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--line); } .wkl__item[hidden] { display: none; } .wkl__nr { font-weight: 800; font-size: 1.25rem; color: var(--petrol); text-align: center; font-variant-numeric: tabular-nums; } .wkl__name { font-weight: 700; } .wkl__item:hover, .wkl__item:has(a:focus-visible) { background: #ffe9d6; } .wkl__item { padding-left: .35rem; } a.wkl__name--link { color: inherit; text-decoration: none; } a.wkl__name--link::after { content: ""; position: absolute; inset: 0; } /* ganze Zeile klickbar */ .wkl__item:has(a.wkl__name--link) { position: relative; cursor: pointer; } a.wkl__name--link:focus-visible { outline: none; } .wkl__item:has(a.wkl__name--link:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; } .wkl__item--top .wkl__nr { background: var(--petrol); color: var(--white); padding: .3rem 0; } .wkl__item--top .wkl__name { font-size: 1.1rem; } .badge { font-size: .75rem; font-weight: 800; letter-spacing: .04em; padding: .2rem .5rem; border-radius: var(--radius); white-space: nowrap; } .badge--land { background: var(--petrol); color: var(--white); } .badge--stadt { background: var(--tuerkis-60); color: var(--petrol); } .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .chip { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem 1rem; border: 2px solid var(--petrol); border-radius: 999px; background: var(--white); color: var(--petrol); font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; } .chip[aria-pressed="true"], .chip--link:hover { background: var(--petrol); color: var(--white); } .duo { display: grid; gap: 1.25rem; } @media (min-width: 56rem) { .duo { grid-template-columns: 1fr 1fr; } } .duo__card { display: grid; gap: .9rem; align-content: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--white); border-top: 4px solid var(--petrol); } .duo__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); } .duo__card .actions { margin-top: .5rem; gap: 1.5rem; } .duo__card--petrol { background: var(--petrol); color: var(--white); border-top-color: var(--orange); } .duo__card--petrol .duo__title { color: var(--white); } .duo__card .btn { justify-self: start; } .tiles3 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .tile { display: grid; gap: .6rem; align-content: start; padding: 1.75rem; background: var(--tuerkis-20); color: var(--ink); text-decoration: none; border-top: 4px solid var(--petrol); transition: transform .25s var(--ease), border-color .25s var(--ease); } .tile:hover { transform: translateY(-3px); border-top-color: var(--orange); color: var(--ink); } .tile__title { font-weight: 800; font-size: 1.35rem; color: var(--petrol); } .events { list-style: none; padding: 0; display: grid; gap: 1rem; } .event { display: grid; gap: .6rem; padding: 1.5rem; background: var(--tuerkis-20); border-left: 4px solid var(--petrol); } .event__src { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--petrol); } .event__title { font-size: 1.35rem; } .event__title a { text-decoration: none; } .event__title a:hover { text-decoration: underline; } .event__when { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; font-weight: 700; } .bank { display: grid; gap: .75rem; margin-bottom: 1.5rem; } .bank > div { display: grid; gap: .1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); } .bank dt { font-size: .85rem; font-weight: 700; color: var(--muted); } .bank dd { margin: 0; font-size: 1.15rem; font-weight: 700; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .btn-copy { display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .6rem; border: 2px solid var(--petrol); background: var(--white); color: var(--petrol); font-size: .85rem; font-weight: 700; cursor: pointer; } .girocode { max-width: 12rem; } .girocode figcaption { font-size: .9rem; color: var(--muted); margin-top: .5rem; } .people { list-style: none; padding: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); } .person { display: grid; justify-items: center; text-align: center; gap: .3rem; } .person .portrait { margin-bottom: .75rem; } .portrait--empty { display: grid; place-items: center; background: var(--tuerkis-60); color: var(--petrol); } .portrait--empty .icon { width: 3rem; height: 3rem; } .person__name { font-weight: 800; color: var(--petrol); } .person__role { font-size: .95rem; color: var(--muted); } .program { display: grid; gap: 2.5rem; } @media (min-width: 64rem) { .program { grid-template-columns: 17rem 1fr; } .toc { position: sticky; top: 6rem; } } .program--empty { min-height: 30vh; } .toc { display: grid; gap: 1rem; align-content: start; } .toc summary { font-weight: 800; color: var(--petrol); cursor: pointer; } .toc ol { padding-left: 1.2rem; margin-top: .75rem; display: grid; gap: .4rem; } .article__media img { width: 100%; height: auto; margin-top: 2rem; } .pager ul { list-style: none; padding: 0; display: flex; gap: .5rem; margin-top: 2.5rem; flex-wrap: wrap; } .pager a, .pager span { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .75rem; border: 2px solid var(--petrol); text-decoration: none; font-weight: 700; } .pager .current { background: var(--petrol); color: var(--white); } .contact address { margin-bottom: 1.5rem; } .contact .flabel { margin-bottom: .4rem; } .contact .flist, .contact > p { margin-bottom: 1.5rem; } .social--pos { gap: .75rem; } /* ---------- Chatbot-Start ---------- */ .chat-launch { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; border: 0; border-radius: 999px; background: var(--petrol); color: var(--white); font-weight: 700; box-shadow: 0 10px 30px -10px rgba(16, 85, 105, .7); cursor: pointer; --focus: var(--orange); } .chat-launch:hover { background: var(--petrol-dark); } /* ---------- Bewegung beim Scrollen ---------- */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal].is-pre { opacity: 0; transform: translateY(20px); } .js [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); } .js li[data-reveal]:nth-child(2) { transition-delay: 70ms; } .js li[data-reveal]:nth-child(3) { transition-delay: 140ms; } .js li[data-reveal]:nth-child(4) { transition-delay: 210ms; } .js li[data-reveal]:nth-child(5) { transition-delay: 280ms; } .js li[data-reveal]:nth-child(6) { transition-delay: 350ms; } .js li[data-reveal]:nth-child(n+7) { transition-delay: 420ms; } } /* ---------- Druck ---------- */ @media print { .site-header, .claim-band, .chat-launch, .nav-toggle, form, .social-cards, .band { display: none !important; } body { font-size: 11pt; } .section { padding-block: 1rem; } a { color: #000; } [data-reveal], .quote__w { opacity: 1 !important; transform: none !important; } } /* ---------- Chatbot-Dialog ---------- */ .chat { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: min(26rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 2rem)); display: grid; grid-template-rows: auto auto 1fr auto; background: var(--white); border-top: 4px solid var(--orange); box-shadow: 0 20px 50px -15px rgba(16, 85, 105, .55); } .chat[hidden] { display: none; } .chat__head { display: flex; justify-content: space-between; align-items: center; background: var(--petrol); color: var(--white); padding: .75rem 1rem; --focus: var(--white); } .chat__title { font-weight: 800; } .chat__close { background: none; border: 0; color: var(--white); font-size: 1.75rem; line-height: 1; cursor: pointer; padding: 0 .25rem; } .chat__note { font-size: .8rem; color: var(--muted); padding: .6rem 1rem; background: var(--tuerkis-20); } .chat__log { overflow-y: auto; padding: 1rem; display: grid; gap: .75rem; align-content: start; } .chat__msg { padding: .7rem .9rem; max-width: 92%; font-size: .975rem; } .chat__msg--user { justify-self: end; background: var(--petrol); color: var(--white); } .chat__msg--bot { background: var(--tuerkis-20); } .chat__src { margin-top: .5rem; padding-left: 1rem; font-size: .875rem; } .chat__form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line); } .chat__form input { flex: 1; } /* ========================================================= Erweiterung 1.1: Karte, Ortsverbände, Handlungsaufrufe, Kandidat ========================================================= */ .btn--light { background: var(--white); color: var(--petrol); border-color: var(--white); } .btn--light:hover { background: var(--tuerkis-20); color: var(--petrol); } .hero__ask { margin-top: 1rem; } .hero__ask .link-arrow .icon { width: 1.2rem; height: 1.2rem; } /* Karte */ .map { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; } @media (min-width: 60rem) { .map { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } .map__stage { position: relative; } .map__svg { width: 100%; height: auto; overflow: visible; } .map__shadow { fill: var(--petrol); opacity: .12; } .map__sb { fill: url(#map-hatch); stroke: url(#map-hatch); stroke-width: 2; } .map__cell path { fill: var(--white); stroke: var(--tuerkis-20); stroke-width: 5; stroke-linejoin: round; transition: fill .25s var(--ease); } .section:not(.section--tint) .map__cell path { stroke: var(--white); fill: var(--tuerkis-20); } .js .map__cell { cursor: pointer; } .js .map__cell:hover path { fill: var(--tuerkis-60); } .map__svg .map__cell.is-active path, .js .map__cell.is-active:hover path { fill: var(--petrol); } .map__river { fill: none; stroke: var(--tuerkis); stroke-width: 7; stroke-linecap: round; opacity: .85; pointer-events: none; } .map__label { pointer-events: none; } .map__label circle { fill: var(--orange); stroke: var(--white); stroke-width: 2; } .map__label text, .map__sblabel text { font: 800 15px/1 var(--sans); fill: var(--petrol); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 4px; stroke-linejoin: round; } .map__sblabel text { text-anchor: start; fill: var(--muted); font-weight: 700; } .map__sblabel .map__small, .map__rivername { font: italic 400 12px/1 var(--serif); fill: var(--muted); stroke: none; } .map__rivername { font-size: 15px; fill: #1e7c86; } .map__label.is-active text { fill: var(--white); stroke: var(--petrol); } @media (prefers-reduced-motion: no-preference) { .map__label.is-active circle { animation: pulse 1.6s var(--ease) infinite; transform-box: fill-box; transform-origin: center; } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } .map__hint { display: flex; gap: .5rem; align-items: center; color: var(--muted); margin-bottom: 1rem; } .map__hint .icon { color: var(--orange); } .map__list { list-style: none; padding: 0; display: grid; gap: .4rem; } .map__btn { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: var(--white); border: 0; border-left: 3px solid var(--tuerkis); font-weight: 800; font-size: 1.05rem; color: var(--petrol); cursor: pointer; text-align: left; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .section:not(.section--tint) .map__btn { background: var(--tuerkis-20); } .map__btn:hover, .map__btn[aria-expanded="true"] { border-left-color: var(--orange); } .map__btn[aria-expanded="true"] { background: var(--petrol); color: var(--white); --focus: var(--orange); } .map__btn .icon { flex: none; } .map__detail { padding: .9rem 1rem 1.1rem; background: var(--white); border-left: 3px solid var(--orange); display: grid; gap: .45rem; font-size: .975rem; } .js .map__detail { display: none; } .js .map__item.is-open .map__detail { display: grid; } html:not(.js) .map__btn { cursor: default; } .map__name { font-weight: 800; color: var(--petrol); font-size: 1.1rem; } .map__ov { color: var(--muted); font-size: .9rem; } .map__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; } .vorort-list { margin-top: 2.5rem; } /* Aus den Ortsverbänden */ .ovnews { list-style: none; padding: 0; display: grid; gap: 1.25rem; } @media (min-width: 60rem) { .ovnews { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; } .ovcard--lead { grid-row: span 2; } } .ovcard { position: relative; display: grid; gap: .65rem; align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--tuerkis-20); border-left: 4px solid var(--orange); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .ovcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .ovcard--lead { background: var(--petrol); color: var(--white); --focus: var(--white); } .ovcard__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .9rem; } .ovcard__tag { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; background: var(--white); color: var(--petrol); padding: .25rem .55rem; } .ovcard__tag .icon { width: 1rem; height: 1rem; color: var(--orange); } .ovcard__title { font-size: var(--fs-h3); line-height: 1.25; } .ovcard--lead .ovcard__title { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); color: var(--white); } .ovcard__title a { color: inherit; text-decoration: none; } .ovcard__title a::after { content: ""; position: absolute; inset: 0; } .ovcard__title a:hover { text-decoration: underline; } .ovcard__dates { list-style: none; padding: 0; display: grid; gap: .4rem; margin-top: .4rem; } .ovcard__dates li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem; padding: .55rem .75rem; background: rgba(255, 255, 255, .1); border-left: 3px solid var(--orange); font-size: .95rem; } .ovcard__dates time { font-weight: 800; } @media (max-width: 30rem) { .ovcard__dates li { grid-template-columns: 1fr; gap: .1rem; } } .ovcard__more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--petrol); margin-top: .25rem; } .ovcard--lead .ovcard__more { color: var(--white); } .ovcard__more .icon { width: 1rem; height: 1rem; } /* Mitglied werden */ .cta-member { background: var(--petrol); color: var(--white); padding-block: clamp(3rem, 2rem + 3vw, 5rem); position: relative; overflow: hidden; --focus: var(--white); } .cta-member::after { content: ""; position: absolute; right: -6rem; bottom: -6rem; width: 22rem; height: 22rem; border-radius: 50%; border: 3rem solid rgba(82, 183, 193, .18); pointer-events: none; } .cta-member__inner { position: relative; z-index: 1; display: grid; gap: 2rem 4rem; align-items: center; } @media (min-width: 60rem) { .cta-member__inner { grid-template-columns: 1.4fr 1fr; } } .cta-member .hl--bar .hl__title > span { background: var(--white); color: var(--petrol); } .cta-member .hl__sub > span { background: transparent; color: var(--white); padding-inline: 0; } .reasons { list-style: none; padding: 0; display: grid; gap: .8rem; font-size: 1.1rem; } .reasons li { display: flex; gap: .75rem; align-items: flex-start; } .reasons .icon { color: var(--orange); margin-top: .25rem; width: 1.4rem; height: 1.4rem; } .cta-member__actions { display: grid; gap: .75rem; justify-items: stretch; max-width: 24rem; } .cta-member__note { font-size: .9rem; opacity: .9; } /* Frage */ .ask { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); } .qbox { background: var(--white); border-top: 4px solid var(--orange); box-shadow: var(--shadow); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: 1.25rem; } .qbox__head { display: flex; gap: 1rem; align-items: flex-start; } .qbox__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-bottom: .25rem; } /* Mobile Handlungsleiste */ .sticky-cta { display: none; } @media (max-width: 47.99rem) { .js .sticky-cta { display: grid; grid-template-columns: 1fr 1.3fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(16, 85, 105, .6); padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom)); gap: .4rem; transform: translateY(110%); transition: transform .35s var(--ease); } .js .sticky-cta.is-visible { transform: none; } .sticky-cta a { display: grid; justify-items: center; gap: .15rem; padding: .45rem .25rem; font-size: .8rem; font-weight: 800; color: var(--petrol); text-decoration: none; border-radius: var(--radius); } .sticky-cta .icon { width: 1.3rem; height: 1.3rem; } .sticky-cta__main { background: var(--orange); color: var(--ink) !important; } .js body { padding-bottom: 4.5rem; } } /* Kandidat: Weg, Steckbrief, Versprechen, Themen-Zitate */ .split--even { grid-template-columns: 1fr; } @media (min-width: 60rem) { .split--even { grid-template-columns: 1fr 1.2fr; } } .story { display: grid; gap: 1.1rem; font-size: 1.15rem; max-width: 40rem; } .story p + p { margin-top: 0; } .story__hl { font: italic 400 1.35rem/1.45 var(--serif); color: var(--petrol); border-left: 4px solid var(--orange); padding-left: 1.1rem; } .factbox { background: var(--tuerkis-20); border-top: 4px solid var(--petrol); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); display: grid; gap: 1rem; } .factbox__title { font-size: 1.5rem; } .pledge { background: var(--petrol); color: var(--white); padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); --focus: var(--white); } .pledge__label { font-weight: 800; font-size: 1rem; letter-spacing: .02em; border-left: 3px solid var(--orange); padding-left: .6rem; margin-bottom: 1.25rem; } .pledge__lead { color: var(--white); font-size: clamp(1.8rem, 1.1rem + 3vw, 3.4rem); line-height: 1.12; max-width: 56rem; } .pledge__list { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } @media (min-width: 56rem) { .pledge__list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } .pledge__list li { display: grid; gap: .6rem; align-content: start; padding: 1.4rem 1.4rem 1.6rem; background: rgba(255, 255, 255, .07); border-top: 3px solid var(--orange); font-size: 1.15rem; font-weight: 700; line-height: 1.4; } .pledge__nr { font-weight: 800; font-size: 1.6rem; color: var(--tuerkis); } .pledge__principle { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: 48rem; font: italic 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.5 var(--serif); } .theme__quote { margin-top: .4rem; padding: .9rem 1rem .9rem 2.6rem; background: var(--tuerkis-20); position: relative; font-weight: 700; color: var(--petrol); font-size: 1rem; line-height: 1.45; } .theme__quote::before { content: "„"; position: absolute; left: .6rem; top: -.55rem; font: 800 3rem/1 var(--sans); color: var(--orange); } .duo__card--toscani { padding: 0; overflow: hidden; } .duo__visual img { width: 100%; aspect-ratio: 1438 / 678; object-fit: cover; } .duo__body { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: grid; gap: .9rem; } @media (max-width: 40rem) { .map__label text { font-size: 25px; stroke-width: 6px; } .map__sblabel text { font-size: 21px; } .map__sblabel .map__small { display: none; } .map__label circle { r: 8px; } .map__rivername { font-size: 22px; } } /* ========================================================= 1.2 – Bühne (Startseite oben): steigende Balken aus dem CDU-Logo ========================================================= */ .stage { position: relative; isolation: isolate; overflow: hidden; background: var(--petrol); color: var(--white); --focus: var(--white); } .stage__inner { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem); padding-block: clamp(2.75rem, 1.5rem + 5vw, 6.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: end; } @media (min-width: 64rem) { .stage__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); min-height: min(46rem, calc(100svh - 9rem)); } } /* Die drei Balken des Logos, groß und transparent – sie „steigen“ beim Laden */ .stage__bars { position: absolute; z-index: 0; right: 0; bottom: 0; width: min(64vw, 60rem); height: 100%; display: flex; align-items: flex-end; gap: clamp(.6rem, 1.4vw, 1.4rem); padding-right: clamp(1rem, 3vw, 3rem); pointer-events: none; } .stage__bar { flex: 1; display: block; background: var(--tuerkis); transform-origin: 50% 100%; } .stage__bar--1 { height: 56%; opacity: .16; } .stage__bar--2 { height: 76%; opacity: .22; } .stage__bar--3 { height: 96%; opacity: .3; } @media (max-width: 63.99rem) { .stage__bars { width: 100%; height: 58%; padding-right: 0; } } .stage__top { font: italic 400 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.3 var(--serif); color: var(--tuerkis-60); margin-bottom: 1.25rem; } .stage__title { color: var(--white); font-size: clamp(2.4rem, 1rem + 4.2vw, 3.9rem); line-height: 1.04; letter-spacing: -.015em; display: grid; gap: .1em; justify-items: start; text-wrap: initial; } .stage__line { display: block; overflow: hidden; padding-bottom: .04em; } .stage__line > span { display: inline-block; background: var(--white); color: var(--petrol); padding: .02em .26em .08em; } .stage__sub { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); max-width: 33rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .92); } .stage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; } .stage__ask { display: inline-flex; align-items: center; gap: .5rem; color: var(--white); font-weight: 700; text-decoration: none; padding: .5rem .25rem; border-bottom: 2px solid var(--orange); } .stage__ask:hover { color: var(--white); border-bottom-color: var(--white); } .stage__media { position: relative; align-self: end; } .stage__photo { position: relative; overflow: hidden; background: var(--petrol-dark); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); } .stage__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--orange); } .stage__img { width: 100%; aspect-ratio: 978 / 486; object-fit: cover; } @media (min-width: 64rem) { .stage__img { aspect-ratio: 4 / 2.55; object-position: 50% 30%; } } .stage__cap { position: relative; margin-top: -2.4rem; margin-left: clamp(-1rem, -1.5vw, -.5rem); max-width: 26rem; } .stage__cap a { display: grid; gap: .2rem; background: var(--white); color: var(--petrol); text-decoration: none; padding: .9rem 1.2rem 1rem; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .55); --focus: var(--orange); } .stage__capline { font-weight: 800; font-size: 1.2rem; line-height: 1.2; } .stage__capsub { font: 400 .95rem/1.4 var(--serif); color: var(--ink); } .stage__cap a:hover .stage__capline { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } .stage__count { position: relative; z-index: 2; background: var(--petrol-dark); border-top: 1px solid rgba(255, 255, 255, .12); } .stage__countinner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; padding-block: 1rem; } .stage__count p { font-size: 1.05rem; } .stage__count strong { color: var(--orange); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; } .stage__countlink { display: inline-flex; align-items: center; gap: .4rem; color: var(--white); font-weight: 700; text-decoration: none; } .stage__countlink .icon { width: 1.1rem; height: 1.1rem; transition: transform .2s var(--ease); } .stage__countlink:hover { color: var(--white); } .stage__countlink:hover .icon { transform: translateX(3px); } /* Ein orchestrierter Auftritt beim Laden – nur ohne Bewegungsreduktion */ @media (prefers-reduced-motion: no-preference) { .stage__bar { animation: bar-rise 1.1s cubic-bezier(.2, .8, .2, 1) both; } .stage__bar--1 { animation-delay: .05s; } .stage__bar--2 { animation-delay: .18s; } .stage__bar--3 { animation-delay: .31s; } .stage__top { animation: fade-in .6s var(--ease) .2s both; } .stage__line > span { animation: line-up .8s cubic-bezier(.2, .8, .2, 1) both; } .stage__line:nth-child(1) > span { animation-delay: .35s; } .stage__line:nth-child(2) > span { animation-delay: .47s; } .stage__line:nth-child(3) > span { animation-delay: .59s; } .stage__line .dot { display: inline-block; animation: pop .45s var(--ease) 1.25s both; } .stage__sub, .stage__actions { animation: fade-up .7s var(--ease) .85s both; } .stage__photo { animation: photo-reveal 1.2s cubic-bezier(.65, 0, .25, 1) .25s both; } .stage__img { animation: photo-zoom 1.8s cubic-bezier(.2, .8, .2, 1) .25s both; } .stage__cap { animation: fade-up .7s var(--ease) 1.15s both; } .stage__count { animation: fade-in .8s var(--ease) 1.3s both; } /* Leichte Tiefenwirkung beim Scrollen (scroll-getriebene Animation, wo unterstützt) */ @supports (animation-timeline: scroll()) { .stage__bars { animation: drift-bars linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } .stage__media { animation: drift-media linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } } } @keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes line-up { from { transform: translateY(105%); } to { transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes photo-reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes photo-zoom { from { transform: scale(1.12); } to { transform: scale(1); } } @keyframes drift-bars { to { transform: translateY(14%); } } @keyframes drift-media { to { transform: translateY(-5%); } } /* Headline skaliert mit ihrer Spalte (Container Queries) – kein Überlappen mit dem Foto */ .stage__text { container-type: inline-size; min-width: 0; } .stage__title { font-size: clamp(2.3rem, 9.3cqi, 3.9rem); } /* Kopfzeile zwischen Tablet und kleinem Desktop kompakter */ @media (min-width: 64rem) and (max-width: 80rem) { .nav { gap: 1rem; } .nav__list { gap: .25rem .9rem; } .nav__list a { font-size: .9rem; } .brand__box .logo { width: 5.75rem; } .brand__name { font-size: .95rem; } } @media (min-width: 64rem) and (max-width: 72rem) { .nav__list { gap: .25rem .7rem; } .nav__list a { font-size: .875rem; } .brand__name { display: none; } } /* 1.3 – Land und Bund */ .party-strip { display: grid; gap: 0 2.5rem; } @media (min-width: 60rem) { .party-strip { grid-template-columns: 1fr 1fr; } } .party-strip__more { margin-top: .9rem; font-size: .95rem; } .ticks--lg li { font-size: 1.1rem; padding-block: .35rem; } .linklist { list-style: none; padding: 0; display: grid; gap: .7rem; } .linklist .link-arrow { align-items: flex-start; } .linklist .icon { margin-top: .25rem; } .linklist .link-arrow { display: inline; } .linklist .link-arrow .icon { display: inline; width: 1rem; height: 1rem; vertical-align: -.15em; margin: 0 0 0 .2rem; } /* ========================================================= 1.4 – Landtagswahl-Übersicht, Kandidatenprofile, Team, Platzhalter ========================================================= */ .ph { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; padding: .3rem .6rem; border: 2px dashed var(--orange); background: #fff6ee; color: #7a3100; font-size: .9rem; font-weight: 600; line-height: 1.4; } p.ph, div.ph { display: flex; margin-block: .5rem; } .ph__k { font-size: .7rem; font-weight: 800; letter-spacing: .04em; background: var(--orange); color: var(--ink); padding: .05rem .35rem; } .ph-photo { display: grid; place-items: center; align-content: center; gap: .5rem; width: 100%; aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, var(--tuerkis-20) 0 14px, #d6ebef 14px 28px); border: 2px dashed var(--tuerkis); color: var(--petrol); font-weight: 700; font-size: .9rem; text-align: center; } .ph-photo svg { width: 42%; max-width: 9rem; fill: var(--tuerkis-60); } .ph-photo--hero { max-width: 30rem; } .ph-photo--round { width: 9rem; height: 9rem; aspect-ratio: 1; border-radius: 50%; font-size: .75rem; margin-bottom: .75rem; } .ph-photo--round svg { width: 50%; } .ph-photo--round span { display: none; } .crumbs { padding-block: 1rem 0; font-size: .9rem; color: var(--muted); } .crumbs a { color: var(--petrol); font-weight: 700; } .ltw-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--petrol); color: var(--white); --focus: var(--white); } .ltw-hero .stage__bars { height: 100%; opacity: .9; } .ltw-hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 2rem + 5vw, 6rem); container-type: inline-size; } .ltw-hero .stage__title { font-size: clamp(2.3rem, 6.4cqi, 4.4rem); max-width: 18ch; } .ltw-hero__sub { margin-top: 1rem; font: italic 400 clamp(1.25rem, 1rem + 1vw, 1.8rem)/1.3 var(--serif); } .ltw-hero__intro { margin-top: 1.25rem; max-width: 44rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .92); } .ltw-hero__count { margin-top: 1.5rem; display: inline-block; padding: .55rem .9rem; background: var(--petrol-dark); border-left: 4px solid var(--orange); } .ltw-hero__count strong { color: var(--orange); font-size: 1.25rem; } /* Kandidatenkarten: Gestaltung über Tailwind (assets/css/tailwind.css), .ccards bleibt Hook für die Einblendung */ .cand__also { margin-top: 1.25rem; font-size: .975rem; color: var(--muted); } .cand__also a { font-weight: 700; } .theme--ph { gap: .25rem; } .quote__text--ph { font-size: 1rem; } .chair { display: grid; gap: 1.5rem 2.5rem; align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--tuerkis-20); border-left: 6px solid var(--orange); max-width: 60rem; } @media (min-width: 48rem) { .chair { grid-template-columns: calc(14rem + 16px) 1fr; } } .chair .portrait { width: 10rem; height: 10rem; background: var(--petrol); } .chair__photo, .js .chair__photo[data-reveal] { margin: 0; padding: 8px; overflow: visible; } .js .chair__photo[data-reveal] > .portrait { clip-path: none; transition: none; } .chair__photo img { display: block; } @media (min-width: 48rem) { .chair .portrait { width: 14rem; height: 14rem; } } .chair__name { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); } .chair__role { font: italic 400 1.1rem/1.4 var(--serif); margin: .3rem 0 1rem; } .people--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); } .people--ref { gap: 1.75rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); } .people--ref .portrait { width: 7rem; height: 7rem; box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--petrol); } .people--ref .person__name { font-size: 1rem; } @media (max-width: 30rem) { .people--ref { grid-template-columns: repeat(2, 1fr); } } .person--ph .person__name { font-weight: 600; } .tile--static { cursor: default; } .tile--static:hover { transform: none; border-top-color: var(--petrol); } .chip--ph { border: 0; padding: 0; background: none; } /* ===================================================================== 1.5 – Grundwerte, Ebenen, Kanäle, Motion-Karte ===================================================================== */ /* Überschrift negativ (auf Petrol) */ .hl--neg .hl__title > span { background: var(--white); color: var(--petrol); padding: .04em .3em .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* --- Aus den Ortsverbänden: 4 Verbände --- */ @media (min-width: 60rem) { .ovnews { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; } .ovcard--lead { grid-row: auto; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 3rem; } .ovcard--lead > :not(.ovcard__dates) { grid-column: 1; } .ovcard--lead .ovcard__dates { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; } } .ovnews__from { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .95rem; margin: -.5rem 0 1.25rem; } .ovnews__from .icon { color: var(--orange); } .ovmore { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--tuerkis-60); } .ovmore__title { font-weight: 800; color: var(--petrol); margin-bottom: .75rem; } .ovmore__list { list-style: none; padding: 0; display: grid; gap: .5rem; } @media (min-width: 48rem) { .ovmore__list { grid-template-columns: 1fr 1fr; gap: .5rem 2rem; } } .ovmore__list li { display: grid; grid-template-columns: auto auto 1fr; gap: .3rem .75rem; align-items: baseline; font-size: .975rem; } .ovmore__tag { font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--petrol); background: var(--tuerkis-20); padding: .15rem .45rem; } .ovmore__list time { color: var(--muted); font-size: .85rem; } .ovmore__list a { font-weight: 700; text-decoration: none; } .ovmore__list a:hover { text-decoration: underline; } .ovmore__list .icon { display: inline; width: .9rem; height: .9rem; vertical-align: -.1em; } /* --- Grundwerte --- */ .werte { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: w; } .wcard { position: relative; } .wcard__link { position: relative; height: 100%; display: grid; gap: .55rem; align-content: start; padding: 1.5rem 1.4rem 1.4rem; background: var(--tuerkis-20); border-top: 4px solid var(--petrol); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease); } .section--tint .wcard__link { background: var(--white); } .wcard--menschenbild .wcard__link { background: var(--petrol); color: var(--white); border-top-color: var(--orange); --focus: var(--white); } .wcard__link:hover { transform: translateY(-5px); box-shadow: var(--shadow); color: var(--ink); } .wcard--menschenbild .wcard__link:hover { color: var(--white); } .wcard__nr { position: absolute; right: .9rem; top: .4rem; font-weight: 800; font-size: 3.5rem; line-height: 1; color: var(--petrol); opacity: .1; } .wcard--menschenbild .wcard__nr { color: var(--white); opacity: .16; } .wicon { width: 3.25rem; height: 3.25rem; color: var(--petrol); } .wcard--menschenbild .wicon { color: var(--orange); } .wcard__kicker { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .wcard--menschenbild .wcard__kicker { color: var(--tuerkis-60); } .wcard__title { font-weight: 800; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.2; color: var(--petrol); hyphens: auto; -webkit-hyphens: auto; } .wcard--menschenbild .wcard__title { color: var(--white); } .wcard__text { font-size: 1rem; } .wcard__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-weight: 700; color: var(--petrol); } .wcard--menschenbild .wcard__more { color: var(--white); } .wcard__more .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); } .wcard__link:hover .wcard__more .icon { transform: translateX(4px); } @media (min-width: 72rem) { .werte { grid-template-columns: 1.25fr 1fr 1fr 1fr; } } .compass { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; } .compass__title { font-weight: 800; color: var(--petrol); } .compass__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .compass__list li { padding: .35rem .8rem; border: 2px solid var(--tuerkis-60); font-weight: 700; font-size: .95rem; color: var(--petrol); background: var(--white); } .werte__src { margin-top: 1rem; color: var(--muted); font-size: .875rem; } /* Draw-on der Wert-Symbole */ @media (prefers-reduced-motion: no-preference) { .wicon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; } .js .wcard.is-pre .wicon [pathLength] { stroke-dashoffset: 1; } .js .wcard .wicon [pathLength] { transition: stroke-dashoffset 1.2s var(--ease) .2s; } .wcard__link:hover .wicon [pathLength] { animation: draw 1s var(--ease); } } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* Grundwert-Detailseite */ .wert-hero { background: var(--tuerkis-20); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); overflow: hidden; } .wert-hero__inner { display: grid; gap: 2rem 4rem; align-items: center; } @media (min-width: 60rem) { .wert-hero__inner { grid-template-columns: 1.6fr 1fr; } } .wert-hero__mark { position: relative; justify-self: center; display: grid; place-items: center; width: min(20rem, 70vw); aspect-ratio: 1; border-radius: 50%; background: var(--petrol); color: var(--white); } .wert-hero__mark::before { content: ""; position: absolute; inset: -1.25rem; border-radius: 50%; border: 2px dashed var(--tuerkis); } .wert-hero__nr { position: absolute; top: 12%; font-weight: 800; font-size: 1.1rem; letter-spacing: .1em; color: var(--tuerkis-60); } .wicon--xl { width: 55%; height: 55%; color: var(--white); stroke-width: 2; } .wert-hero--menschenbild .wicon--xl { color: var(--orange); } @media (prefers-reduced-motion: no-preference) { .wicon--xl [pathLength] { stroke-dasharray: 1; animation: draw 1.8s var(--ease) .3s both; } .wert-hero__mark::before { animation: spin 40s linear infinite; } } @keyframes spin { to { transform: rotate(360deg); } } .wert-quote { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); } .wquote { position: relative; padding: 3.75rem 0 0 clamp(1.5rem, 1rem + 2vw, 3rem); border-left: 4px solid var(--orange); } .wquote::before { content: "„"; position: absolute; left: clamp(1.5rem, 1rem + 2vw, 3rem); top: -2.9rem; font: 400 6rem/1 var(--serif); color: var(--tuerkis); } .wquote blockquote { margin: 0; } .wquote p { font: italic 400 clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem)/1.35 var(--serif); color: var(--petrol); } .wquote figcaption { margin-top: 1rem; font-size: .95rem; color: var(--muted); } .wsteps { list-style: none; padding: 0; display: grid; gap: 1.25rem; } @media (min-width: 48rem) { .wsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wstep { position: relative; padding: 1.5rem 1.5rem 1.6rem 4.5rem; background: var(--tuerkis-20); border-top: 3px solid var(--petrol); } .wstep__nr { position: absolute; left: 1.25rem; top: 1.35rem; font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--orange); } .wstep__title { font-size: var(--fs-h3); margin-bottom: .5rem; } .wert-local { border-top: 4px solid var(--orange); } .wert-local .infobox__title { display: flex; gap: .5rem; align-items: center; } .wert-local .infobox__title .icon { color: var(--orange); } .wnav { background: var(--tuerkis-20); padding: 1.5rem; } .wnav__title { font-weight: 800; color: var(--petrol); margin-bottom: .75rem; } .wnav ul { list-style: none; padding: 0; display: grid; gap: .5rem; } .wnav__link { display: flex; gap: .9rem; align-items: center; padding: .6rem .8rem; background: var(--white); border-left: 3px solid var(--tuerkis); text-decoration: none; font-weight: 800; color: var(--petrol); transition: border-color .2s var(--ease), transform .2s var(--ease); } .wnav__link:hover { border-left-color: var(--orange); transform: translateX(3px); } .wnav__link.is-current { background: var(--petrol); color: var(--white); border-left-color: var(--orange); --focus: var(--orange); } .wnav__link .wicon { width: 2.25rem; height: 2.25rem; color: currentColor; } .wnav__link small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; opacity: .8; } /* --- Aktuelles nach Ebenen --- */ .levels__bar { display: none; } .has-filter .levels__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.25rem; } .levels__legend { font-weight: 700; color: var(--muted); font-size: .95rem; } .levels__tabs { display: flex; flex-wrap: wrap; gap: .4rem; } .levels__tab { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .35rem .9rem; border: 2px solid var(--petrol); background: var(--white); color: var(--petrol); font-weight: 800; cursor: pointer; border-radius: 999px; transition: background-color .2s var(--ease), color .2s var(--ease); } .levels__tab .lvl__glyph { width: 1.25rem; height: 1.25rem; } .levels__tab[aria-pressed="true"] { background: var(--petrol); color: var(--white); --focus: var(--orange); } .levels__grid { display: grid; gap: 1.25rem; } @media (min-width: 62rem) { .levels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .is-filtered .levels__grid { grid-template-columns: minmax(0, 1fr); max-width: 48rem; } } .lvl { --lc: var(--petrol); --lt: var(--white); display: flex; flex-direction: column; background: var(--white); box-shadow: var(--shadow); } .lvl--land { --lc: var(--tuerkis); --lt: var(--ink); } .lvl--bund { --lc: var(--ink); --lt: var(--white); } .lvl__head { position: relative; display: flex; gap: .9rem; align-items: center; padding: 1.1rem 1.25rem 1.2rem; background: var(--lc); color: var(--lt); } .lvl__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--orange); transform-origin: left; } .lvl--land .lvl__head::after { background: var(--petrol); } .lvl__glyph { width: 2.6rem; height: 2.6rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; } .lvl__glyph circle { opacity: .35; } .lvl__glyph .is-in { opacity: .6; } .lvl__glyph .is-on { opacity: 1; stroke: var(--orange); stroke-width: 3; } .lvl--land .lvl__glyph .is-on { stroke: var(--petrol); } .levels__tab .lvl__glyph .is-on { stroke: var(--orange); } .lvl__level { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; opacity: .9; } .lvl__title { color: inherit; font-size: 1.3rem; line-height: 1.15; } .lvl__title .dot { color: var(--orange); } .lvl--land .lvl__title .dot { color: var(--petrol); } .lvl__sub { font-size: .875rem; opacity: .9; } .lvl__list { list-style: none; padding: .5rem 1.25rem 0; display: grid; flex: 1; align-content: start; } .lvl__item { position: relative; padding: .9rem 0 .9rem 1rem; border-bottom: 1px solid var(--line); } .lvl__item::before { content: ""; position: absolute; left: 0; top: 1.05rem; bottom: 1.05rem; width: 3px; background: var(--lc); } .lvl__item:last-child { border-bottom: 0; } .lvl__meta { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .2rem .6rem; } .lvl__cat { font-weight: 800; color: var(--petrol); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; } .lvl__itemtitle { font-size: 1.05rem; line-height: 1.35; margin-top: .2rem; } .lvl__item--top .lvl__itemtitle { font-size: 1.2rem; } .lvl__itemtitle a { color: var(--petrol); text-decoration: none; } .lvl__itemtitle a:hover { text-decoration: underline; } .lvl__itemtitle .icon { display: inline; width: .9rem; height: .9rem; vertical-align: -.05em; } .lvl__text { margin-top: .35rem; font-size: .95rem; } .lvl__more { padding: .9rem 1.25rem 1.2rem; margin-top: auto; font-size: .95rem; } .lvl .empty { padding: 1rem 1.25rem; } @media (prefers-reduced-motion: no-preference) { .js .lvl.is-pre .lvl__head::after { transform: scaleX(0); } .lvl__head::after { transition: transform .9s var(--ease) .25s; } .js .lvl.is-pre .lvl__item { opacity: 0; transform: translateY(10px); } .lvl__item { transition: opacity .5s var(--ease), transform .5s var(--ease); } .lvl__item:nth-child(2) { transition-delay: .12s; } .lvl__item:nth-child(3) { transition-delay: .24s; } } /* --- Bleibt in Verbindung --- */ .section--connect { background: var(--petrol-dark); color: var(--white); position: relative; overflow: hidden; --focus: var(--white); } .section--connect::before { content: ""; position: absolute; left: -10rem; top: -10rem; width: 30rem; height: 30rem; border-radius: 50%; border: 4rem solid rgba(82, 183, 193, .12); pointer-events: none; } .connect { position: relative; display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; } @media (min-width: 56rem) { .connect__intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 3rem; align-items: center; } .connect__intro .orbit { grid-column: 2; grid-row: 1 / span 2; margin: 0; justify-self: center; } } .connect__lead { margin-top: 1rem; font-size: 1.1rem; max-width: 30rem; } .orbit { position: relative; width: 20rem; max-width: 100%; aspect-ratio: 320 / 192; margin-top: 2rem; } .orbit__path { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--tuerkis); stroke-width: 1.5; stroke-dasharray: 4 6; overflow: visible; } .orbit__inner { stroke: rgba(255, 255, 255, .25); stroke-dasharray: 2 6; } .orbit__core { position: absolute; left: 50%; top: 50%; width: 7.25rem; height: 7.25rem; margin: -3.625rem 0 0 -3.625rem; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 0 0 .6rem rgba(255, 255, 255, .12); } .orbit__core img { width: 78%; height: auto; } .orbit__node { position: absolute; left: 0; top: 0; offset-path: path("M160 16 A144 80 0 1 1 159.99 16 Z"); offset-rotate: 0deg; offset-anchor: center; } .orbit__node--1 { offset-distance: 0%; } .orbit__node--2 { offset-distance: 25%; } .orbit__node--3 { offset-distance: 50%; } .orbit__node--4 { offset-distance: 75%; } @supports not (offset-path: path("M0 0")) { .orbit__node { display: none; } } @media (max-width: 22rem) { .orbit { display: none; } } .onode { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--white); color: var(--petrol); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); } .onode .icon, .onode img { width: 1.5rem; height: 1.5rem; } .onode--whatsapp, .onode--mail { background: var(--orange); color: var(--ink); } @media (prefers-reduced-motion: no-preference) { .orbit__node { animation: orbit 28s linear infinite; } .orbit__node--2 { animation-delay: -7s; } .orbit__node--3 { animation-delay: -14s; } .orbit__node--4 { animation-delay: -21s; } .orbit:hover .orbit__node { animation-play-state: paused; } .orbit__core { animation: breathe 5s var(--ease) infinite; } } @keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } } @keyframes breathe { 50% { box-shadow: 0 0 0 1.1rem rgba(255, 255, 255, .08); } } .channels { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); } @media (min-width: 60rem) { .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .chan { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem; background: var(--white); color: var(--ink); --focus: var(--petrol); border-radius: 14px; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .5); overflow: hidden; transition: transform .35s var(--ease); } .chan:hover { transform: translateY(-6px) rotate(-.4deg); } .chan::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--petrol); } .chan--ig::before { background: linear-gradient(90deg, var(--petrol), var(--tuerkis)); } .chan--wa::before { background: var(--orange); } .chan__head { display: flex; gap: .8rem; align-items: center; } .chan__logo { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--petrol); color: var(--white); flex: none; } .chan__logo .icon { width: 1.7rem; height: 1.7rem; } .chan__logo--file { background: transparent; } .chan__logo--file img { width: 3.25rem; height: 3.25rem; } .chan--wa .chan__logo { background: var(--orange); color: var(--ink); } .chan__title { font-size: 1.25rem; color: var(--petrol); } .chan__handle { font: 400 1rem/1.3 var(--serif); color: var(--muted); } .chan__text { font-size: .975rem; } .chan__cta { margin-top: auto; align-self: flex-start; } .chan__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 10px; overflow: hidden; } .chan__tile { display: block; aspect-ratio: 1; overflow: hidden; background: var(--tuerkis-20); } .chan__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .chan__tile--b img { object-position: 30% 50%; } .chan:hover .chan__tile img { transform: scale(1.08); } .chan__stack { list-style: none; padding: 0; display: grid; gap: .45rem; } .chan__stack li > span:last-child { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .chan__stack li { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; background: var(--tuerkis-20); border-radius: 10px; font-size: .9rem; line-height: 1.35; } .chan__stack strong { display: block; color: var(--petrol); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; } .chan__avatar { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--petrol); color: var(--white); flex: none; } .chan__avatar .icon { width: 1rem; height: 1rem; } .wachat { display: grid; gap: .5rem; padding: .9rem; border-radius: 10px; background: var(--tuerkis-20); } .wachat__bubble { max-width: 90%; padding: .55rem .75rem; font-size: .9rem; line-height: 1.4; border-radius: 12px; } .wachat__bubble strong { display: block; font-size: .75rem; color: var(--petrol); } .wachat__bubble--in { background: var(--white); border-top-left-radius: 2px; justify-self: start; } .wachat__bubble--out { background: var(--petrol); color: var(--white); border-top-right-radius: 2px; justify-self: end; font-weight: 700; } .wachat__typing { display: none; } @media (prefers-reduced-motion: no-preference) { /* Stagger/Pop beim Erscheinen der Szene */ .connect.is-armed:not(.is-live) .chan { opacity: 0; transform: translateY(40px) scale(.96); } .connect.is-armed .chan { transition: opacity .7s var(--ease), transform .8s cubic-bezier(.34, 1.56, .64, 1); } .connect.is-armed .chan:nth-child(2) { transition-delay: .15s; } .connect.is-armed .chan:nth-child(3) { transition-delay: .3s; } .connect.is-live .chan:hover { transition-delay: 0s; } .connect.is-armed:not(.is-live) .orbit { opacity: 0; transform: scale(.8); } .connect.is-armed .orbit { transition: opacity .8s var(--ease), transform 1s cubic-bezier(.34, 1.56, .64, 1); } /* Instagram: Kacheln poppen nacheinander */ .connect.is-live .chan__tile { animation: tile-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; } .connect.is-live .chan__tile:nth-child(1) { animation-delay: .5s; } .connect.is-live .chan__tile:nth-child(2) { animation-delay: .6s; } .connect.is-live .chan__tile:nth-child(3) { animation-delay: .7s; } .connect.is-live .chan__tile:nth-child(4) { animation-delay: .8s; } .connect.is-live .chan__tile:nth-child(5) { animation-delay: .9s; } .connect.is-live .chan__tile:nth-child(6) { animation-delay: 1s; } .connect.is-live .chan__shot img { animation: shot-scroll 9s ease-in-out 1.2s infinite alternate; } /* Facebook: Beiträge stapeln sich */ .connect.is-live .chan__stack li { animation: stack-in .6s cubic-bezier(.34, 1.56, .64, 1) both; } .connect.is-live .chan__stack li:nth-child(1) { animation-delay: .7s; } .connect.is-live .chan__stack li:nth-child(2) { animation-delay: .85s; } .connect.is-live .chan__stack li:nth-child(3) { animation-delay: 1s; } /* WhatsApp: Nachricht – Tippen – Antwort */ .connect.is-live .wachat__bubble--in { animation: bubble .5s cubic-bezier(.34, 1.56, .64, 1) .9s both; } .connect.is-live .wachat__typing { display: inline-flex; justify-self: end; gap: 4px; padding: .6rem .8rem; background: var(--white); border-radius: 12px; animation: typing-life 1.6s linear 1.5s both; } .wachat__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--petrol); animation: blink 1s infinite; } .wachat__typing span:nth-child(2) { animation-delay: .15s; } .wachat__typing span:nth-child(3) { animation-delay: .3s; } .connect.is-live .wachat__bubble--out { animation: bubble .5s cubic-bezier(.34, 1.56, .64, 1) 3.1s both; } } @keyframes tile-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } @keyframes stack-in { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes bubble { from { opacity: 0; transform: scale(.4) translateY(8px); transform-origin: left bottom; } to { opacity: 1; transform: none; } } @keyframes typing-life { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; height: 0; padding: 0; margin: -.25rem 0; } } @keyframes blink { 50% { opacity: .25; } } /* --- Karte: Map → Route (Zellen, Fluss, Pins, Verbindung, Badge) --- */ .map__badge { position: absolute; left: 0; top: 0; z-index: 2; display: flex; gap: .6rem; align-items: center; padding: .55rem .9rem .55rem .6rem; background: var(--white); border-left: 4px solid var(--orange); box-shadow: var(--shadow); font-size: .82rem; line-height: 1.25; font-weight: 700; color: var(--petrol); } .map__badge strong { display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--petrol); color: var(--white); font-size: 1.35rem; font-variant-numeric: tabular-nums; } .map__route { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; pointer-events: none; opacity: .9; } .map__routemask { fill: none; stroke: #fff; stroke-width: 12; } .map__traveller { display: none; fill: var(--orange); stroke: var(--white); stroke-width: 2.5; pointer-events: none; } .map__halo { fill: var(--orange) !important; opacity: 0; stroke: none !important; transform-box: fill-box; transform-origin: center; } .map__cell { transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; } .js .map__cell:hover { transform: translateY(-3px); } @media (prefers-reduced-motion: no-preference) { .map.is-armed:not(.is-live) .map__cell path, .map.is-armed:not(.is-live) .map__label, .map.is-armed:not(.is-live) .map__badge, .map.is-armed:not(.is-live) .map__sblabel, .map.is-armed:not(.is-live) .map__rivername { opacity: 0; } .map.is-armed:not(.is-live) .map__river { stroke-dasharray: 1; stroke-dashoffset: 1; } .map.is-armed:not(.is-live) .map__routemask { stroke-dasharray: 1; stroke-dashoffset: 1; } .map.is-live .map__cell path { animation: cell-in .7s cubic-bezier(.34, 1.56, .64, 1) both; transform-box: fill-box; transform-origin: center; } .map.is-live .map__river { stroke-dasharray: 1; animation: draw 1.2s var(--ease) .5s both; } .map.is-live .map__rivername, .map.is-live .map__sblabel { animation: fade-in .6s var(--ease) 1.2s both; } .map.is-live .map__pin { animation: pin-drop .7s cubic-bezier(.34, 1.56, .64, 1) both; } .map.is-live .map__label text { animation: fade-up .5s var(--ease) both; } .map.is-live .map__halo { animation: halo 1.1s var(--ease) both; } .map.is-live .map__routemask { stroke-dasharray: 1; animation: draw 1.8s var(--ease) 1.9s both; } .map.is-live .map__badge { animation: badge-pop .7s cubic-bezier(.34, 1.56, .64, 1) 1.4s both; } .map.is-live .map__traveller.is-on { display: block; offset-rotate: 0deg; animation: travel 18s linear 3.7s infinite, fade-in .4s linear 3.7s both; } /* Stagger entlang des Rings */ .map.is-live .d1 path, .map.is-live .d1 .map__pin { animation-delay: .00s; } .map.is-live .d1 text { animation-delay: .35s; } .map.is-live .d1 .map__halo { animation-delay: .45s; } .map.is-live .d2 path, .map.is-live .d2 .map__pin { animation-delay: .12s; } .map.is-live .d2 text { animation-delay: .47s; } .map.is-live .d2 .map__halo { animation-delay: .57s; } .map.is-live .d3 path, .map.is-live .d3 .map__pin { animation-delay: .24s; } .map.is-live .d3 text { animation-delay: .59s; } .map.is-live .d3 .map__halo { animation-delay: .69s; } .map.is-live .d4 path, .map.is-live .d4 .map__pin { animation-delay: .36s; } .map.is-live .d4 text { animation-delay: .71s; } .map.is-live .d4 .map__halo { animation-delay: .81s; } .map.is-live .d5 path, .map.is-live .d5 .map__pin { animation-delay: .48s; } .map.is-live .d5 text { animation-delay: .83s; } .map.is-live .d5 .map__halo { animation-delay: .93s; } .map.is-live .d6 path, .map.is-live .d6 .map__pin { animation-delay: .60s; } .map.is-live .d6 text { animation-delay: .95s; } .map.is-live .d6 .map__halo { animation-delay: 1.05s; } .map.is-live .d7 path, .map.is-live .d7 .map__pin { animation-delay: .72s; } .map.is-live .d7 text { animation-delay: 1.07s; } .map.is-live .d7 .map__halo { animation-delay: 1.17s; } .map.is-live .d8 path, .map.is-live .d8 .map__pin { animation-delay: .84s; } .map.is-live .d8 text { animation-delay: 1.19s; } .map.is-live .d8 .map__halo { animation-delay: 1.29s; } .map.is-live .d9 path, .map.is-live .d9 .map__pin { animation-delay: .96s; } .map.is-live .d9 text { animation-delay: 1.31s; } .map.is-live .d9 .map__halo { animation-delay: 1.41s; } .map.is-live .map__label.is-active .map__pin { animation: pulse 1.6s var(--ease) infinite; } } @keyframes cell-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } @keyframes pin-drop { 0% { opacity: 0; transform: translateY(-42px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes halo { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } } @keyframes badge-pop { from { opacity: 0; transform: scale(.5) translateY(-10px); } to { opacity: 1; transform: none; } } @keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } } /* Wegweiser im Willkommensgruß */ .ways { margin-top: 1.75rem; } .ways__title { font-weight: 800; color: var(--petrol); margin-bottom: .6rem; font-size: 1rem; } .ways__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .ways__list a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; background: var(--white); border: 2px solid var(--petrol); border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--petrol); transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .ways__list a:hover { background: var(--petrol); color: var(--white); transform: translateY(-2px); } .ways__list .icon { width: 1.05rem; height: 1.05rem; } @media print { .section--connect, .levels__bar, .map__badge { display: none !important; } } @media (max-width: 47.99rem) { .map__badge { position: static; display: inline-flex; margin-bottom: .75rem; } .ovmore__list li { grid-template-columns: auto 1fr; } .ovmore__list a { grid-column: 1 / -1; } } /* ===================================================================== 1.6 – Countdown-Motion, Team-Galerie, Bewegung auf allen Seiten ===================================================================== */ /* --- Countdown --- */ .countdown { position: relative; overflow: hidden; color: var(--white); background: radial-gradient(120% 140% at 85% 10%, #156a80 0%, var(--petrol-dark) 55%, #082f3b 100%); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); --focus: var(--white); isolation: isolate; } .countdown::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 70%, transparent); z-index: -1; } .countdown__bg { position: absolute; right: -2vw; bottom: -.18em; z-index: -1; font: 800 clamp(9rem, 4rem + 22vw, 24rem)/1 var(--sans); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .08); pointer-events: none; user-select: none; } .countdown__inner { display: grid; gap: 2.5rem 3rem; align-items: center; } @media (min-width: 60rem) { .countdown__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } .ctl { grid-column: 1 / -1; } } .countdown__kicker { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); color: var(--tuerkis-60); } .countdown__kicker .icon { color: var(--orange); } .countdown__title { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .1em .25em; margin-top: .75rem; color: var(--white); line-height: 1; } .countdown__pre { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 800; padding-bottom: .35em; width: 100%; } .countdown__unit { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 800; padding-bottom: .12em; } .countdown__unit .dot { color: var(--orange); display: inline-block; } .odo { display: inline-flex; gap: .06em; font-size: clamp(5.2rem, 3rem + 10vw, 11rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; } .odo__d { position: relative; display: inline-block; height: 1.1em; overflow: hidden; padding: 0 .08em; border-radius: .12em; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .1)); box-shadow: inset 0 -.05em 0 var(--orange); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); } .odo__d::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .25); } .odo__strip { display: flex; flex-direction: column; } .odo__strip > span { display: block; height: 1.1em; line-height: 1.1em; text-align: center; } .odo__d--0 .odo__strip { transform: translateY(-50%); } .odo__d--1 .odo__strip { transform: translateY(-55%); } .odo__d--2 .odo__strip { transform: translateY(-60%); } .odo__d--3 .odo__strip { transform: translateY(-65%); } .odo__d--4 .odo__strip { transform: translateY(-70%); } .odo__d--5 .odo__strip { transform: translateY(-75%); } .odo__d--6 .odo__strip { transform: translateY(-80%); } .odo__d--7 .odo__strip { transform: translateY(-85%); } .odo__d--8 .odo__strip { transform: translateY(-90%); } .odo__d--9 .odo__strip { transform: translateY(-95%); } .countdown__sub { margin-top: 1.5rem; max-width: 36rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); } .countdown__sub strong { display: inline-grid; place-items: center; min-width: 2.2em; padding: 0 .3em; border-radius: 999px; background: var(--white); color: var(--petrol); font-weight: 800; } .countdown__sub .dot { color: var(--orange); } .countdown__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .cring { position: relative; justify-self: center; width: min(19rem, 62vw); aspect-ratio: 1; } .cring svg { width: 100%; height: 100%; overflow: visible; } .cring__ticks line { stroke: rgba(255, 255, 255, .28); stroke-width: 1.2; stroke-linecap: round; } .cring__track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 12; } .cring__fill { fill: none; stroke: var(--orange); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(255, 115, 0, .45)); } .cring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .15rem; } .cring__label strong { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .cring__label span { font-size: .95rem; color: var(--tuerkis-60); max-width: 9rem; } .ctl { list-style: none; padding: 1.75rem 0 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; border-top: 1px solid rgba(255, 255, 255, .14); } .ctl::before { content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: calc(1.75rem + .85rem); height: 3px; background: linear-gradient(90deg, var(--white) 0 50%, rgba(255, 255, 255, .25) 50% 100%); border-radius: 3px; transform-origin: left; } .ctl__step { position: relative; display: grid; justify-items: center; text-align: center; gap: .3rem; font-size: .95rem; padding-inline: .5rem; } .ctl__step time, .ctl__when { font-weight: 800; font-size: 1.05rem; } .ctl__step > span:last-child { color: var(--tuerkis-60); } .ctl__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--white); color: var(--petrol); margin-bottom: .4rem; } .ctl__dot .icon { width: 1rem; height: 1rem; } .is-now .ctl__dot { background: var(--orange); box-shadow: 0 0 0 .35rem rgba(255, 115, 0, .25); } .is-goal .ctl__dot { background: var(--petrol-dark); border: 3px solid var(--white); box-shadow: 0 0 0 .3rem rgba(255, 255, 255, .15); } @media (max-width: 34rem) { .ctl { font-size: .85rem; } .ctl__step { font-size: .85rem; } .ctl__step time, .ctl__when { font-size: .92rem; } } @media (prefers-reduced-motion: no-preference) { .countdown.is-armed:not(.is-live) .odo__strip { transform: none; } .countdown.is-armed:not(.is-live) .countdown__main > *, .countdown.is-armed:not(.is-live) .countdown__pre, .countdown.is-armed:not(.is-live) .countdown__unit, .countdown.is-armed:not(.is-live) .cring, .countdown.is-armed:not(.is-live) .ctl__step { opacity: 0; } .countdown.is-armed:not(.is-live) .cring__fill { stroke-dasharray: 0 100; } .countdown.is-armed:not(.is-live) .ctl::before { transform: scaleX(0); } .countdown.is-live .countdown__kicker { animation: fade-up .6s var(--ease) both; } .countdown.is-live .countdown__title, .countdown.is-live .countdown__sub, .countdown.is-live .countdown__actions { opacity: 1; } .countdown.is-live .countdown__pre { animation: fade-up .6s var(--ease) .1s both; } .countdown.is-live .odo__strip { animation: odo-roll 2.1s cubic-bezier(.16, .84, .3, 1.04) both; } .countdown.is-live .odo__p3 .odo__strip { animation-duration: 1.7s; animation-delay: .15s; } .countdown.is-live .odo__p2 .odo__strip { animation-duration: 2s; animation-delay: .25s; } .countdown.is-live .odo__p1 .odo__strip { animation-duration: 2.4s; animation-delay: .35s; } .countdown.is-live .countdown__unit { animation: slide-in .7s cubic-bezier(.34, 1.56, .64, 1) 1.9s both; } .countdown.is-live .countdown__unit .dot { animation: pop .45s var(--ease) 2.5s both; } .countdown.is-live .countdown__sub { animation: fade-up .7s var(--ease) 2.1s both; } .countdown.is-live .countdown__actions { animation: fade-up .7s var(--ease) 2.3s both; } .countdown.is-live .cring { animation: ring-in 1s cubic-bezier(.34, 1.56, .64, 1) .2s both; } .countdown.is-live .cring__fill { animation: ring-draw 2s cubic-bezier(.65, 0, .25, 1) .4s both; } .countdown.is-live .cring__ticks { animation: spin 90s linear infinite; transform-origin: 100px 100px; } .countdown.is-live .ctl::before { animation: line-grow 1.4s cubic-bezier(.65, 0, .25, 1) 1.2s both; } .countdown.is-live .ctl__step { animation: bubble .6s cubic-bezier(.34, 1.56, .64, 1) both; } .countdown.is-live .ctl__step:nth-child(1) { animation-delay: 1.2s; } .countdown.is-live .ctl__step:nth-child(2) { animation-delay: 1.75s; } .countdown.is-live .ctl__step:nth-child(3) { animation-delay: 2.3s; } .countdown.is-live .is-now .ctl__dot { animation: beacon 2.2s var(--ease) 2.6s infinite; } @supports (animation-timeline: view()) { .countdown__bg { animation: bg-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } } @keyframes odo-roll { from { transform: translateY(0); } } @keyframes ring-draw { from { stroke-dasharray: 0 100; } } @keyframes ring-in { from { opacity: 0; transform: scale(.7) rotate(-25deg); } to { opacity: 1; transform: none; } } @keyframes line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes beacon { 0% { box-shadow: 0 0 0 0 rgba(255, 115, 0, .6); } 70%, 100% { box-shadow: 0 0 0 1.1rem rgba(255, 115, 0, 0); } } @keyframes bg-drift { from { transform: translateX(12%); } to { transform: translateX(-8%); } } .countdown--ltw { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); } /* --- Team-Galerie (Kandidatenprofil) --- */ .tgal { display: grid; gap: 1.5rem; } @media (min-width: 60rem) { .tgal { grid-template-columns: 1.45fr 1fr; align-items: start; } .tgal__item:nth-child(2) { margin-top: 4rem; } } .tgal__item { display: grid; gap: .9rem; } .tgal__media { position: relative; overflow: hidden; box-shadow: var(--shadow); } .tgal__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--orange); transform-origin: left; } .tgal__img { width: 100%; height: auto; transition: transform .8s var(--ease); } .tgal__item:hover .tgal__img { transform: scale(1.035); } .tgal__cap { font-size: 1.05rem; max-width: 34rem; } .tgal__cap strong { color: var(--petrol); font-size: 1.2rem; margin-right: .25rem; } /* --- Bewegung für alle Seiten --- */ @media (prefers-reduced-motion: no-preference) { /* Überschriften: Balken wischt ein, Punkt springt, Unterzeile folgt */ .js [data-reveal="wipe"].is-pre, .js [data-reveal="photo"].is-pre { opacity: 1; transform: none; } .js [data-reveal="wipe"] .hl__title { transition: clip-path .9s cubic-bezier(.65, 0, .25, 1); clip-path: inset(-.2em -.2em -.2em -.2em); } .js [data-reveal="wipe"].is-pre .hl__title { clip-path: inset(-.2em 100% -.2em -.2em); } .js [data-reveal="wipe"] .hl__title .dot { display: inline-block; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) .75s; } .js [data-reveal="wipe"].is-pre .hl__title .dot { transform: scale(0); } .js [data-reveal="wipe"] .hl__sub, .js [data-reveal="wipe"] .hl__top { transition: opacity .6s var(--ease) .45s, transform .6s var(--ease) .45s; } .js [data-reveal="wipe"].is-pre .hl__sub, .js [data-reveal="wipe"].is-pre .hl__top { opacity: 0; transform: translateY(10px); } /* Fotos: Maske öffnet sich von unten, Bild zoomt sanft zurück */ .js [data-reveal="photo"] { overflow: hidden; } .js [data-reveal="photo"]:not(.tgal__item) > * { transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1); clip-path: inset(0 0 0 0); } .js [data-reveal="photo"].is-pre:not(.tgal__item) > * { clip-path: inset(100% 0 0 0); } .js [data-reveal="photo"] img { transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); } .js [data-reveal="photo"].is-pre img { transform: scale(1.14); } .js .tgal__item[data-reveal="photo"] { clip-path: none; transition: none; } .js .tgal__item[data-reveal="photo"] .tgal__media { transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1); clip-path: inset(0); } .js .tgal__item[data-reveal="photo"].is-pre .tgal__media { clip-path: inset(0 100% 0 0); } .js .tgal__item[data-reveal="photo"] .tgal__media::after { transition: transform .8s var(--ease) .9s; } .js .tgal__item[data-reveal="photo"].is-pre .tgal__media::after { transform: scaleX(0); } .js .tgal__item[data-reveal="photo"] .tgal__cap { transition: opacity .6s var(--ease) .7s, transform .6s var(--ease) .7s; } .js .tgal__item[data-reveal="photo"].is-pre .tgal__cap { opacity: 0; transform: translateY(12px); } .js .tgal__item:nth-child(2) .tgal__media, .js .tgal__item:nth-child(2) .tgal__cap { transition-delay: .2s; } /* Seitenköpfe: orchestrierter Auftritt beim Laden */ .page-hero .hl__title, .lt-hero .hl__title, .wert-hero .hl__title { animation: wipe-in .95s cubic-bezier(.65, 0, .25, 1) .1s both; } .page-hero .hl__title .dot, .lt-hero .hl__title .dot, .wert-hero .hl__title .dot { display: inline-block; animation: pop .45s var(--ease) .95s both; } .page-hero .hl__sub, .page-hero .hl__top, .lt-hero .hl__sub, .wert-hero .hl__sub, .lt-hero .tag, .wert-hero .tag, .crumbs { animation: fade-up .6s var(--ease) .45s both; } .page-hero__intro, .lt-hero .lead, .lt-hero .motto, .wert-hero .lead { animation: fade-up .7s var(--ease) .6s both; } .lt-hero .actions, .lt-hero .ph { animation: fade-up .7s var(--ease) .75s both; } .lt-hero__photo { animation: photo-reveal 1.2s cubic-bezier(.65, 0, .25, 1) .2s both; } .lt-hero__photo img { animation: photo-zoom 1.8s cubic-bezier(.2, .8, .2, 1) .2s both; } .lt-hero__photo::before { animation: slide-in 1s var(--ease) .6s both; } .wert-hero__mark { animation: ring-in 1s cubic-bezier(.34, 1.56, .64, 1) .25s both; } .ltw-hero__sub, .ltw-hero__intro { animation: fade-up .7s var(--ease) .8s both; } /* Kleinigkeiten mit Wirkung */ .btn { will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.97); } .ticks li::before { transition: transform .5s var(--ease) .2s; transform-origin: left; } .js .ticks li.is-pre::before { transform: scaleX(0); } .wkl__item { transition: transform .25s var(--ease), background-color .25s var(--ease); } .wkl__item:hover { transform: translateX(4px); } .person, .place, .event, .tile { transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .person:hover, .place--link:hover, .event:hover, .tile:not(.tile--static):hover { transform: translateY(-4px); box-shadow: var(--shadow); } /* Lesefortschritt oben (scroll-getrieben, ohne JavaScript) */ @supports (animation-timeline: scroll()) { .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--orange); transform-origin: left; animation: progress linear both; animation-timeline: scroll(root); pointer-events: none; } } } @keyframes wipe-in { from { clip-path: inset(-.2em 100% -.2em -.2em); } to { clip-path: inset(-.2em -.2em -.2em -.2em); } } @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media print { .countdown__bg, .cring, .countdown__actions { display: none !important; } .countdown { background: none; color: var(--ink); } } /* ===================================================================== 1.7 – Nachrichten-Hub, Verbände mit Bildern, Stephan Toscani, Wahl-Pitch ===================================================================== */ .wrap--wide { max-width: calc(88rem + 2 * var(--gutter)); } /* --- Vorschaubild / Ersatzmotiv --- */ .nmedia { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tuerkis-20); } .nmedia__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .nmedia__cover { position: absolute; inset: 0; display: grid; place-items: end start; padding: 1rem 1.1rem; background-color: var(--petrol); background-image: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .18) 0 18%, transparent 18.5%), radial-gradient(circle at 85% 20%, transparent 0 30%, rgba(255, 255, 255, .1) 30.5% 31.5%, transparent 32%), radial-gradient(circle at 85% 20%, transparent 0 44%, rgba(255, 255, 255, .08) 44.5% 45.5%, transparent 46%), linear-gradient(135deg, rgba(255, 255, 255, .06) 25%, transparent 25% 50%, rgba(255, 255, 255, .06) 50% 75%, transparent 75%); background-size: auto, auto, auto, 18px 18px; } .nmedia__cover--land { background-color: var(--tuerkis); } .nmedia__cover--bund { background-color: #14171a; } .nmedia__cover--ov { background-color: var(--petrol-dark); } .nmedia__cover::after { content: ""; position: absolute; left: 1.1rem; top: 1rem; width: 2.2rem; height: 4px; background: var(--orange); } .nmedia__src { position: relative; font-weight: 800; font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); line-height: 1.1; color: var(--white); letter-spacing: -.01em; max-width: 80%; } .nmedia__cover--land .nmedia__src { color: var(--ink); } /* --- Hub --- */ .section--hub { padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); } .hub__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; } .hub__tabs { position: relative; display: none; flex-wrap: wrap; gap: .25rem; padding: 4px; background: var(--white); border-radius: 999px; box-shadow: var(--shadow); } .hub.has-js .hub__tabs { display: inline-flex; } .hub__ink { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--petrol); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), width .45s cubic-bezier(.34, 1.4, .64, 1); z-index: 0; } .hub__tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: .35rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--petrol); font-weight: 800; cursor: pointer; transition: color .3s var(--ease); } .hub__tab[aria-pressed="true"] { color: var(--white); --focus: var(--orange); } .hub__tab .lvl__glyph { width: 1.2rem; height: 1.2rem; } .hub__n { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 999px; background: var(--tuerkis-20); color: var(--petrol); font-size: .78rem; } .hub__tab[aria-pressed="true"] .hub__n { background: var(--orange); color: var(--ink); } .hub__live { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--muted); font-weight: 600; } .hub__pulse { position: relative; width: .65rem; height: .65rem; border-radius: 50%; background: #1f9d55; } .hub__fresh { margin-bottom: 1rem; } .hub__grid { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); } @media (min-width: 64rem) { .hub__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ncard--feature { grid-column: span 2; grid-row: span 2; } } .ncard { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 85, 105, .08), 0 10px 28px -16px rgba(16, 85, 105, .35); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .ncard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--petrol); transform: scaleX(.18); transform-origin: left; transition: transform .45s var(--ease); } .ncard--land::after { background: var(--tuerkis); } .ncard--bund::after { background: var(--ink); } .ncard:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(16, 85, 105, .08), 0 28px 48px -20px rgba(16, 85, 105, .45); } .ncard:hover::after, .ncard:focus-within::after { transform: scaleX(1); } .ncard:hover .nmedia__img { transform: scale(1.06); } .ncard--feature .nmedia { aspect-ratio: 16 / 9; } @media (min-width: 64rem) { .ncard--feature { flex-direction: column; } .ncard--feature .nmedia { flex: 1 1 auto; min-height: 15rem; aspect-ratio: auto; } } .nbadge { position: absolute; left: .75rem; top: .75rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem .3rem .4rem; border-radius: 999px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: var(--petrol); color: var(--white); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); } .nbadge .lvl__glyph { width: 1.15rem; height: 1.15rem; } .nbadge--land { background: var(--tuerkis); color: var(--ink); } .nbadge--land .lvl__glyph .is-on { stroke: var(--petrol); } .nbadge--bund { background: var(--ink); } .nnew { position: absolute; right: .75rem; top: .75rem; padding: .25rem .55rem; border-radius: 4px; background: var(--orange); color: var(--ink); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .ncard__body { display: grid; gap: .45rem; align-content: start; padding: 1.1rem 1.2rem 1.4rem; } .ncard--feature .ncard__body { padding: 1.4rem 1.6rem 1.8rem; } .ncard__meta { display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .82rem; color: var(--muted); } .ncard__src { font-weight: 800; color: var(--petrol); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; padding-top: .1rem; } .ncard__title { font-size: 1.08rem; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; } .ncard--feature .ncard__title { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); line-height: 1.2; } .ncard__title a { color: var(--petrol); text-decoration: none; } .ncard__title a::after { content: ""; position: absolute; inset: 0; } .ncard__title a:hover { text-decoration: underline; } .ncard__text { font-size: .93rem; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ncard--feature .ncard__text { font-size: 1.05rem; -webkit-line-clamp: 3; } .ncard__more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; color: var(--petrol); margin-top: .2rem; } .ncard__more .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); } .ncard:hover .ncard__more .icon { transform: translate(2px, -2px); } .hub__morewrap { text-align: center; margin-top: 1.5rem; } .hub__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 2px solid var(--tuerkis-60); } .hub__links .lvl__glyph { width: 1.2rem; height: 1.2rem; } @media (prefers-reduced-motion: no-preference) { .hub__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1f9d55; animation: live-ping 1.8s var(--ease) infinite; } .ncard.is-in { animation: card-in .55s cubic-bezier(.34, 1.3, .64, 1) backwards; } .hub.is-armed:not(.is-live) .ncard { opacity: 0; transform: translateY(24px) scale(.97); } .hub.is-armed .ncard { transition: opacity .6s var(--ease), transform .7s cubic-bezier(.34, 1.3, .64, 1), box-shadow .35s var(--ease); } .hub.is-armed .ncard:nth-child(2) { transition-delay: .08s; } .hub.is-armed .ncard:nth-child(3) { transition-delay: .16s; } .hub.is-armed .ncard:nth-child(4) { transition-delay: .24s; } .hub.is-armed .ncard:nth-child(5) { transition-delay: .32s; } .hub.is-armed .ncard:nth-child(n+6) { transition-delay: .4s; } .hub.is-live .ncard:hover { transition-delay: 0s; } .hub.is-live .nnew { animation: pop .45s var(--ease) .9s both; } } @keyframes live-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } } @keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } } /* --- Aus den Ortsverbänden mit Bildern --- */ .ovgrid { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } @media (min-width: 64rem) { .ovgrid { grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: auto auto; } .ovc--lead { grid-row: span 2; } } .ovc { position: relative; display: flex; flex-direction: column; background: var(--tuerkis-20); border-radius: 6px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .ovc:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .ovc:hover .nmedia__img { transform: scale(1.06); } .ovc--lead { background: var(--petrol); color: var(--white); --focus: var(--white); } .ovc--lead .nmedia { aspect-ratio: 16 / 8; } .ovc__tag { position: absolute; left: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; background: var(--white); color: var(--petrol); font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; border-left: 3px solid var(--orange); } .ovc__tag .icon { width: .95rem; height: .95rem; color: var(--orange); } .ovc__body { display: grid; gap: .5rem; align-content: start; padding: 1.1rem 1.25rem 1.4rem; } .ovc--lead .ovc__body { padding: 1.4rem 1.6rem 1.8rem; } .ovc__meta { font-size: .85rem; color: var(--muted); } .ovc--lead .ovc__meta { color: var(--tuerkis-60); } .ovc__title { font-size: 1.1rem; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; } .ovc--lead .ovc__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); color: var(--white); line-height: 1.2; } .ovc__title a { color: inherit; text-decoration: none; } .ovc__title a::after { content: ""; position: absolute; inset: 0; } .ovc__title a:hover { text-decoration: underline; } .ovc__text { font-size: .95rem; } .ovc:not(.ovc--lead) .ovc__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ovc__dates { list-style: none; padding: 0; display: grid; gap: .35rem; margin-top: .3rem; } .ovc__dates li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .6rem; padding: .5rem .7rem; background: rgba(255, 255, 255, .1); border-left: 3px solid var(--orange); font-size: .92rem; } .ovc__dates time { font-weight: 800; } @media (max-width: 30rem) { .ovc__dates li { grid-template-columns: 1fr; gap: .1rem; } } .ovc__more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .92rem; color: var(--petrol); } .ovc--lead .ovc__more { color: var(--white); } .ovc__more .icon { width: 1rem; height: 1rem; } /* --- Stephan Toscani --- */ .tosc { position: relative; background: var(--petrol-dark); color: var(--white); --focus: var(--white); overflow: hidden; } .tosc__stage { position: relative; display: grid; } .tosc__media { grid-area: 1 / 1; margin: 0; } .tosc__img { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 1070; object-fit: cover; } .tosc__shade { grid-area: 1 / 1; background: radial-gradient(120% 90% at 0% 0%, rgba(8, 47, 59, .9) 0%, rgba(8, 47, 59, .62) 38%, rgba(8, 47, 59, 0) 62%); pointer-events: none; } .tosc__inner { grid-area: 1 / 1; position: relative; z-index: 1; display: flex; align-items: flex-start; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 2rem; } .tosc__text { max-width: 34rem; } .tosc__kicker { font-weight: 700; font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); color: var(--white); text-shadow: 0 1px 10px rgba(0, 0, 0, .45); } .tosc__kicker > span:first-child { display: inline-block; margin-right: .5rem; padding: .15rem .55rem; background: var(--orange); color: var(--ink); font-weight: 800; } .tosc__kicker .dot { color: var(--ink); } .tosc__title { margin-top: 1rem; color: var(--white); font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); line-height: .98; letter-spacing: -.02em; } .tosc__line { display: block; overflow: hidden; padding-bottom: .06em; } .tosc__line > span { display: inline-block; } .tosc__title .dot { color: var(--orange); } .tosc__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); max-width: 34rem; } .tosc__quote { margin-top: 3.5rem !important; } .tosc__title { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } .tosc__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } @media (max-width: 63.99rem) { .tosc__stage { grid-template-rows: auto auto; } .tosc__media { grid-area: 1 / 1; } .tosc__img { min-height: 0; aspect-ratio: 2000 / 1070; height: auto; } .tosc__shade { display: none; } .tosc__inner { grid-area: 2 / 1; padding-block: 2rem 1rem; } } .tosc__band { position: relative; background: var(--petrol); border-top: 4px solid var(--orange); } .tosc__bandinner { display: grid; gap: 2rem 4rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); } @media (min-width: 64rem) { .tosc__bandinner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; } } .tosc__quote { position: relative; margin: 0; padding-top: 2.75rem; } .tosc__quote::before { content: "„"; position: absolute; left: -.05em; top: -3.7rem; font: 400 6.5rem/1 var(--serif); color: var(--orange); } .tosc__quote blockquote { margin: 0; } .tosc__quote p { font: italic 400 clamp(1.25rem, 1.05rem + .9vw, 1.75rem)/1.4 var(--serif); } .tosc__quote figcaption { margin-top: .9rem; font-size: .9rem; color: var(--tuerkis-60); } .tosc__pathtitle { font-weight: 800; font-size: 1.2rem; margin-bottom: 1rem; } .tosc__pathtitle .dot { color: var(--orange); } .tline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; position: relative; } .tline::before { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 2px; background: rgba(255, 255, 255, .25); transform-origin: top; } .tline__step { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; gap: .2rem 1rem; padding: .45rem 0 .45rem 2rem; } .tline__dot { position: absolute; left: 0; top: .75rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--petrol); border: 2px solid var(--white); } .tline__step:last-child .tline__dot { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 .3rem rgba(255, 115, 0, .25); } .tline__year { font-weight: 800; font-variant-numeric: tabular-nums; } .tline__what { color: rgba(255, 255, 255, .9); } @media (max-width: 30rem) { .tline__step { grid-template-columns: 1fr; } } .tosc__bridge { display: flex; gap: .5rem; align-items: center; margin-top: 1.5rem; font-weight: 700; } .tosc__bridge a { color: var(--white); } .tosc__bridge .icon { color: var(--orange); } @media (prefers-reduced-motion: no-preference) { .tosc.is-armed:not(.is-live) .tosc__line > span { transform: translateY(105%); } .tosc.is-armed:not(.is-live) .tosc__kicker, .tosc.is-armed:not(.is-live) .tosc__lead, .tosc.is-armed:not(.is-live) .tosc__actions { opacity: 0; transform: translateY(14px); } .tosc.is-armed:not(.is-live) .tosc__img { transform: scale(1.12); } .tosc.is-armed:not(.is-live) .tline::before { transform: scaleY(0); } .tosc.is-armed:not(.is-live) .tline__step, .tosc.is-armed:not(.is-live) .tosc__quote { opacity: 0; transform: translateX(-14px); } .tosc.is-armed .tosc__img { transition: transform 2.4s cubic-bezier(.2, .8, .2, 1); } .tosc.is-armed .tosc__line > span { transition: transform .9s cubic-bezier(.2, .8, .2, 1) .2s; } .tosc.is-armed .tosc__line:nth-child(2) > span { transition-delay: .34s; } .tosc.is-armed .tosc__kicker { transition: opacity .6s var(--ease), transform .6s var(--ease); } .tosc.is-armed .tosc__lead { transition: opacity .7s var(--ease) .6s, transform .7s var(--ease) .6s; } .tosc.is-armed .tosc__actions { transition: opacity .7s var(--ease) .75s, transform .7s var(--ease) .75s; } .tosc.is-armed .tline::before { transition: transform 1.6s cubic-bezier(.65, 0, .25, 1) .8s; } .tosc.is-armed .tosc__quote { transition: opacity .8s var(--ease) .6s, transform .8s var(--ease) .6s; } .tosc.is-armed .tline__step { transition: opacity .5s var(--ease), transform .5s var(--ease); } .tosc.is-armed .tline__step:nth-child(1) { transition-delay: .9s; } .tosc.is-armed .tline__step:nth-child(2) { transition-delay: 1.05s; } .tosc.is-armed .tline__step:nth-child(3) { transition-delay: 1.2s; } .tosc.is-armed .tline__step:nth-child(4) { transition-delay: 1.35s; } .tosc.is-armed .tline__step:nth-child(5) { transition-delay: 1.5s; } .tosc.is-armed .tline__step:nth-child(6) { transition-delay: 1.65s; } .tosc.is-live .tline__step:last-child .tline__dot { animation: beacon 2.2s var(--ease) 2.4s infinite; } @supports (animation-timeline: view()) { } } /* Parallaxe bewegt nur das (vergrößerte) Bild im Rahmen – kein Streifen am Rand */ @keyframes tosc-drift { from { translate: 0 -3.5%; } to { translate: 0 3.5%; } } .tosc__media { overflow: hidden; } /* --- Landtagswahl: Pitch unter der Headline --- */ .pitch { margin-top: 1.5rem; display: grid; gap: 1.1rem; max-width: 62rem; } .pitch__sub { font: italic 400 clamp(1.4rem, 1.05rem + 1.4vw, 2.2rem)/1.25 var(--serif); } .pitch__subtext { background-image: linear-gradient(var(--orange), var(--orange)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 3px; padding-bottom: .1em; } .pitch__sub .dot { color: var(--orange); } .pitch__lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); max-width: 44rem; color: rgba(255, 255, 255, .92); } .pitch__lead strong { color: var(--white); box-shadow: inset 0 -.35em 0 rgba(255, 115, 0, .55); } .pitch__swap { display: none; } .pitch__themes { list-style: none; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin-top: .4rem; } .pitch__theme { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(255, 255, 255, .07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 700; line-height: 1.25; transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); } .pitch__theme:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .14); border-color: var(--orange); } .pitch__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--white); color: var(--petrol); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background-color .3s var(--ease); } .pitch__theme:hover .pitch__icon { transform: rotate(-12deg) scale(1.1); background: var(--orange); color: var(--ink); } .pitch__icon .icon { width: 1.3rem; height: 1.3rem; } @media (prefers-reduced-motion: no-preference) { .pitch__swap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .35em; font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.15; } .pitch__es { color: var(--tuerkis-60); } .swap { display: inline-grid; color: var(--white); } .swap__w { grid-area: 1 / 1; opacity: 0; animation: swap 15s cubic-bezier(.65, 0, .25, 1) infinite; } .swap__w .dot { color: var(--orange); } .swap__w:nth-child(2) { animation-delay: 2.5s; } .swap__w:nth-child(3) { animation-delay: 5s; } .swap__w:nth-child(4) { animation-delay: 7.5s; } .swap__w:nth-child(5) { animation-delay: 10s; } .swap__w:nth-child(6) { animation-delay: 12.5s; } .pitch__subtext { background-size: 0 3px; animation: underline 1s cubic-bezier(.65, 0, .25, 1) 1.1s forwards; } .pitch__sub, .pitch__lead { animation: fade-up .7s var(--ease) .7s both; } .pitch__swap { animation: fade-up .7s var(--ease) .9s both; } .pitch__theme { animation: bubble .6s cubic-bezier(.34, 1.56, .64, 1) backwards; } .pitch__theme:nth-child(1) { animation-delay: 1.1s; } .pitch__theme:nth-child(2) { animation-delay: 1.2s; } .pitch__theme:nth-child(3) { animation-delay: 1.3s; } .pitch__theme:nth-child(4) { animation-delay: 1.4s; } .pitch__theme:nth-child(5) { animation-delay: 1.5s; } .pitch__theme:nth-child(6) { animation-delay: 1.6s; } } @keyframes swap { 0% { opacity: 0; transform: translateY(.6em); filter: blur(4px); } 3%, 15% { opacity: 1; transform: none; filter: none; } 18%, 100% { opacity: 0; transform: translateY(-.6em); filter: blur(4px); } } @keyframes underline { to { background-size: 100% 3px; } } @media print { .tosc__img, .hub__bar, .hub__fresh { display: none !important; } } @media (min-width: 48rem) { .pitch__themes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 54rem; } } .hub.has-js .hub__tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .hub__tabs::-webkit-scrollbar { display: none; } .hub__tab { flex: none; white-space: nowrap; } .tosc__bridge { display: block; } .tosc__bridge .icon { display: inline; vertical-align: -.2em; margin-right: .35rem; } @media (max-width: 47.99rem) { .hub.has-js .hub__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem; margin-inline: -.25rem; scrollbar-width: thin; } .hub.has-js .ncard { scroll-snap-align: start; } .hub.has-js .ncard:hover { transform: none; } } /* ===================================================================== 1.8 – Bilanz der SPD-Alleinregierung, Team Toscani 27 ===================================================================== */ .bilanz { position: relative; overflow: hidden; color: var(--white); background: radial-gradient(90% 120% at 100% 0%, #1d3f4b 0%, #0d2229 55%, #091a20 100%); padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); --focus: var(--white); isolation: isolate; } .bilanz::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(-45deg, rgba(255, 115, 0, .06) 0 14px, transparent 14px 28px); mask-image: linear-gradient(180deg, #000, transparent 45%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 45%); } .bilanz__head { max-width: 52rem; } .bilanz__kicker { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--orange); } .bilanz__alarm svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .bilanz__title { margin-top: .8rem; color: var(--white); font-size: clamp(2rem, 1.3rem + 3vw, 3.8rem); line-height: 1.05; letter-spacing: -.015em; } .bilanz__title .dot, .bcard__title .dot, .bilanz__claim .dot { color: var(--orange); } .bilanz__lead { margin-top: 1.1rem; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: rgba(255, 255, 255, .85); } .bilanz__grid { list-style: none; padding: 0; margin: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0 0; display: grid; gap: 1.25rem; } @media (min-width: 64rem) { .bilanz__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .bcard { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.4rem 1.4rem; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); } .bcard__nr { position: absolute; right: 1.1rem; top: .8rem; font-weight: 800; font-size: 2.6rem; line-height: 1; color: rgba(255, 255, 255, .08); } .bcard__title { color: var(--white); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.2; padding-right: 3rem; } .bchart { margin: 0; } .bchart svg { width: 100%; height: auto; overflow: visible; } .bchart figcaption { margin-top: .4rem; font-size: .82rem; color: rgba(255, 255, 255, .7); } .bchart__keys { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-bottom: .2rem; } .bchart__keys span { display: inline-flex; align-items: center; gap: .35rem; } .bchart__grid line { stroke: rgba(255, 255, 255, .12); stroke-dasharray: 3 5; } .bchart__line { fill: none; stroke: var(--orange); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 115, 0, .55)); } .bchart__pt circle { fill: #0d2229; stroke: var(--orange); stroke-width: 3; } .bchart__pt text { fill: var(--white); font: 800 13px/1 var(--sans); } .bchart__pt .bchart__year { fill: rgba(255, 255, 255, .6); font-weight: 700; font-size: 11px; } .bchart__pt--4 circle { fill: var(--orange); } .bchart__zero { stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; } .bchart__bar rect.is-neg { fill: var(--orange); } .bchart__bar--de rect { fill: rgba(255, 255, 255, .35); } .bchart__bar text { fill: var(--white); font: 800 13px/1 var(--sans); } .bchart__glabel { fill: rgba(255, 255, 255, .75); font: 700 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; } .bkey { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; background: var(--orange); } .bkey--de { background: rgba(255, 255, 255, .35); } .bcard__alert { margin-top: auto; display: flex; gap: .8rem; align-items: flex-start; padding: .85rem .95rem; border-radius: 8px; background: rgba(255, 115, 0, .1); border: 1px solid rgba(255, 115, 0, .35); font-size: .95rem; line-height: 1.45; } .bcard__alert strong { color: var(--white); font-size: 1.15em; font-variant-numeric: tabular-nums; } .bcard__alert b { color: var(--white); } .bcard__siren { position: relative; flex: none; width: .8rem; height: .8rem; margin-top: .35rem; border-radius: 50%; background: var(--orange); } .bjobs { display: grid; gap: .3rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 255, 255, .1); } .bjobs__label { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .7); } .bjobs__count { display: flex; align-items: baseline; gap: .6rem; font-weight: 800; font-variant-numeric: tabular-nums; } .bjobs__from { font-size: 1.4rem; color: rgba(255, 255, 255, .5); text-decoration: line-through; text-decoration-color: var(--orange); text-decoration-thickness: 3px; } .bjobs__arrow { color: var(--orange); font-size: 1.4rem; } .bjobs__count strong { font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); line-height: 1; color: var(--white); } .bjobs__note { font-size: .9rem; color: rgba(255, 255, 255, .8); } .bjobs__note b { color: var(--white); } .bmeter { position: relative; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; margin: .4rem 0 .2rem; } .bmeter__cut, .bmeter__risk { position: absolute; top: 0; bottom: 0; right: 0; transform-origin: right; } .bmeter__risk { width: 45%; background: repeating-linear-gradient(-45deg, rgba(255, 115, 0, .55) 0 5px, rgba(255, 115, 0, .2) 5px 10px); } .bmeter__cut { width: 18%; background: var(--orange); z-index: 1; } .bilanz__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: 12px; background: var(--petrol); border-left: 6px solid var(--orange); } .bilanz__claim { font-weight: 800; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); line-height: 1.2; } .bilanz__claim > span { display: block; font-weight: 700; font-size: .7em; color: var(--tuerkis-60); } .bilanz__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .bilanz__src { margin-top: 1.5rem; font-size: .85rem; color: rgba(255, 255, 255, .75); } .bilanz__src summary { cursor: pointer; font-weight: 700; } .bilanz__src ul { margin-top: .6rem; padding-left: 1.1rem; display: grid; gap: .35rem; } .bilanz__src a { color: var(--white); } /* Bilanz: Karten erscheinen sofort, die Grafiken (Arbeitslosenquote, Rote Laterne, Arbeitsplätze) starten 2 s später */ @media (prefers-reduced-motion: no-preference) { .bilanz.is-armed:not(.is-live) .bcard { opacity: 0; transform: translateY(40px); } .bilanz.is-armed .bcard { transition: opacity .7s var(--ease), transform .8s cubic-bezier(.34, 1.3, .64, 1); } .bilanz.is-armed .bcard--2 { transition-delay: .15s; } .bilanz.is-armed .bcard--3 { transition-delay: .3s; } .bilanz.is-armed:not(.is-live) .bchart__line, .bilanz.is-armed:not(.is-live) .bchart__area, .bilanz.is-armed:not(.is-live) .bchart__pt, .bilanz.is-armed:not(.is-live) .bchart__bar rect, .bilanz.is-armed:not(.is-live) .bchart__bar text, .bilanz.is-armed:not(.is-live) .bmeter__cut, .bilanz.is-armed:not(.is-live) .bmeter__risk { opacity: 0; } .bilanz.is-live .bchart__line { stroke-dasharray: 1; animation: draw 1.8s cubic-bezier(.65, 0, .25, 1) 2.5s both; } .bilanz.is-live .bchart__area { animation: fade-in 1s var(--ease) 3.6s both; } .bilanz.is-live .bchart__pt { animation: fade-up .5s cubic-bezier(.34, 1.56, .64, 1) both; } .bilanz.is-live .bchart__pt--1 { animation-delay: 2.6s; } .bilanz.is-live .bchart__pt--2 { animation-delay: 3.0s; } .bilanz.is-live .bchart__pt--3 { animation-delay: 3.4s; } .bilanz.is-live .bchart__pt--4 { animation-delay: 3.8s; } .bilanz.is-live .bchart__pt--4 circle { animation: alarm-ring 1.6s var(--ease) 4.4s infinite; transform-box: fill-box; transform-origin: center; } .bilanz.is-live .bchart__bar rect { transform-box: fill-box; animation: bar-drop 1.3s cubic-bezier(.65, 0, .25, 1) 2s both; } .bilanz.is-live .bchart__bar rect.is-neg { transform-origin: top; } .bilanz.is-live .bchart__bar rect.is-pos { transform-origin: bottom; } .bilanz.is-live .bchart__bar--g0 rect { animation-delay: 2.6s; } .bilanz.is-live .bchart__bar--g1 rect { animation-delay: 3.0s; } .bilanz.is-live .bchart__bar--de rect { animation-delay: 3.3s; } .bilanz.is-live .bchart__bar text { animation: fade-in .5s var(--ease) 4s both; } .bilanz.is-live .bmeter__cut { animation: meter-in 1.2s cubic-bezier(.65, 0, .25, 1) 3.2s both; } .bilanz.is-live .bmeter__risk { animation: meter-in 1.6s cubic-bezier(.65, 0, .25, 1) 3.6s both; } .bilanz.is-live .bjobs__from { animation: strike 1s var(--ease) 2.6s both; } .bcard__siren::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); animation: live-ping 1.5s var(--ease) infinite; } .bilanz__alarm svg { animation: alarm-blink 2.4s steps(1) infinite; } .bilanz.is-live .bcard__alert { animation: alert-in .6s cubic-bezier(.34, 1.56, .64, 1) 4.2s both; } } @keyframes bar-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes meter-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes strike { from { text-decoration-color: transparent; opacity: 1; } to { text-decoration-color: var(--orange); opacity: 1; } } @keyframes alarm-ring { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } } @keyframes alarm-blink { 0%, 70% { opacity: 1; } 71%, 85% { opacity: .25; } 86% { opacity: 1; } } @keyframes alert-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } } /* --- Team Toscani 27 --- */ .t27 { position: relative; background: #27566a; color: var(--white); --focus: var(--white); overflow: hidden; } .t27__banner { margin: 0; overflow: hidden; } .t27__img { width: 100%; height: auto; display: block; } .t27__inner { display: grid; gap: 1.75rem 4rem; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); } @media (min-width: 60rem) { .t27__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } } .t27__kicker { display: inline-block; padding: .2rem .65rem; background: var(--orange); color: var(--ink); font-weight: 800; font-style: italic; letter-spacing: .02em; } .t27__title { margin-top: .9rem; color: var(--white); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.05; } .t27__title .dot { color: var(--orange); } .t27__title span:not(.dot) { display: block; color: var(--tuerkis-60); } .t27__lead { margin-top: 1rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 40rem; color: rgba(255, 255, 255, .9); } .t27__ways { list-style: none; padding: 0; display: grid; gap: .6rem; } .t27__ways li { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); font-weight: 700; } .t27__ways .icon { color: var(--orange); } .t27__actions { display: grid; gap: .9rem; justify-items: start; margin-top: 1.25rem; } .t27__more { color: var(--white); } .t27__more:hover { color: var(--white); } @media (prefers-reduced-motion: no-preference) { .t27.is-armed:not(.is-live) .t27__img { transform: scale(1.08); } .t27.is-armed .t27__img { transition: transform 2.2s cubic-bezier(.2, .8, .2, 1); } .t27.is-armed:not(.is-live) .t27__text > *, .t27.is-armed:not(.is-live) .t27__ways li, .t27.is-armed:not(.is-live) .t27__actions { opacity: 0; transform: translateY(16px); } .t27.is-armed .t27__text > *, .t27.is-armed .t27__ways li, .t27.is-armed .t27__actions { transition: opacity .6s var(--ease), transform .7s cubic-bezier(.34, 1.3, .64, 1); } .t27.is-armed .t27__title { transition-delay: .12s; } .t27.is-armed .t27__lead { transition-delay: .24s; } .t27.is-armed .t27__ways li:nth-child(1) { transition-delay: .35s; } .t27.is-armed .t27__ways li:nth-child(2) { transition-delay: .45s; } .t27.is-armed .t27__ways li:nth-child(3) { transition-delay: .55s; } .t27.is-armed .t27__actions { transition-delay: .7s; } .t27.is-live .t27__cta { animation: cta-glow 2.6s var(--ease) 1.6s infinite; } } @keyframes cta-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 115, 0, .55); } 60% { box-shadow: 0 0 0 .8rem rgba(255, 115, 0, 0); } } @media print { .bilanz__actions, .t27__actions { display: none !important; } } /* ===================================================================== 1.9 – Original-Vorschauen Social Media, Willkommen, Frage, Pitch ===================================================================== */ .chan__grid { grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 10px; } .chan__grid .chan__tile { aspect-ratio: 3 / 4; } .chan__grid .chan__tile img { object-position: center top; } .chan__shot { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #f0f2f5; height: 15.5rem; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45); } .chan__bar { position: relative; z-index: 1; display: flex; align-items: center; gap: .3rem; height: 1.6rem; padding: 0 .6rem; background: var(--white); border-bottom: 1px solid var(--line); font-size: .7rem; color: var(--muted); } .chan__bar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line); } .chan__bar i:first-child { background: var(--orange); } .chan__bar span { margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; background: var(--tuerkis-20); } .chan__shot img { width: 100%; height: auto; display: block; } .chan__shot:hover img { filter: brightness(1.03); } @keyframes shot-scroll { 0%, 15% { transform: translateY(0); } 85%, 100% { transform: translateY(calc(-100% + 13.9rem)); } } .welcome { grid-template-columns: 1fr; } @media (min-width: 48rem) { .welcome { grid-template-columns: 15rem 1fr; } } .welcome__photo { position: relative; width: 11rem; aspect-ratio: 1; margin: 0; } @media (min-width: 48rem) { .welcome__photo { width: 15rem; } } .welcome__photo::before { content: ""; position: absolute; inset: -.6rem; border-radius: 50%; border: 3px dashed var(--orange); opacity: .7; } .welcome__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow); position: relative; } @media (prefers-reduced-motion: no-preference) { .welcome__photo::before { animation: spin 40s linear infinite; } } .ask-band { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 6rem); background: linear-gradient(135deg, var(--tuerkis-20) 0%, #d3e9ee 100%); overflow: hidden; } .ask-band::before { content: ""; position: absolute; right: -8rem; top: -8rem; width: 26rem; height: 26rem; border-radius: 50%; border: 3.5rem solid rgba(16, 85, 105, .06); pointer-events: none; } .qbox--wide { position: relative; border-radius: 12px; } @media (min-width: 60rem) { .qbox--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 1.5rem 3.5rem; padding: clamp(2rem, 1.5rem + 2vw, 3.25rem); } .qbox--wide .qbox__head { grid-row: 1 / span 3; flex-direction: column; } .qbox--wide > :not(.qbox__head) { grid-column: 2; } } .qbox--wide .qbox__title { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); } .qbox--wide .icircle { width: 3.5rem; height: 3.5rem; } .qbox__facts { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: .55rem; font-size: .975rem; } .qbox__facts li { display: flex; align-items: center; gap: .55rem; } .qbox__facts .icon { color: var(--orange); } .pitch__es { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.15; color: var(--white); margin-top: .4rem; } .pitch__dots span { color: var(--orange); } @media (prefers-reduced-motion: no-preference) { .pitch__es { animation: fade-up .7s var(--ease) .9s both; } .pitch__dots span { display: inline-block; animation: dot-bounce 1.6s var(--ease) 1.4s infinite; } .pitch__dots span:nth-child(2) { animation-delay: 1.55s; } .pitch__dots span:nth-child(3) { animation-delay: 1.7s; } } @keyframes dot-bounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-.25em); } } /* --- WhatsApp-Community: Chat auf dem Smartphone --- */ .chan--wa .chan__text { margin-top: .2rem; } .phone { position: relative; align-self: center; width: min(100%, 15.5rem); aspect-ratio: 9 / 18.6; padding: .55rem; border-radius: 2.4rem; background: linear-gradient(145deg, #3a3d42, #16181b 60%, #2a2d31); box-shadow: inset 0 0 0 2px #4b4f55, 0 24px 40px -18px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .15) inset; } .phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2d31; } .phone::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 3.4rem 0 #2a2d31; } .phone::after { right: -3px; top: 28%; height: 13%; } .phone__screen { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 1.9rem; overflow: hidden; background: #efeae2; font: 400 .66rem/1.35 -apple-system, "SF Pro Text", var(--sans); color: #111b21; } .phone__status { display: flex; align-items: center; justify-content: space-between; height: 1.9rem; padding: 0 1.1rem 0 1.25rem; background: #f6f6f6; font-weight: 700; font-size: .68rem; } .phone__island { width: 4.4rem; height: 1.15rem; border-radius: 999px; background: #000; } .phone__sys { display: flex; align-items: center; gap: .25rem; } .phone__sig { width: .85rem; height: .55rem; background: linear-gradient(90deg, #111 0 18%, transparent 18% 27%, #111 27% 45%, transparent 45% 54%, #111 54% 72%, transparent 72% 81%, #111 81%); clip-path: polygon(0 100%, 100% 0, 100% 100%); } .phone__bat { position: relative; width: 1.15rem; height: .55rem; border: 1.5px solid #111; border-radius: 3px; } .phone__bat::after { content: ""; position: absolute; inset: 1px 30% 1px 1px; background: #111; border-radius: 1px; } .phone__head { display: flex; align-items: center; gap: .45rem; padding: .4rem .6rem .5rem; background: #f6f6f6; border-bottom: 1px solid #e2e2e2; } .phone__back { fill: none; stroke: #1b8755; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; width: .55rem; } .phone__avatar { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--petrol); } .phone__avatar img { width: 78%; height: auto; } .phone__who { display: grid; line-height: 1.2; min-width: 0; } .phone__who b { font-size: .74rem; } .phone__who small { font-size: .56rem; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phone__chat { flex: 1; display: flex; flex-direction: column; gap: .4rem; padding: .55rem .5rem; overflow: hidden; background-color: #efeae2; background-image: radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1.3px), radial-gradient(rgba(0, 0, 0, .03) 1px, transparent 1.3px); background-size: 14px 14px, 22px 22px; background-position: 0 0, 7px 9px; } .phone__day { align-self: center; padding: .12rem .5rem; border-radius: 6px; background: #fff; color: #54656f; font-size: .58rem; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } .phone__msg { position: relative; align-self: flex-start; max-width: 88%; padding: .3rem .45rem 1rem; border-radius: 0 .55rem .55rem .55rem; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } .phone__msg::before { content: ""; position: absolute; left: -.35rem; top: 0; border-top: .45rem solid #fff; border-left: .4rem solid transparent; } .phone__msg + .phone__msg, .phone__typing + .phone__msg { border-radius: .55rem; } .phone__msg + .phone__msg::before, .phone__typing + .phone__msg::before { display: none; } .phone__from { font-weight: 700; color: #1f7aa8; font-size: .62rem; } .phone__from small { margin-left: .25rem; padding: 0 .25rem; border-radius: 3px; background: #e7f3ee; color: #1b8755; font-size: .5rem; font-weight: 600; } .phone__img { display: block; margin: .25rem 0 .3rem; border-radius: .4rem; overflow: hidden; height: 5.6rem; } .phone__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .phone__time { position: absolute; right: .45rem; bottom: .2rem; font-size: .52rem; color: #667781; } .phone__react { position: absolute; left: .5rem; bottom: -.62rem; display: inline-flex; align-items: center; gap: .15rem; padding: .08rem .35rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11, 20, 26, .2); font-size: .55rem; } .phone__react svg { fill: #e0245e; } .phone__react .phone__thumb { fill: #f5b301; } .phone__msg--2 { margin-top: .5rem; } .phone__typing { align-self: flex-start; display: none; gap: 3px; padding: .45rem .6rem; border-radius: .55rem; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } .phone__typing span { width: 5px; height: 5px; border-radius: 50%; background: #8696a0; } .phone__foot { padding: .5rem .6rem .9rem; background: #f6f6f6; border-top: 1px solid #e2e2e2; text-align: center; color: #667781; font-size: .58rem; } @media (prefers-reduced-motion: no-preference) { .phone.is-armed:not(.is-live) { opacity: 0; transform: translateY(30px) rotate(-4deg); } .phone.is-armed { transition: opacity .8s var(--ease) .3s, transform 1s cubic-bezier(.34, 1.4, .64, 1) .3s; } .phone.is-live { animation: ph-float 6s ease-in-out 2s infinite; } .phone.is-live .phone__msg--1 { animation: bubble .5s cubic-bezier(.34, 1.56, .64, 1) .9s both; } .phone.is-live .phone__react { animation: pop .45s var(--ease) 1.6s both; } .phone.is-live .phone__msg--2 { animation: bubble .5s cubic-bezier(.34, 1.56, .64, 1) 2s both; } .phone.is-live .phone__typing { display: inline-flex; animation: typing-life 1.7s linear 2.7s both; } .phone__typing span { animation: blink 1s infinite; } .phone__typing span:nth-child(2) { animation-delay: .15s; } .phone__typing span:nth-child(3) { animation-delay: .3s; } .phone.is-live .phone__msg--3 { animation: bubble .5s cubic-bezier(.34, 1.56, .64, 1) 4.3s both; } .phone.is-armed:not(.is-live) .phone__msg { opacity: 0; } } @keyframes ph-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(.6deg); } } /* --- TOSCANI27: Kontur zeichnen (0,8 s) → Farbe füllen → kurzer Bounce --- Schrift als Pfade (aus Inter ExtraBold erzeugt, dev/glyphs.py) – funktioniert ohne Webfont-Text in allen Browsern; Endzustand = Originaldarstellung (auch ohne JS / bei reduzierter Bewegung). */ .t27__svg { display: block; width: 100%; height: auto; aspect-ratio: 2392 / 680; } .t27__claim { fill: #fff; } .t27__claim .t27__dot { fill: var(--orange); } .t27__big path { fill: none; stroke: #fff; stroke-width: 7; stroke-linejoin: round; } .t27__name path { fill: #fff; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; } .t27__num path { fill: var(--orange); stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; } .t27__logo, .t27__bar { transform-box: fill-box; } .t27__logo { transform-origin: 50% 100%; } .t27__bar { transform-origin: 50% 100%; } @media (prefers-reduced-motion: no-preference) { .t27.is-armed:not(.is-live) .t27__p { stroke-dasharray: 1 1; stroke-dashoffset: 1; fill-opacity: 0; } .t27.is-armed:not(.is-live) .t27__bar { transform: scaleY(0); } .t27.is-armed .t27__bar { transition: transform 1s cubic-bezier(.2, .8, .2, 1); } .t27.is-armed .t27__bar--2 { transition-delay: .1s; } .t27.is-armed .t27__bar--3 { transition-delay: .2s; } .t27.is-live .t27__p { stroke-dasharray: 1 1; animation: t27-draw .8s cubic-bezier(.65, 0, .35, 1) .3s both, t27-fill .45s ease-out 1.1s both; } .t27.is-live .t27__big .t27__p { animation: t27-draw .8s cubic-bezier(.65, 0, .35, 1) .3s both; fill-opacity: 1; } .t27.is-live .t27__logo { animation: t27-bounce .6s cubic-bezier(.34, 1.56, .64, 1) 1.55s both; } } @keyframes t27-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes t27-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } } @keyframes t27-bounce { 0% { transform: none; } 30% { transform: translateY(-14px) scale(1.04); } 55% { transform: translateY(3px) scale(.99); } 75% { transform: translateY(-4px); } 100% { transform: none; } } /* --- Rechtstexte --- */ .legal__inner { display: grid; gap: 2rem 4rem; align-items: start; } @media (min-width: 64rem) { .legal__inner { grid-template-columns: 16rem minmax(0, 1fr); } .legal__toc { position: sticky; top: 6.5rem; } } .legal__toc { padding: 1.25rem 1.4rem; background: var(--tuerkis-20); border-top: 4px solid var(--petrol); font-size: .95rem; } .legal__toctitle { font-weight: 800; color: var(--petrol); margin-bottom: .6rem; } .legal__toc ol { padding-left: 1.2rem; display: grid; gap: .35rem; } .legal__toc a { text-decoration: none; } .legal__toc a:hover { text-decoration: underline; } .legal__text { max-width: 48rem; } .legal__text h2 { scroll-margin-top: 6rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); } .legal__stand { margin-top: 2.5rem; color: var(--muted); font-size: .95rem; } /* --- Kontakt: Frage + WhatsApp nebeneinander --- */ .kontakt-duo { display: grid; gap: 1.5rem; align-items: start; } @media (min-width: 64rem) { .kontakt-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wabox__body { display: grid; gap: 1.5rem; align-items: start; } @media (min-width: 40rem) { .wabox__body { grid-template-columns: 13.5rem minmax(0, 1fr); } } .wabox .phone { width: 13.5rem; justify-self: center; } /* ========================================================================== 1.11 – Footer: weitere Seiten klar als Links erkennbar ========================================================================== */ .flabel--links { margin-top: 1.25rem; } .flinks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .flinks a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; border: 1px solid var(--line); border-left: 3px solid var(--tuerkis); border-radius: 3px; background: var(--white); color: var(--petrol); font-weight: 700; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .flinks__t { display: grid; line-height: 1.2; } .flinks__t small { font-size: .78rem; font-weight: 400; color: var(--muted, #4a5b63); transition: color .2s var(--ease); } .flinks .icon { width: 1rem; height: 1rem; color: var(--tuerkis); transition: transform .2s var(--ease), color .2s var(--ease); } .flinks a:hover, .flinks a:focus-visible { background: var(--petrol); border-color: var(--petrol); border-left-color: var(--orange); color: var(--white); transform: translateX(3px); box-shadow: 0 8px 18px -12px rgba(16, 85, 105, .8); } .flinks a:hover small, .flinks a:focus-visible small { color: var(--tuerkis-60); } .flinks a:hover .icon, .flinks a:focus-visible .icon { color: var(--orange); transform: translate(2px, -2px); } /* Kontakt-Links und Rechtliches ebenfalls eindeutig klickbar */ .site-footer .flist a { color: var(--petrol); font-weight: 700; text-decoration: underline; text-decoration-color: var(--tuerkis-60); text-decoration-thickness: 2px; text-underline-offset: .25em; } .site-footer .flist a:hover { text-decoration-color: var(--orange); } .nav__list a, .brand__name, .brand__sub, .nav__donate { white-space: nowrap; } /* Beitrag mit Einladungsmotiv (Flyer) neben dem Text */ .article__grid { display: grid; gap: 2rem; align-items: start; } @media (min-width: 56rem) { .article__grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3.5rem; } } .article__flyer, .prose .article__flyer { margin: 0; } .article__flyer img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 24px 50px -28px rgba(16, 85, 105, .7); } .article__flyer figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); } @media (min-width: 56rem) { .article__flyer { position: sticky; top: 6.5rem; } } .prose .article__flyer { max-width: 26rem; margin-block: 2rem; } .nw { white-space: nowrap; } /* ========================================================================== 1.13 – Kopfzeile im Stil der CDU Saarbrücken-Stadt Petrol-Leiste (80 px), weißes Logofeld, Navigation in Versalien, „Mitmachen“ umrandet, „Spenden“ orange. Die Leiste ist das oberste Element und petrolfarben – Safari/Chrome färben ihre Browserleiste dadurch mit ein. ========================================================================== */ html { background-color: var(--petrol); } body { background-color: var(--white); } .site-header { position: sticky; top: 0; z-index: 50; background: var(--petrol); border: 0; box-shadow: none; color: var(--white); --focus: var(--white); } .site-header.is-scrolled { background: var(--petrol); box-shadow: 0 2px 24px rgba(0, 0, 0, .18); } .site-header__inner { min-height: 5rem; gap: 1.5rem; } .site-header .brand { gap: .9rem; color: var(--white); } .site-header .brand__box, .site-header.is-scrolled .brand__box { background: var(--white); padding: .45rem .7rem; border-radius: 0; box-shadow: none; } .site-header .brand__box .logo { width: 7.25rem; } .site-header .brand__text { display: grid; line-height: 1.1; } .site-header .brand__sub { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tuerkis-60); } .site-header .brand__name { font-size: 1.05rem; font-weight: 800; color: var(--white); white-space: nowrap; } .nav__home .icon { width: 1.15rem; height: 1.15rem; display: block; } @media (min-width: 64rem) { .nav { display: flex; align-items: center; gap: .5rem; } .nav__list { display: flex; flex-wrap: nowrap; gap: 0; } .site-header .nav__list a { display: block; padding: .7rem .95rem; border: 0; border-radius: 0; font: 700 .9rem/1.2 var(--sans); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--white); background: none; transition: color .2s var(--ease), background-color .2s var(--ease); } .site-header .nav__list a::after { content: none; } .site-header .nav__list a:hover, .site-header .nav__list a:focus-visible, .site-header .nav__list .is-current > a, .site-header .nav__list .current-menu-item > a, .site-header .nav__list a[aria-current="page"] { color: var(--orange); background: none; border: 0; } .site-header .nav__list .is-current > a, .site-header .nav__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; } .site-header .nav__list .nav__item--mitmachen > a { border: 1px solid var(--white); margin-left: .5rem; } .site-header .nav__list .nav__item--mitmachen > a:hover, .site-header .nav__list .nav__item--mitmachen > a:focus-visible { background: var(--white); color: var(--petrol); } .site-header .nav__list .nav__item--mitmachen > a[aria-current="page"] { background: var(--white); color: var(--petrol); text-decoration: none; } .site-header .nav__donate { margin-left: .5rem; min-height: 0; padding: .7rem 1.1rem; border: 1px solid var(--orange); border-radius: 0; font: 700 .9rem/1.2 var(--sans); letter-spacing: .02em; text-transform: uppercase; background: var(--orange); color: var(--ink); box-shadow: none; transform: none; } .site-header .nav__donate:hover, .site-header .nav__donate:focus-visible { background: var(--white); border-color: var(--white); color: var(--petrol); transform: none; } .site-header .nav__donate .icon { width: 1rem; height: 1rem; } .nav__meta { display: none; } .nav__home { color: var(--orange) !important; } } @media (min-width: 64rem) and (max-width: 86rem) { .site-header .nav__list a { padding-inline: .6rem; font-size: .8rem; } .site-header .nav__donate { padding-inline: .8rem; font-size: .8rem; } .site-header .brand__sub { display: none; } } @media (min-width: 64rem) and (max-width: 79rem) { .site-header .brand__text, .nav__item--home { display: none; } .site-header .nav__list a { padding-inline: .5rem; font-size: .76rem; letter-spacing: .01em; } .site-header .nav__donate .icon { display: none; } } /* Mobil: Petrol-Leiste mit Logo und weißem Menü-Knopf, Menü klappt petrolfarben auf */ @media (max-width: 63.99rem) { .site-header__inner { min-height: 4.25rem; } .site-header .brand__box .logo { width: 5.75rem; } .site-header .brand__sub { font-size: .58rem; } .site-header .brand__name { font-size: .95rem; } .nav-toggle { background: transparent; color: var(--white); border: 1px solid var(--white); border-radius: 0; padding-inline: .9rem; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; } .nav-toggle[aria-expanded="true"] { background: var(--white); color: var(--petrol); } .js .nav { background: var(--petrol); border: 0; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); padding: .5rem var(--gutter) 1.5rem; max-height: calc(100vh - 4.25rem); } .js .site-header .nav__list a, html:not(.js) .site-header .nav__list a { display: flex; align-items: center; justify-content: space-between; padding: .95rem .1rem; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font: 700 1.05rem/1.2 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: var(--white); box-shadow: none; } .js .site-header .nav__list a::after { content: ""; width: .5rem; height: .5rem; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); transform: rotate(45deg); margin-right: .4rem; } .js .site-header .nav__list .is-current > a, .js .site-header .nav__list a[aria-current="page"] { color: var(--orange); padding-left: .1rem; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .18); } .nav__item--home { display: none; } .site-header .nav__donate { border-radius: 0; text-transform: uppercase; letter-spacing: .03em; margin-top: 1.25rem; } .nav__meta { display: grid; gap: .6rem; margin-top: 1.25rem; } .nav__meta a { display: inline-flex; align-items: center; gap: .6rem; color: var(--white); font-weight: 700; text-decoration: none; } } @media (max-width: 63.99rem) and (prefers-reduced-motion: no-preference) { .js .nav.is-open { animation: nav-in .3s var(--ease) both; } .js .nav.is-open .nav__list li { animation: nav-item .4s var(--ease) both; } .js .nav.is-open .nav__list li:nth-child(3) { animation-delay: .04s; } .js .nav.is-open .nav__list li:nth-child(4) { animation-delay: .08s; } .js .nav.is-open .nav__list li:nth-child(5) { animation-delay: .12s; } .js .nav.is-open .nav__list li:nth-child(6) { animation-delay: .16s; } .js .nav.is-open .nav__list li:nth-child(7) { animation-delay: .2s; } .js .nav.is-open .nav__list li:nth-child(n+8) { animation-delay: .24s; } } @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes nav-item { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } .site-header .brand { flex: none; } .site-header .brand__box { flex: none; } .site-header .brand__box .logo { max-width: none; } @media (min-width: 86rem) { .site-header__inner.wrap { max-width: 84rem; } .site-header .nav__list a { padding-inline: .75rem; font-size: .86rem; } } .site-header .nav__list > li { flex: none; } /* Mobil: gezielte Zeilenumbrüche */ .hl__br { display: none; } .hl__sub { text-wrap: balance; } @media (max-width: 47.99rem) { .hl__br { display: inline; } .tosc__role { display: block; margin-top: .45rem; } .qbox__facts li:has(.qbox__tel) { align-items: flex-start; } .qbox__tel { display: block; white-space: nowrap; } } /* 1.14 – Bilanz: Pfeil nach unten rechts neben der Überschrift */ .bilanz__top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; } .bilanz__arrow { flex: none; width: clamp(4.5rem, 3rem + 6vw, 9rem); } .bilanz__arrow svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; } .barrow__trail path { stroke: rgba(255, 115, 0, .35); stroke-width: 8; } .barrow__shaft, .barrow__tip { stroke: var(--orange); stroke-width: 16; } .barrow__floor { stroke: rgba(255, 255, 255, .25); stroke-width: 4; } .barrow__head { filter: drop-shadow(0 10px 18px rgba(255, 115, 0, .45)); } @media (max-width: 47.99rem) { .bilanz__top { align-items: flex-start; gap: 1rem; } .bilanz__arrow { width: 3.25rem; margin-top: 2.6rem; } } @media (prefers-reduced-motion: no-preference) { .bilanz.is-armed:not(.is-live) .barrow__head { opacity: 0; transform: translateY(-60px); } .bilanz.is-live .barrow__head { animation: barrow-drop 1s cubic-bezier(.55, 0, .7, .3) .2s both, barrow-bob 2.4s ease-in-out 1.4s infinite; } .bilanz.is-live .barrow__trail path { animation: barrow-trail 2.4s linear 1.2s infinite; } .bilanz.is-live .barrow__trail path:nth-child(2) { animation-delay: 1.5s; } .bilanz.is-live .barrow__trail path:nth-child(3) { animation-delay: 1.8s; } } @keyframes barrow-drop { 0% { opacity: 0; transform: translateY(-60px); } 60% { opacity: 1; transform: translateY(14px); } 78% { transform: translateY(-6px); } 100% { opacity: 1; transform: none; } } @keyframes barrow-bob { 0%, 100% { transform: none; } 50% { transform: translateY(12px); } } @keyframes barrow-trail { 0% { opacity: 0; transform: translateY(-12px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } } /* 1.14 – Footer: weitere Seiten kompakt in einer Zeile */ .site-footer__grid { padding-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); } .site-footer__more { border-top: 1px solid var(--line); } .fmore { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; padding-block: 1rem; } .fmore__label { font-weight: 800; color: var(--petrol); font-size: .95rem; } .fchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .fchips a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--petrol); font-size: .875rem; font-weight: 700; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .fchips .icon { width: .85rem; height: .85rem; color: var(--tuerkis); transition: color .2s var(--ease), transform .2s var(--ease); } .fchips a:hover, .fchips a:focus-visible { background: var(--petrol); border-color: var(--petrol); color: var(--white); } .fchips a:hover .icon, .fchips a:focus-visible .icon { color: var(--orange); transform: translate(1px, -1px); } /* 1.15 – Footer ohne Newsletter-Formular: kompakter */ @media (min-width: 72rem) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr 1fr; } } .site-footer__grid { padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); } .brand--footer { margin-bottom: 0; } .nmedia__img { object-position: 50% 15%; } /* 1.17 */ .werte__more { margin-top: 1.75rem; } .tile__addr { font-style: normal; line-height: 1.6; } .tile__addr a { color: var(--petrol); font-weight: 700; } /* Landtagswahl-Titel: Schlusspunkt bleibt mobil am Wort */ .ltw-hero .nb { white-space: nowrap; } @media (max-width: 47.99rem) { .ltw-hero .stage__title { font-size: clamp(1.8rem, 9.2cqi, 2.6rem); } } /* Sehr schmale Handys: nur Logo + Menü-Knopf in der Kopfzeile */ @media (max-width: 24rem) { .site-header .brand__text { display: none; } } /* 1.18 – Foto über die volle Breite */ .photo-band { margin: 0; overflow: hidden; background: var(--petrol-dark); line-height: 0; } .photo-band__img { display: block; width: 100%; height: clamp(14rem, 39.5vw, 42rem); object-fit: cover; object-position: 55% 40%; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .photo-band__img { scale: 1.1; animation: tosc-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } } /* Toscani-Foto: immer vollständig (Schrift im Bild bleibt lesbar) – keine Vergrößerung, keine Parallaxe */ .tosc__img { scale: none; translate: none; } @media (prefers-reduced-motion: no-preference) { .tosc.is-armed:not(.is-live) .tosc__img { transform: none; opacity: 0; } .tosc.is-armed .tosc__img { transition: opacity 1.2s var(--ease); } } /* 1.19 – Grußwort: stilisierte Unterschrift */ .welcome__sign { display: grid; gap: .35rem; margin: 2.25rem 0 0; } .welcome__name { margin: 0; line-height: 0; } .sig { display: block; width: min(19rem, 82%); height: auto; overflow: visible; } .sig__ink { fill: var(--petrol); } .welcome__role { margin: .4rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--muted); } @media (max-width: 47.99rem) { .welcome__photo { margin: .6rem 0 0 .6rem; } .welcome__sign { margin-top: 2.5rem; } .sig { width: min(16.5rem, 88%); } } @media (prefers-reduced-motion: no-preference) { .js .welcome .sig__ink { transition: clip-path 1.8s cubic-bezier(.45, 0, .25, 1) .5s; clip-path: inset(-10% -5% -10% -5%); } .js .welcome.is-pre .sig__ink { clip-path: inset(-10% 100% -10% -5%); } } .js .welcome__photo, .welcome__photo { overflow: visible; } /* 1.20 – Vorschaubild ohne Foto: Logo der Ebene */ .nmedia__cover { place-items: center; } .nmedia__cover::after { display: none; } .nmedia__logo { position: relative; display: grid; justify-items: center; gap: .55rem; width: min(62%, 15rem); transition: transform .5s var(--ease); } .nmedia__mark { display: grid; place-items: center; width: 100%; padding: 8% 10%; background: var(--white); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55); } .nmedia__mark .logo { display: block; width: 100%; height: auto; } .nmedia__lvl { font-weight: 800; font-size: clamp(.95rem, .8rem + .5vw, 1.25rem); line-height: 1.1; letter-spacing: -.005em; color: var(--white); text-align: center; } .nmedia__cover--land .nmedia__lvl { color: var(--ink); } .nmedia__cover--bund .nmedia__mark { background: var(--white); } .nmedia__logofile { position: relative; width: min(70%, 18rem); height: auto; max-height: 70%; object-fit: contain; } .ncard:hover .nmedia__logo, .ovc:hover .nmedia__logo { transform: scale(1.04); } /* 1.20.1 – Toscani-Zitat: weiße Unterlegung, Text in Petrol, ohne großes Anführungszeichen */ .tosc__quote { padding-top: 0; } .tosc__quote::before { content: none; } .tosc__quote p { line-height: 1.55; } .tosc__qtext { background: var(--white); color: var(--petrol); padding: .12em .4em .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .tosc__quote figcaption { margin-top: 1rem; font-weight: 700; color: var(--white); } /* 1.21 – Themen der CDU Deutschlands (Darstellung wie cdu.de/themen) */ .themen { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2.5rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); } .thema__link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; } .thema__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tuerkis-20); } .thema__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .thema__title { position: absolute; left: .9rem; right: 2.5rem; bottom: 1rem; font-weight: 800; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); line-height: 1.55; color: var(--petrol); } .thema__title > span { background: var(--white); padding: .2em .55em .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .thema__text { display: block; margin-top: 1.1rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; color: var(--ink); flex: 1; } .thema__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; align-self: flex-start; font-weight: 700; color: var(--petrol); border-bottom: 2px solid var(--orange); padding-bottom: .1rem; } .thema__more .icon { width: 1rem; height: 1rem; transition: transform .2s var(--ease); } .thema__link:hover .thema__img, .thema__link:focus-visible .thema__img { transform: scale(1.05); } .thema__link:hover .thema__more .icon { transform: translate(2px, -2px); } .thema__link:hover .thema__title > span { background: var(--petrol); color: var(--white); } .thema__title > span { transition: background-color .25s var(--ease), color .25s var(--ease); } .themen__all { margin-top: 2.25rem; } /* 1.22 – Logo-Vorschaubilder der Ebenen (assets/img/ebenen/) */ .nmedia__img--logo { object-position: 50% 50%; } .ncard:hover .nmedia__img--logo { transform: scale(1.03); } .nmedia:has(.nmedia__img--logo[src*="bund"]) { box-shadow: inset 0 -1px 0 var(--line); } /* 1.23 – Startseite mobil: Kandidatenfoto direkt unter die Ortsliste (vor die Buttons) */ @media (max-width: 63.99rem) { .stage__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; container-type: inline-size; } .stage__text { display: contents; } .stage__title { order: 1; } .stage__sub { order: 2; } .stage__media { order: 3; margin-top: 1.75rem; align-self: stretch; } .stage__actions { order: 4; } } @media (max-width: 47.99rem) { .stage .nb { white-space: nowrap; } .stage__title { font-size: clamp(1.7rem, 9.2cqi, 3.9rem); } } /* 1.23 – Häufige Fragen */ .faq__list { margin-top: 1.75rem; display: grid; gap: .75rem; max-width: 52rem; } .faq__item { background: var(--white); border-left: 4px solid var(--tuerkis); box-shadow: 0 10px 24px -20px rgba(16, 85, 105, .6); } .faq__item[open] { border-left-color: var(--orange); } .faq__q { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; font-weight: 800; font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); color: var(--petrol); } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; flex: none; width: .6rem; height: .6rem; border-right: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); } .faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); } .faq__a { margin: 0; padding: 0 1.25rem 1.15rem; line-height: 1.65; } /* Startseite mobil: „Mitglied werden“ und „Mitmachen“ immer nebeneinander */ @media (max-width: 47.99rem) { .stage__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .stage__actions .btn { width: 100%; min-width: 0; padding-inline: .6rem; font-size: clamp(.9rem, .8rem + .5vw, 1rem); white-space: nowrap; } .stage__actions .stage__ask { grid-column: 1 / -1; justify-self: start; } } /* 1.24 – Foto über „Am 18. April 2027 wählen“ */ .duo__card { --duo-pad: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .duo__photo { margin: calc(-1 * var(--duo-pad)) calc(-1 * var(--duo-pad)) .6rem; overflow: hidden; border-bottom: 4px solid var(--orange); } .duo__photoimg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 88%; transition: transform .8s var(--ease); } .duo__card--petrol:hover .duo__photoimg { transform: scale(1.03); } /* 1.25 – Hintergrund-Balken wie im CDU-Logo: Oberkanten folgen einer gemeinsamen, ansteigenden Kurve */ .stage__bars { gap: 5%; } .stage__bar { height: 100% !important; border-radius: 0 !important; } .stage__bar--1 { clip-path: polygon(0.0% 63.71%, 12.5% 63.14%, 25.0% 62.43%, 37.5% 61.60%, 50.0% 60.63%, 62.5% 59.54%, 75.0% 58.32%, 87.5% 56.97%, 100.0% 55.49%, 100% 100%, 0% 100%); } .stage__bar--2 { clip-path: polygon(0.0% 53.29%, 12.5% 51.51%, 25.0% 49.59%, 37.5% 47.55%, 50.0% 45.38%, 62.5% 43.07%, 75.0% 40.64%, 87.5% 38.08%, 100.0% 35.39%, 100% 100%, 0% 100%); } .stage__bar--3 { clip-path: polygon(0.0% 31.57%, 12.5% 28.58%, 25.0% 25.45%, 37.5% 22.20%, 50.0% 18.82%, 62.5% 15.31%, 75.0% 11.67%, 87.5% 7.90%, 100.0% 4.00%, 100% 100%, 0% 100%); } /* 1.26 – Team: Verband je Person, Liste besondere Aufgaben */ .person__ort { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; font-size: .85rem; color: var(--muted); } .person__ort .icon { width: .9rem; height: .9rem; color: var(--tuerkis); } .team-sub { margin: 2.75rem 0 1.1rem; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); color: var(--petrol); } .namelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } .namelist li { display: grid; gap: .1rem; padding: .7rem .9rem; background: var(--white); border-left: 3px solid var(--tuerkis); } .namelist__name { font-weight: 700; color: var(--ink); } .namelist__ort { font-size: .85rem; color: var(--muted); } .person { align-content: start; } .person__name { margin-top: .5rem; } .person__role { margin: 0; } .person .portrait { object-position: 50% 18%; background: var(--petrol); } /* Landtagswahl: freigestelltes Gruppenfoto auf Petrol-Bühne (1.28) */ .gstage { position: relative; max-width: 84rem; margin: clamp(1.5rem, 1rem + 2vw, 3rem) auto 0; padding: 0 clamp(0rem, -2rem + 4vw, 2rem); isolation: isolate; } .gstage__panel { position: absolute; inset: 24% clamp(0rem, -2rem + 4vw, 2rem) 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #1b6e86 0%, var(--petrol) 55%, #0a3a48 100%); } .gstage__bar { position: absolute; bottom: 0; width: 13%; background: rgba(255, 255, 255, .06); } .gstage__bar:nth-child(1) { left: 4%; height: 38%; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); } .gstage__bar:nth-child(2) { left: 18.5%; height: 58%; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); } .gstage__bar:nth-child(3) { left: 33%; height: 82%; clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%); } .gstage__glow { position: absolute; inset: -30% -10%; background: radial-gradient(35% 45% at 50% 55%, rgba(255, 255, 255, .22), transparent 70%); } .gstage__img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgba(0, 20, 28, .45)); } .gstage__cap { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .9rem; margin: 0; padding: .85rem 1rem; background: var(--orange); color: var(--white); font-weight: 800; font-size: clamp(1rem, .85rem + .7vw, 1.5rem); letter-spacing: .01em; text-transform: uppercase; text-align: center; } .section--tint:has(.gstage) { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); } .gstage + .wrap { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } @media (prefers-reduced-motion: no-preference) { .gstage__glow { animation: gstage-glow 9s ease-in-out infinite alternate; } .gstage__img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity .9s ease; } .gstage__panel { transition: transform 1s cubic-bezier(.65, 0, .25, 1); transform-origin: 50% 100%; } .gstage__cap span { display: inline-block; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s ease; } .gstage__cap span:nth-child(2) { transition-delay: .12s; } .gstage__cap span:nth-child(3) { transition-delay: .24s; } .js .gstage.is-pre .gstage__img { transform: translateY(9%); opacity: 0; } .js .gstage.is-pre .gstage__panel { transform: scaleY(.55); } .js .gstage.is-pre .gstage__cap span { transform: translateY(.6em); opacity: 0; } .js .gstage:not(.is-pre) .gstage__img { transition-delay: .25s; } .js .gstage:not(.is-pre) .gstage__cap span { transition-delay: calc(.9s + var(--d, 0s)); } .gstage__cap span:nth-child(2) { --d: .12s; } .gstage__cap span:nth-child(3) { --d: .24s; } } @keyframes gstage-glow { from { transform: translateX(-28%); } to { transform: translateX(28%); } } @media (max-width: 40rem) { .gstage__panel { inset-block-start: 30%; } } /* 1.29 – Startseite: freigestelltes Gruppenfoto steht auf der Unterkante der Bühne */ .stage__media--cut { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; } .stage__group { position: relative; margin-bottom: calc(-1 * clamp(2.5rem, 1.5rem + 4vw, 5rem)); } .stage__group::before { content: ""; position: absolute; inset: 8% 4% 0; z-index: -1; background: radial-gradient(60% 55% at 50% 60%, rgba(160, 225, 240, .28), transparent 70%); } .stage__groupimg { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 34px rgba(0, 25, 35, .5)); } @media (min-width: 64rem) { .stage__inner { grid-template-columns: minmax(0, .82fr) minmax(0, 1.38fr); } .stage__group { width: calc(100% + clamp(6rem, 14vw, 13rem)); margin-left: clamp(-10rem, -10vw, -4rem); margin-top: 1.5rem; } .stage__text { position: relative; z-index: 3; } } @media (max-width: 63.99rem) { .stage__media--cut { margin-top: 1.5rem; } .stage__group { margin-bottom: 0; margin-inline: calc(-1 * var(--gutter, 1rem)); } .stage__groupimg { border-bottom: 5px solid var(--orange); } } @media (prefers-reduced-motion: no-preference) { .stage__groupimg { animation: group-rise 1.3s cubic-bezier(.2, .8, .2, 1) .3s both; } .stage__group::before { animation: fade-in 1.6s var(--ease) .6s both; } } @keyframes group-rise { from { transform: translateY(8%); opacity: 0; } to { transform: none; opacity: 1; } } /* 1.29.1 – Beschriftung mittig auf dem Gruppenfoto */ .stage__media--cut .stage__cap { position: absolute; z-index: 2; left: 50%; bottom: clamp(.75rem, .25rem + 1.2vw, 1.75rem); transform: translateX(-50%); margin: 0; max-width: none; width: max-content; } .stage__media--cut .stage__cap a { display: grid; justify-items: center; gap: .15rem; text-align: center; padding: .85rem 1.6rem .95rem; background: rgba(13, 64, 80, .9); color: var(--white); border-top: 4px solid var(--orange); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .stage__media--cut .stage__capline { color: var(--white); font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); } .stage__capkicker { font-weight: 700; color: var(--tuerkis-60); font-size: clamp(.95rem, .9rem + .25vw, 1.08rem); } .stage__media--cut .stage__capsub { color: rgba(255, 255, 255, .92); font: 400 clamp(.9rem, .85rem + .2vw, 1rem)/1.35 var(--serif); } .stage__media--cut .stage__cap a:hover .stage__capline { text-decoration: underline; text-decoration-color: var(--orange); } @media (max-width: 63.99rem) { .stage__media--cut .stage__cap { position: relative; left: auto; bottom: auto; transform: none; width: auto; margin: 0 0 1.25rem; } .stage__media--cut .stage__cap a { padding: .8rem 1rem .9rem; border-top: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--petrol-dark, #0d4050); } .stage__media--cut .stage__cap { animation: none; } .stage__media--cut + * { margin-top: 0; } } @media (prefers-reduced-motion: no-preference) { .stage__media--cut .stage__cap { animation: cap-in .7s var(--ease) 1.2s both; } } @keyframes cap-in { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translateX(-50%); } } @media (max-width: 63.99rem) { .stage .stage__media--cut .stage__cap { animation: none; transform: none; left: auto; width: auto; } } /* 1.31 – Scroll-Erlebnis: Lenis, Lesefortschritt, ausweichende Kopfzeile, Laufband */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-map] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .scrollprog { position: fixed; z-index: 120; inset: 0 0 auto; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .site-header { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s var(--ease); } .site-header.is-hidden { transform: translateY(-100%); box-shadow: none; } [data-parallax] { will-change: translate; } } .marquee { overflow: hidden; padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); background: var(--white); color: var(--petrol); line-height: 1; contain: paint; } .marquee__row { display: flex; width: max-content; gap: .45em; white-space: nowrap; font-weight: 800; font-size: clamp(2.6rem, 1.4rem + 6vw, 7.5rem); letter-spacing: -.02em; will-change: transform; } .marquee__row + .marquee__row { margin-top: .12em; } .marquee__row--outline { color: transparent; -webkit-text-stroke: 2px var(--petrol); } @supports not (-webkit-text-stroke: 1px black) { .marquee__row--outline { color: var(--tuerkis); } } .marquee__dot { color: var(--orange); font-size: .35em; align-self: center; -webkit-text-stroke: 0; } @media (prefers-reduced-motion: reduce) { .marquee__row { flex-wrap: wrap; width: auto; white-space: normal; } .marquee__row > :nth-child(n+3) { display: none; } } /* 1.32 – Weitere Scroll-Effekte (scroll.js) */ /* Horizontale Schiene: ohne JS/auf kleinen Bildschirmen normales Raster wie bisher */ .hrail__sticky { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .hrail__bar { display: none; } .hrail.is-on .hrail__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); } .hrail.is-on .hrail__track { display: flex; width: max-content; gap: 1.75rem; margin-bottom: 0; will-change: transform; } .hrail.is-on .thema { flex: none; width: clamp(19rem, 25vw, 25rem); } .hrail.is-on .hrail__track { margin-top: clamp(1.25rem, 3vh, 2.25rem); } .hrail.is-on .hrail__bar { display: block; position: relative; height: 3px; margin: 2.25rem 0 0; max-width: var(--wrap); background: var(--line); } .hrail__bar span { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; } .hrail.is-on + .wrap .themen__all { margin-top: 0; } /* Text liest sich frei */ .scrub__w { opacity: .22; transition: opacity .35s ease; } .scrub__w.is-lit { opacity: 1; } /* Foto-Band öffnet sich */ .photo-band[data-expand] { will-change: clip-path; } /* 1.32.1 – Toscani-Zitat mit rundem Porträt */ .tosc__quote { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, .6rem + 1.5vw, 1.5rem); align-items: start; } .tosc__quote > blockquote, .tosc__quote > figcaption { grid-column: 2; } .tosc__qimg { grid-column: 1; grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--orange); margin-top: .2rem; } @media (min-width: 48rem) { .tosc__qimg { width: 6rem; height: 6rem; } } /* 1.33 – Toscani-Zitat unter dem Lebenslauf über die volle Breite, kompakt in zwei Zeilen */ .tosc__bandinner > .tosc__quote { grid-column: 1 / -1; margin-top: 0 !important; align-items: center; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .18); } .tosc__bandinner > .tosc__quote p { font-size: clamp(1.02rem, .92rem + .45vw, 1.28rem); line-height: 1.6; } .tosc__bandinner > .tosc__quote figcaption { margin-top: .5rem; } @media (min-width: 48rem) { .tosc__bandinner > .tosc__quote .tosc__qimg { width: 4.75rem; height: 4.75rem; } } /* 1.34 – Menüleiste: 3D-„Liquid Glass“-Buttons Glaskörper aus halbtransparentem Verlauf + Hintergrund-Unschärfe, Lichtkante oben, Schattenkante unten, wandernder Glanzpunkt (folgt dem Mauszeiger über --gx/--gy aus scroll.js), beim Drücken leicht eingedrückt. */ .site-header { --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 48%, rgba(255, 255, 255, .03) 52%, rgba(255, 255, 255, .12) 100%); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(0, 20, 30, .35), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 -10px 18px -10px rgba(255, 255, 255, .28); --glass-drop: 0 1px 1px rgba(0, 20, 30, .25), 0 8px 18px -8px rgba(0, 20, 30, .55); } .lg { position: relative; isolation: isolate; overflow: hidden; border-radius: 999px !important; background: var(--glass-fill) !important; box-shadow: var(--glass-edge), var(--glass-drop) !important; -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); } .lg::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120px 60px at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); opacity: .55; transition: opacity .3s ease; } .lg::after { content: ""; position: absolute; z-index: -1; inset: 1px 6% auto; height: 46%; border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); opacity: .55; } @media (min-width: 64rem) { /* Menüpunkte: Glas erscheint beim Überfahren und für die aktuelle Seite */ .site-header .nav__list { gap: .2rem; } .site-header .nav__list > li > a { border-radius: 999px; position: relative; isolation: isolate; overflow: hidden; } .site-header .nav__list > li:not(.nav__item--mitmachen) > a:hover, .site-header .nav__list > li:not(.nav__item--mitmachen) > a:focus-visible, .site-header .nav__list > li:not(.nav__item--mitmachen) > a[aria-current="page"], .site-header .nav__list > li.is-current:not(.nav__item--mitmachen) > a { color: var(--white); text-decoration: none; background: var(--glass-fill); box-shadow: var(--glass-edge), var(--glass-drop); -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); } .site-header .nav__list > li > a[aria-current="page"], .site-header .nav__list > li.is-current > a { color: var(--white) !important; box-shadow: var(--glass-edge), var(--glass-drop), inset 0 -2px 0 var(--orange); } .nav__home { color: var(--white) !important; display: grid !important; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0 !important; margin-right: .25rem; } /* Mitmachen: dauerhaft Glas */ .site-header .nav__list .nav__item--mitmachen > a { border: 0; margin-left: .45rem; padding-inline: 1.15rem; color: var(--white); background: var(--glass-fill); box-shadow: var(--glass-edge), var(--glass-drop); -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); } .site-header .nav__list > li > a::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(90px 50px at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity .3s ease; } .site-header .nav__list > li > a:hover::before, .site-header .nav__list .nav__item--mitmachen > a::before { opacity: .6; } .site-header .nav__list .nav__item--mitmachen > a:hover, .site-header .nav__list .nav__item--mitmachen > a:focus-visible, .site-header .nav__list .nav__item--mitmachen > a[aria-current="page"] { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .24)) !important; color: var(--white); } /* Spenden: oranges Glas */ .site-header .nav__donate { border: 0; padding-inline: 1.25rem; color: var(--ink); background: linear-gradient(180deg, #ffad66 0%, #ff8a26 46%, #ff7300 54%, #ff8f30 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(120, 45, 0, .45), inset 0 0 0 1px rgba(255, 210, 170, .5), inset 0 -10px 16px -10px rgba(255, 240, 220, .6), 0 1px 1px rgba(0, 20, 30, .25), 0 10px 22px -8px rgba(255, 115, 0, .65) !important; } .site-header .nav__donate:hover, .site-header .nav__donate:focus-visible { color: var(--ink); background: linear-gradient(180deg, #ffbe85 0%, #ff9a40 46%, #ff8414 54%, #ffa04a 100%) !important; } } @media (prefers-reduced-motion: no-preference) { .lg, .site-header .nav__list > li > a { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, background .3s ease, color .2s ease; } .lg:hover, .site-header .nav__list > li > a:hover { transform: translateY(-1px) scale(1.035); } .lg:active, .site-header .nav__list > li > a:active { transform: translateY(1px) scale(.97); transition-duration: .08s; } .lg:hover::before { opacity: 1; } } .lg:active { box-shadow: inset 0 2px 6px rgba(0, 20, 30, .45), inset 0 -1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 20, 30, .2) !important; } /* Ohne Unterstützung für Hintergrund-Unschärfe: etwas deckenderes Glas */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .2)); } } /* Mobil: Menü-Knopf und Spenden ebenfalls als Glas */ @media (max-width: 63.99rem) { .nav-toggle.lg { flex: none; padding-inline: .95rem 1.1rem; border: 0; color: var(--white); } .nav-toggle.lg > span { flex: none; display: inline-flex; } .nav-toggle.lg .nav-toggle__close { display: none; } .nav-toggle.lg[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle.lg[aria-expanded="true"] .nav-toggle__close { display: inline-flex; } .nav-toggle.lg[aria-expanded="true"] { color: var(--white); } .site-header .nav__donate.lg { background: linear-gradient(180deg, #ffad66 0%, #ff8a26 46%, #ff7300 54%, #ff8f30 100%) !important; color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(120, 45, 0, .45), 0 10px 22px -8px rgba(255, 115, 0, .65) !important; } } @media (forced-colors: active) { .lg { border: 1px solid ButtonText !important; } .lg::before, .lg::after { display: none; } } @media (max-width: 63.99rem) { .site-header__inner { gap: .75rem; } .nav-toggle.lg { gap: .35rem; padding-inline: .8rem .95rem; font-size: .8rem; } } @media (max-width: 26rem) { .nav-toggle.lg { padding-inline: .75rem; } .nav-toggle.lg .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* 1.35 – Ausführliche Kandidatinnen-Profilseite (parts/candidate-profile.php) */ .cp-hero__photo .cand__img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 1260; object-fit: cover; object-position: 50% 20%; } .cp-badge { position: absolute; left: -1rem; bottom: 2rem; display: grid; place-items: center; width: 5.25rem; height: 5.25rem; background: var(--orange); color: var(--ink); box-shadow: var(--shadow); line-height: 1; } .cp-badge__k { font-size: .75rem; font-weight: 700; margin-top: .9rem; } .cp-badge__n { font-size: 2.6rem; font-weight: 800; margin-top: -.6rem; } @media (prefers-reduced-motion: no-preference) { .cp-badge { animation: fade-up .7s var(--ease) 1.1s both; } } .cp-stats { background: var(--petrol); color: var(--white); } .cp-stats__list { list-style: none; margin: 0 auto; padding-block: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } @media (min-width: 56rem) { .cp-stats__list { grid-template-columns: repeat(4, 1fr); } } .cp-stat { display: grid; gap: .3rem; padding-left: 1rem; border-left: 3px solid var(--orange); } .cp-stat__v { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.05; } .cp-stat__k { font: italic 400 1.02rem/1.35 var(--serif); color: var(--tuerkis-60); } .cp-dl { margin: 0; display: grid; } .cp-dl > div { display: grid; gap: .15rem; padding: .75rem 0; border-bottom: 1px solid var(--line); } .cp-dl dt { font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--petrol); } .cp-dl dd { margin: 0; font-size: 1.02rem; line-height: 1.5; } .cp-social { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; } .cp-social__a { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem .6rem .6rem; background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .cp-social__a:hover, .cp-social__a:focus-visible { border-color: var(--petrol); transform: translateY(-2px); box-shadow: var(--shadow); } .cp-social__i { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--petrol); color: var(--white); } .cp-social__i svg { width: 1.3rem; height: 1.3rem; } .cp-social__a:hover .cp-social__i { background: var(--orange); color: var(--ink); } .cp-social__k { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .cp-social__v { display: block; font-weight: 700; color: var(--petrol); } /* Rede + Zitat */ .cp-feat { display: grid; background: var(--petrol-dark); } @media (min-width: 64rem) { .cp-feat { grid-template-columns: 1.35fr 1fr; align-items: stretch; } } .cp-feat__media { margin: 0; overflow: hidden; line-height: 0; min-height: 16rem; } .cp-feat__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; } @media (min-width: 64rem) { .cp-feat__img { min-height: 34rem; } } .cp-feat__quote.quote { --qpt: clamp(6.5rem, 5rem + 4vw, 8.5rem); --qf: clamp(7rem, 6rem + 3vw, 9rem); margin: 0; max-width: none; align-self: center; padding: var(--qpt) clamp(1.5rem, 1rem + 3vw, 4rem) clamp(2.5rem, 2rem + 2vw, 4rem); } .cp-feat__quote.quote::before { left: clamp(1.2rem, .8rem + 3vw, 3.7rem); top: calc(var(--qpt) - var(--qf) * 1.2); font-size: var(--qf); } .cp-feat .quote__text { color: var(--white); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); } .cp-feat .quote figcaption { color: var(--tuerkis-60); } /* Themen mit Nummer */ .cp-theme { position: relative; } .cp-theme__nr { position: absolute; top: clamp(1.25rem, 1rem + 1vw, 2rem); right: clamp(1.25rem, 1rem + 1vw, 2rem); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--tuerkis-60); } @media (min-width: 64rem) { .cp-themes { grid-template-columns: repeat(6, 1fr); } .cp-theme { grid-column: span 2; } .cp-theme:nth-child(4), .cp-theme:nth-child(5) { grid-column: span 3; } } /* Warum ich kandidiere */ .cp-why__inner { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; } @media (min-width: 64rem) { .cp-why__inner { grid-template-columns: 1.4fr 1fr; } } .cp-why__text { margin-top: 1.25rem; max-width: 44rem; font-size: 1.15rem; line-height: 1.65; color: var(--white); } .cp-why__sig { font-style: normal; font-family: var(--sans); font-size: .95rem; font-weight: 700; color: var(--tuerkis); } /* „Höchste Zeit.“ – Foto mit gesetztem Schriftzug (statt Grafik mit eingebranntem Text) */ .cp-hz { position: relative; overflow: visible; margin: 0 0 2.5rem; max-width: 26rem; justify-self: center; width: 100%; } .cp-hz__media { line-height: 0; } .cp-hz__img { display: block; width: 100%; height: auto; aspect-ratio: 764 / 1048; object-fit: cover; box-shadow: 0 28px 56px -24px rgba(0, 0, 0, .6); border-bottom: 5px solid var(--orange); } .cp-hz__cap { position: absolute; left: -1.25rem; bottom: -1.75rem; display: grid; justify-items: start; line-height: 1; } .cp-hz__box { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.4rem 1rem 1.1rem; background: var(--petrol-dark); color: var(--white); box-shadow: var(--shadow); } .cp-hz__clock { flex: none; width: 3.4rem; height: 3.4rem; color: var(--white); } .cp-hz__arc { stroke: var(--orange); } .cp-hz__hand { stroke: var(--orange); transform-origin: 24px 24px; } .cp-hz__title { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 800; line-height: .98; } .cp-hz__strip { margin-top: -.1rem; padding: .55rem .9rem; background: var(--white); color: var(--petrol); font: 400 clamp(1rem, .9rem + .4vw, 1.2rem)/1.2 var(--serif); } @media (max-width: 30rem) { .cp-hz__cap { left: -.25rem; } } @media (prefers-reduced-motion: no-preference) { .cp-hz__hand { animation: hz-tick 1.6s cubic-bezier(.5, 1.6, .4, 1) 1s both; } @keyframes hz-tick { from { transform: rotate(-150deg); } to { transform: rotate(0); } } } /* In den Medien */ .cp-media { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .cp-medium__a { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: .7rem; padding: 1.5rem; background: var(--tuerkis-20); border-top: 4px solid var(--petrol); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .cp-medium__a:hover, .cp-medium__a:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); border-top-color: var(--orange); } .cp-medium__top { display: flex; align-items: center; gap: .7rem; } .cp-medium__i { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; background: var(--petrol); color: var(--white); border-radius: 50%; } .cp-medium__i svg { width: 1.3rem; height: 1.3rem; } .cp-medium__a:hover .cp-medium__i { background: var(--orange); color: var(--ink); } .cp-medium__k { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } .cp-medium__t { font-size: 1.2rem; font-weight: 800; line-height: 1.3; color: var(--petrol); } .cp-medium__x { font-size: .98rem; line-height: 1.55; } .cp-medium__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--petrol); } .cp-medium__more svg { width: 1rem; height: 1rem; } /* Werdegang */ .cp-weg { overflow: clip; } .cp-tl { list-style: none; margin: 2rem 0 0; padding: 0 0 0 1.5rem; display: grid; gap: 1.75rem; border-left: 3px solid var(--line); } .cp-step { position: relative; display: grid; gap: .45rem; align-content: start; } .cp-step::before { content: ""; position: absolute; left: calc(-1.5rem - 9px); top: .55rem; width: 15px; height: 15px; border-radius: 50%; background: var(--white); border: 3px solid var(--orange); } .cp-step__year { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 800; line-height: 1; color: var(--petrol); } .cp-step__title { font-size: 1.15rem; } .cp-step p { margin: 0; color: var(--muted); } .cp-step:last-child .cp-step__year { color: var(--orange-dark); } .hrail.is-on .cp-tl { border-left: 0; padding: 2rem 0 0; gap: 0; } .hrail.is-on .cp-step { flex: none; width: clamp(17rem, 22vw, 21rem); padding: 1.75rem 2rem 0 0; border-top: 3px solid var(--line); } .hrail.is-on .cp-step::before { left: 0; top: -9px; } .nobr { white-space: nowrap; } /* Bindestrich-Wörter in Unterzeilen nicht trennen (kv_hl) */ .nobr { white-space: nowrap; } /* 1.37 – Fotoserie Carolin Mathieu */ .cp-facts__photo { margin: calc(-1 * clamp(1.5rem, 1rem + 1.5vw, 2.25rem)) calc(-1 * clamp(1.5rem, 1rem + 1.5vw, 2.25rem)) .25rem; line-height: 0; overflow: hidden; } .cp-facts__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 30%; } .cp-band { position: relative; margin: 0; overflow: hidden; line-height: 0; background: var(--petrol-dark); } .cp-band__img { display: block; width: 100%; height: clamp(18rem, 48vw, 44rem); object-fit: cover; object-position: 50% 45%; } .cp-band::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(11, 62, 77, .85), transparent); pointer-events: none; } .cp-band__cap { position: absolute; z-index: 1; left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); right: var(--gutter); bottom: clamp(1.25rem, 1rem + 2vw, 2.75rem); color: var(--white); font: italic 400 clamp(1.05rem, .95rem + .6vw, 1.45rem)/1.4 var(--serif); } .cp-band__cap > span { display: block; font: 800 clamp(2rem, 1.4rem + 3vw, 3.6rem)/1.05 var(--sans); font-style: normal; margin-bottom: .35rem; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .cp-band__img { scale: 1.12; animation: tosc-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } } .cp-gal { display: grid; gap: 1rem; } @media (min-width: 40rem) { .cp-gal { grid-template-columns: repeat(2, 1fr); } .cp-gal__item:first-child { grid-column: 1 / -1; } } @media (min-width: 64rem) { .cp-gal { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .cp-gal__item:first-child { grid-column: span 2; grid-row: span 2; } } .cp-gal__item { position: relative; margin: 0; overflow: hidden; line-height: 0; background: var(--petrol-dark); box-shadow: var(--shadow); } .cp-gal__img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .9s var(--ease); } .cp-gal__item:first-child .cp-gal__img { object-position: 50% 30%; } .cp-gal__item:hover .cp-gal__img { transform: scale(1.04); } .cp-gal__item::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(11, 62, 77, .9), transparent); pointer-events: none; } .cp-gal__cap { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: .9rem; color: var(--white); font-size: .95rem; line-height: 1.35; } .cp-gal__cap strong { display: block; font-size: 1.2rem; } .cp-gal__item:first-child .cp-gal__cap strong { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); } @media (min-width: 64rem) { .cp-gal__item:first-child .cp-gal__cap { left: 1.5rem; bottom: 1.4rem; font-size: 1.1rem; } } /* 1.38 – Toscani-Motiv mit Schriftzug im Bild: Text-Overlay nur für Screenreader, keine Abdunkelung */ .tosc--motiv .tosc__img { aspect-ratio: 1717 / 916; } .tosc--motiv .tosc__shade { display: none; } .tosc--motiv .tosc__inner { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 1.39 – „Über mich“: Kontaktkarte füllt die linke Spalte bis zur Höhe des Steckbriefs */ .cp-about { display: flex; flex-direction: column; } .cp-hello { display: grid; grid-template-rows: 1fr auto; margin-top: 2rem; background: var(--petrol); color: var(--white); box-shadow: var(--shadow); --focus: var(--white); } @media (min-width: 60rem) { .cp-about { align-self: stretch; } .cp-hello { flex: 1; min-height: 24rem; } } .cp-hello__media { position: relative; margin: 0; overflow: hidden; line-height: 0; min-height: 14rem; } .cp-hello__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 28%; transition: transform 1s var(--ease); } .cp-hello:hover .cp-hello__img { transform: scale(1.04); } .cp-hello__tag { position: absolute; left: 0; bottom: 0; padding: .55rem 1.1rem; background: var(--white); color: var(--petrol); font: 800 clamp(1.3rem, 1.1rem + .8vw, 1.7rem)/1.1 var(--sans); } .cp-hello__body { display: grid; gap: 1rem; padding: 1.4rem 1.5rem 1.6rem; border-top: 4px solid var(--orange); } .cp-hello__body p { margin: 0; font-size: 1.05rem; line-height: 1.55; } .cp-hello__actions { display: flex; flex-wrap: wrap; gap: .65rem; } .cp-hello .btn--primary { background: var(--orange); border-color: var(--orange); color: var(--ink); } .cp-hello .btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); } .cp-hello .btn--ghost { background: transparent; border-color: var(--white); color: var(--white); } .cp-hello .btn--ghost:hover { background: var(--white); color: var(--petrol); } /* 1.40 – Fotoserie Christian Müller */ .cp-facts__img--top { object-position: 50% 12%; } .cp-gal--row { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); } @media (min-width: 64rem) { .cp-gal--row { grid-template-columns: repeat(4, 1fr); } .cp-gal--row .cp-gal__item:first-child { grid-column: auto; grid-row: auto; } } @media (min-width: 40rem) and (max-width: 63.99rem) { .cp-gal--row .cp-gal__item:first-child { grid-column: auto; } } .cp-gal--row .cp-gal__img { aspect-ratio: 4 / 3; } .cp-gal--row .cp-gal__item:first-child .cp-gal__cap strong { font-size: 1.2rem; } .cp-gal--row .cp-gal__item:first-child .cp-gal__cap { left: 1rem; bottom: .9rem; font-size: .95rem; } .cp-band--bank .cp-band__img { object-position: 35% 12%; } .cp-band--bank::after { inset: 0 45% 0 auto; width: 60%; left: auto; right: 0; background: linear-gradient(to left, rgba(11, 62, 77, .85), transparent); } .cp-band--bank .cp-band__cap { left: auto; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); max-width: 26rem; text-align: right; bottom: 50%; transform: translateY(50%); } @media (max-width: 47.99rem) { .cp-band--bank::after { inset: 40% 0 0; width: auto; background: linear-gradient(to top, rgba(11, 62, 77, .85), transparent); } .cp-band--bank .cp-band__cap { left: var(--gutter); right: var(--gutter); text-align: left; bottom: 1.25rem; transform: none; max-width: none; } } @media (min-width: 64rem) { .cp-gal--row { grid-template-columns: repeat(3, 1fr); } } .cp-gal__img--right { object-position: 100% 40%; } .cp-weg__photo { position: relative; margin: 2rem 0 0; overflow: hidden; line-height: 0; min-height: 16rem; background: var(--petrol-dark); box-shadow: var(--shadow); } .cp-weg__photo::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(to top, rgba(11, 62, 77, .9), transparent); pointer-events: none; } .cp-weg__img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 40% 30%; } @media (min-width: 60rem) { .cp-weg__photo { flex: 1; } .cp-weg__img { position: absolute; inset: 0; aspect-ratio: auto; } }