/* ===================================================== PERSONEN-SEITEN FDP ANHALT-BITTERFELD ===================================================== */ /* ===================================================== PERSONENÜBERSICHT – GRUNDLAGE ===================================================== */ .people-page { background: var(--fdp-white); color: #171717; font-family: "Public Sans", Arial, sans-serif; font-weight: 500; } /* ===================================================== EINHEITLICHE INHALTSBREITE ===================================================== */ .people-page__inner { width: 100%; margin-right: auto; margin-left: auto; } /* ===================================================== PERSONENÜBERSICHT – HERO Gleiche Abstände wie: - Aktuelles - Beschlüsse - Initiativen ===================================================== */ .people-page__hero { padding: 48px 0 28px; background: var(--fdp-white); } /* ===================================================== ÜBERSCHRIFT Exakt dasselbe Größensystem wie bei Beschlüssen und Initiativen. ===================================================== */ .people-page__hero .section-heading { margin: 0; } .people-page__hero .section-heading h1 { margin: 0; color: var(--fdp-blue); font-family: "Public Sans", Arial, sans-serif; font-size: clamp( 2.15rem, 10vw, 3rem ); font-weight: 800; letter-spacing: -0.04em; line-height: 1; } /* ===================================================== CYAN-BALKEN Mobil: 105 × 7 px 14 px Abstand Damit identisch zu Beschlüsse / Initiativen. ===================================================== */ .people-page__hero .section-heading h1::after { display: block; width: 105px; height: 7px; margin-top: 14px; background: var(--fdp-cyan); content: ""; } /* * Falls .section-heading global bereits * einen Balken erzeugt, verhindern wir eine * doppelte Darstellung. */ .people-page__hero .section-heading::after { display: none; } /* ===================================================== EINLEITUNG ===================================================== */ .people-page__intro { width: 100%; max-width: var(--fdp-body-content-width); margin: 24px 0 0; color: #171717; font-family: var(--fdp-font); font-size: var(--fdp-body-font-size); font-weight: var(--fdp-body-weight); line-height: var(--fdp-body-line-height); letter-spacing: var(--fdp-body-letter-spacing); hyphens: auto; -webkit-hyphens: auto; word-break: normal; overflow-wrap: normal; } .people-page__intro p { margin: 0 0 24px; } .people-page__intro p:last-child { margin-bottom: 0; } /* ===================================================== PERSONENGRUPPEN ===================================================== */ .people-page__groups { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .people-page__group-link { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 8px 16px; border: 2px solid var(--fdp-blue); border-radius: 999px; color: var(--fdp-blue); font-size: 0.88rem; font-weight: 700; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); } .people-page__group-link:hover, .people-page__group-link.is-active { background: var(--fdp-blue); color: var(--fdp-white); } /* ===================================================== PERSONEN-INHALT Gleicher Beginn wie bei den anderen Archiven. ===================================================== */ .people-page__content { padding: 15px 0 65px; background: var(--fdp-white); } /* ===================================================== PERSONENÜBERSICHT – KARTEN ===================================================== */ .people-page .people-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 340px ) ); align-items: stretch; justify-content: start; gap: 28px; } .people-page .person-card { display: flex; width: 100%; max-width: 340px; min-width: 0; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid rgba( 3, 45, 103, 0.08 ); border-radius: 26px; background: var(--fdp-white); box-shadow: 0 8px 30px rgba( 3, 45, 103, 0.08 ); transition: transform var(--transition), box-shadow var(--transition); } .people-page .person-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba( 3, 45, 103, 0.13 ); } /* ===================================================== KARTENBILD ===================================================== */ .people-page .person-card__image { display: block; width: 100%; overflow: hidden; aspect-ratio: 1 / 1; background: var(--fdp-yellow); } .people-page .person-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } /* ===================================================== KARTEN-PLATZHALTER ===================================================== */ .people-page .person-card__placeholder { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 30px; background: var(--fdp-yellow); color: var(--fdp-blue); text-align: center; } .people-page .person-card__placeholder strong { font-size: 2.7rem; font-weight: 800; } .people-page .person-card__placeholder span { margin-top: 7px; font-size: 0.8rem; font-weight: 700; } /* ===================================================== KARTENINHALT ===================================================== */ .people-page .person-card__content { position: relative; display: flex; flex: 1; flex-direction: column; padding: 23px; } .people-page .person-card__content::before { display: block; width: 64px; height: 5px; margin-bottom: 18px; background: var(--fdp-cyan); content: ""; } /* ===================================================== KARTENNAME ===================================================== */ .people-page .person-card__name { margin: 0 0 8px; color: var(--fdp-blue); font-size: 1.35rem; font-weight: 800; line-height: 1.12; } .people-page .person-card__name a { color: inherit; text-decoration: none; } /* ===================================================== KARTENPOSITION ===================================================== */ .people-page .person-card__position { margin: 0 0 5px; color: var(--fdp-blue); font-size: 0.91rem; font-weight: 700; line-height: 1.45; } .people-page .person-card__secondary-position { margin: 0 0 13px; color: #5c6671; font-size: 0.86rem; font-weight: 500; line-height: 1.45; } /* ===================================================== KARTENMETA ===================================================== */ .people-page .person-card__meta { display: grid; gap: 9px; margin: 14px 0 22px; color: #66717d; font-size: 0.86rem; font-weight: 500; } .people-page .person-card__meta-item { display: flex; align-items: center; gap: 9px; } .people-page .person-card__meta-item svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--fdp-cyan); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ===================================================== KARTENBUTTON ===================================================== */ .people-page .person-card__button { display: inline-flex; width: fit-content; min-height: 44px; align-items: center; justify-content: center; gap: 16px; margin-top: auto; padding: 7px 16px; border: 2px solid var(--fdp-blue); border-radius: 9px; background: var(--fdp-blue); color: var(--fdp-white); font-size: 0.86rem; font-weight: 700; text-decoration: none; transition: background var(--transition), color var(--transition), transform var(--transition); } .people-page .person-card__button:hover, .people-page .person-card__button:active { background: var(--fdp-white); color: var(--fdp-blue); transform: translateY(-2px); } .people-page .person-card__button:focus-visible { outline: 3px solid var(--fdp-cyan); outline-offset: 3px; } /* ===================================================== LEERER ZUSTAND ===================================================== */ .people-page__empty { padding: 42px; border-radius: 24px; background: var(--fdp-light); } /* ===================================================== PAGINIERUNG ===================================================== */ .people-pagination { margin-top: 56px; } /* ===================================================== EINZELPERSON ===================================================== */ .person-profile { background: var(--fdp-white); color: #171717; font-family: "Public Sans", Arial, sans-serif; } /* ===================================================== PROFIL-HERO ===================================================== */ .person-profile__hero { padding: 38px 0 72px; } /* ===================================================== ZURÜCK ===================================================== */ .person-profile__back { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--fdp-blue); font-size: 0.9rem; font-weight: 800; text-decoration: none; } .person-profile__back:hover { color: var(--fdp-cyan); } /* ===================================================== ZURÜCK-BEREICH AM SEITENENDE ===================================================== */ .person-profile__footer { padding: 34px 0 72px; background: var(--fdp-white); } /* ===================================================== DESKTOP-GRID ===================================================== */ .person-profile__grid { display: grid; grid-template-columns: minmax( 300px, 420px ) minmax( 0, 1fr ); align-items: start; gap: clamp( 44px, 6vw, 82px ); } /* ===================================================== FESTE BILDGRÖSSE AUF DESKTOP ===================================================== */ .person-profile__image { width: 100%; height: 620px; min-height: 0; align-self: start; overflow: hidden; border-radius: 28px; background: var(--fdp-yellow); box-shadow: 0 14px 38px rgba( 3, 45, 103, 0.10 ); } .person-profile__image img, .person-profile__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* ===================================================== PROFIL-PLATZHALTER ===================================================== */ .person-profile__placeholder { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; color: var(--fdp-blue); } .person-profile__placeholder strong { font-size: 4rem; font-weight: 800; } .person-profile__placeholder span { margin-top: 8px; font-weight: 700; } /* ===================================================== RECHTE SPALTE ===================================================== */ .person-profile__header { display: flex; min-width: 0; flex-direction: column; align-self: start; } /* ===================================================== NAME ===================================================== */ .person-profile__header h1 { margin: 0; color: var(--fdp-blue); font-size: clamp( 2.8rem, 4.6vw, 4.8rem ); font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; overflow-wrap: anywhere; } /* ===================================================== CYAN-BALKEN PROFIL ===================================================== */ .person-profile__line { display: block; width: 140px; height: 8px; margin: 16px 0 25px; background: var(--fdp-cyan); } /* ===================================================== POSITION ===================================================== */ .person-profile__position { margin: 0 0 5px; color: var(--fdp-blue); font-size: clamp( 1.2rem, 2vw, 1.65rem ); font-weight: 700; line-height: 1.3; } .person-profile__secondary-position { margin: 0 0 8px; color: #6d7681; font-size: 1rem; font-weight: 500; line-height: 1.5; } /* ===================================================== WAHLKREIS / ORT ===================================================== */ .person-profile__facts { display: grid; gap: 11px; margin: 8px 0 22px; } .person-profile__fact { display: flex; align-items: center; gap: 11px; color: var(--fdp-blue); font-size: 0.98rem; font-weight: 600; line-height: 1.45; } .person-profile__fact svg { display: block; width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: var(--fdp-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ===================================================== SOCIAL MEDIA ===================================================== */ .person-profile__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 26px; } .person-profile__social-link { display: inline-flex; width: 46px; height: 46px; flex: 0 0 46px; align-items: center; justify-content: center; border: 2px solid var(--fdp-blue); border-radius: 50%; background: var(--fdp-white); color: var(--fdp-blue); text-decoration: none; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .person-profile__social-link:hover { border-color: var(--fdp-yellow); background: var(--fdp-yellow); transform: translateY(-2px); } .person-profile__social-link svg { display: block !important; width: 24px !important; height: 24px !important; max-width: 24px !important; max-height: 24px !important; margin: 0 !important; padding: 0 !important; object-fit: contain; } .person-profile__social-fallback { display: flex; align-items: center; justify-content: center; color: var(--fdp-blue); font-size: 0.72rem; font-weight: 800; line-height: 1; } /* ===================================================== BESCHREIBUNG ===================================================== */ .person-profile__description { width: 100%; max-width: 740px; margin: 0; color: #171717; font-family: var(--fdp-font); font-size: var(--fdp-body-font-size); font-weight: var(--fdp-body-weight); line-height: var(--fdp-body-line-height); letter-spacing: var(--fdp-body-letter-spacing); hyphens: auto; -webkit-hyphens: auto; word-break: normal; overflow-wrap: normal; } .person-profile__description p { margin: 0 0 18px; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } .person-profile__description p:last-child { margin-bottom: 0; } /* ===================================================== WEITERER PROFILINHALT ===================================================== */ .person-profile__content { padding: 70px 0 90px; background: var(--fdp-light); } .person-profile__article { max-width: var(--fdp-body-content-width); margin-inline: auto; padding: clamp( 28px, 5vw, 58px ); border-radius: 28px; background: var(--fdp-white); color: #171717; font-family: var(--fdp-font); font-size: var(--fdp-body-font-size); font-weight: var(--fdp-body-weight); line-height: var(--fdp-body-line-height); letter-spacing: var(--fdp-body-letter-spacing); hyphens: auto; -webkit-hyphens: auto; word-break: normal; overflow-wrap: normal; box-shadow: 0 12px 34px rgba( 3, 45, 103, 0.07 ); } .person-profile__article h2 { margin: 40px 0 18px; color: var(--fdp-blue); font-size: clamp( 1.8rem, 3vw, 2.5rem ); font-weight: 800; line-height: 1.08; } .person-profile__article h2:first-child { margin-top: 0; } .person-profile__article h3 { margin: 30px 0 14px; color: var(--fdp-blue); font-weight: 800; } .person-profile__article p, .person-profile__article li { color: #171717; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } /* ===================================================== TABLET AB 768 PX Personenübersicht erhält exakt dasselbe Desktop-System wie Beschlüsse / Initiativen. ===================================================== */ @media (min-width: 768px) { .people-page__inner { width: min( 920px, 100% ); } .people-page__hero { padding: 68px 0 36px; } .people-page__hero .section-heading h1 { font-size: clamp( 2.5rem, 4vw, 3.8rem ); } .people-page__hero .section-heading h1::after { width: 140px; height: 8px; margin-top: 16px; } } /* ===================================================== PROFIL – TABLET ===================================================== */ @media (max-width: 1000px) and (min-width: 768px) { .person-profile__grid { grid-template-columns: minmax( 260px, 340px ) minmax( 0, 1fr ); gap: 40px; } .person-profile__image { height: 520px; } .person-profile__header h1 { font-size: clamp( 2.5rem, 5vw, 3.6rem ); } } /* ===================================================== DESKTOP AB 1050 PX ===================================================== */ @media (min-width: 1050px) { .people-page__hero { padding-top: 76px; } .people-page__content { padding-bottom: 100px; } } /* ===================================================== SMARTPHONE ===================================================== */ @media (max-width: 767px) { /* ================================================= PERSONENÜBERSICHT ================================================= */ .people-page__inner { width: 100%; } .people-page__content { padding-bottom: 65px; } .people-page .people-grid { grid-template-columns: 1fr; gap: 22px; } .people-page .person-card { width: 100%; max-width: 360px; } /* ================================================= EINZELPERSON ================================================= */ .person-profile__hero { padding: 38px 0 58px; } .person-profile__hero .container { width: calc( 100% - 28px ); } .person-profile__grid { display: flex; flex-direction: column; gap: 0; } .person-profile__header { display: contents; } /* ================================================= MOBILE REIHENFOLGE 1. Name 2. Cyan-Balken 3. Bild 4. Position 5. zweite Position 6. Wahlkreis / Ort 7. Social Media 8. Fließtext ================================================= */ .person-profile__header h1 { order: 1; margin: 0; font-size: clamp( 2.2rem, 11vw, 3rem ); font-weight: 800; letter-spacing: -0.04em; line-height: 1; } .person-profile__line { order: 2; width: 105px; height: 7px; margin: 14px 0 26px; } .person-profile__image { order: 3; width: 100%; height: auto; min-height: 0; margin: 0 0 28px; aspect-ratio: 4 / 5; border-radius: 24px; } .person-profile__image img, .person-profile__photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .person-profile__position { order: 4; margin-bottom: 5px; font-size: 1.16rem; line-height: 1.35; } .person-profile__secondary-position { order: 5; margin: 0 0 7px; font-size: 0.94rem; } .person-profile__facts { order: 6; margin: 7px 0 21px; } .person-profile__links { order: 7; gap: 9px; margin: 0 0 24px; } .person-profile__social-link { width: 44px; height: 44px; flex-basis: 44px; } .person-profile__social-link svg { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; } .person-profile__description { order: 8; margin-bottom: 0; } .person-profile__footer { padding: 30px 0 58px; } .person-profile__footer .container { width: calc( 100% - 28px ); } .person-profile__content { padding: 52px 0 60px; } .person-profile__article { padding: 26px 22px; border-radius: 22px; } } /* ===================================================== KLEINE SMARTPHONES ===================================================== */ @media (max-width: 440px) { .person-profile__hero .container { width: calc( 100% - 24px ); } .person-profile__footer .container { width: calc( 100% - 24px ); } .person-profile__image { border-radius: 22px; } } /* ===================================================== EINZELPERSON – AKTUALISIERTE DARSTELLUNG - Social Icons wie bei Aktuelles - optionaler Pressefoto-Download - kein Zurück-Link mehr im Markup ===================================================== */ /* ===================================================== PROFILMEDIEN ===================================================== */ .person-profile__media { width: 100%; min-width: 0; align-self: start; } /* ===================================================== PRESSEFOTO-DOWNLOAD Wie bei fdp.de: dünner Kreis mit Pfeil nach unten, daneben normaler Text. Beim Hover wird nur der Text unterstrichen – wie ein normaler Link. ===================================================== */ .person-profile__press-download { display: inline-flex; width: fit-content; align-items: center; gap: 16px; margin-top: 16px; color: var(--fdp-blue); font-family: inherit; font-size: 1.2rem; font-weight: 400; line-height: 1.3; text-decoration: none; } .person-profile__press-download:hover, .person-profile__press-download:focus-visible { color: var(--fdp-blue); text-decoration: none; } .person-profile__press-download:focus-visible { border-radius: 999px; outline: 3px solid var(--fdp-cyan); outline-offset: 4px; } .person-profile__press-icon { display: inline-flex; box-sizing: border-box; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border: 1px solid #cfd7e1; border-radius: 50%; background: var(--fdp-white); color: var(--fdp-blue); } .person-profile__press-download:hover .person-profile__press-text, .person-profile__press-download:focus-visible .person-profile__press-text { text-decoration: underline; text-decoration-color: var(--fdp-link-underline-color); text-decoration-thickness: var(--fdp-link-underline-thickness); text-underline-offset: var(--fdp-link-underline-offset); } .person-profile__press-icon svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ===================================================== SOCIAL MEDIA – WIE BEI AKTUELLES ===================================================== */ .person-profile__links { gap: 12px; margin: 0 0 30px; } .person-profile__social-link { display: inline-flex !important; box-sizing: border-box; width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; max-width: 50px !important; max-height: 50px !important; flex: 0 0 50px; align-items: center; justify-content: center; margin: 0; padding: 0 !important; overflow: hidden; border: 0 !important; border-radius: 50%; background: var(--fdp-yellow); color: var(--fdp-blue); line-height: 0; text-decoration: none; appearance: none; -webkit-appearance: none; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .person-profile__social-link:hover { border-color: transparent; background: var(--fdp-cyan); color: var(--fdp-blue); transform: translateY(-2px); box-shadow: 0 6px 14px rgba( 3, 45, 103, 0.12 ); } .person-profile__social-link svg { display: block !important; box-sizing: border-box !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; flex: 0 0 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } .person-profile__social-fallback { color: var(--fdp-blue); } /* ===================================================== SMARTPHONE ===================================================== */ @media (max-width: 767px) { .person-profile__media { order: 3; width: 100%; margin: 0 0 28px; } .person-profile__image { order: initial; margin: 0; } .person-profile__press-download { gap: 14px; margin-top: 14px; font-size: 1.1rem; } .person-profile__press-icon { width: 40px; height: 40px; flex-basis: 40px; } .person-profile__press-icon svg { width: 19px; height: 19px; } .person-profile__social-link { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; max-width: 46px !important; max-height: 46px !important; flex-basis: 46px; } .person-profile__social-link svg { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; } } @media (max-width: 440px) { .person-profile__press-download { font-size: 1.05rem; } } /* ===================================================== PERSONENKARTEN: GLEICHE HÖHEN Über Subgrid teilen sich alle Karten einer Reihe dieselben Zeilen: Bild, Strich, Text (Name + Ämter), Wahlkreis/Ort, Button. Ist ein Amt bei einer Person länger, wächst die Textzeile aller Karten mit – Icons und Buttons stehen so überall auf einer Höhe. ===================================================== */ @supports (grid-template-rows: subgrid) { .people-page .person-card, .people-page .person-card__content { display: grid; grid-template-rows: subgrid; row-gap: 0; } .people-page .person-card { grid-row: span 5; min-height: 0; } .people-page .person-card__content { grid-row: 2 / span 4; } .people-page .person-card__content::before { grid-row: 1; } .people-page .person-card__text { grid-row: 2; } .people-page .person-card__meta { grid-row: 3; align-self: start; } .people-page .person-card__button { grid-row: 4; align-self: end; } }