/* ============================================================
   Hans-Hermann Meyerholz – zentrale Styles (fuer alle Seiten)
   Schriften: Fira Sans Condensed (self-hosted, /fonts)
   ============================================================ */

@font-face{font-family:'Fira Sans Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/FiraSansCondensed-Regular.woff2') format('woff2');}
@font-face{font-family:'Fira Sans Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/FiraSansCondensed-Medium.woff2') format('woff2');}
@font-face{font-family:'Fira Sans Condensed';font-style:italic;font-weight:600;font-display:swap;src:url('fonts/FiraSansCondensed-SemiBoldItalic.woff2') format('woff2');}
@font-face{font-family:'Fira Sans Condensed';font-style:italic;font-weight:700;font-display:swap;src:url('fonts/FiraSansCondensed-BoldItalic.woff2') format('woff2');}
@font-face{font-family:'Fira Sans Condensed';font-style:italic;font-weight:800;font-display:swap;src:url('fonts/FiraSansCondensed-ExtraBoldItalic.woff2') format('woff2');}

:root{
  --teal:#27afb7;
  --teal-dark:#0f676d;
  --ink:#0a0a0a;
  --black:#000;
  --white:#fff;
  --red:#e20613;
  --wrap:1380px;
  --content:1000px;
  --pad:clamp(1.25rem, 5vw, 4rem);
  --disp:"Fira Sans Condensed", "Arial Narrow", sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--disp);
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  line-height:1.5;
  font-size:clamp(1rem,0.95rem + 0.2vw,1.075rem);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

/* centered 1280 outer element; 1000 content block centered within */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);position:relative;}
.content{max-width:var(--content);margin-inline:auto;}

/* headline system: heavy condensed italic */
.h-name,.h-hero,.section-title,.card__title,.familie-title,.ueber-title{
  font-style:italic;font-weight:700;line-height:1.02;margin:0;
  letter-spacing:-0.005em;
}

/* ============ HEADER / HERO ============ */
.hero{position:relative;background:var(--black);color:var(--white);overflow:hidden;}
.hero__photo{position:absolute;top:0;right:0;bottom:0;width:100%;z-index:0;}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;background:#111;}
.hero__inner{position:relative;z-index:2;padding-block:clamp(1.5rem,3vw,2.25rem) clamp(2.5rem,6vw,4.5rem);
  min-height:clamp(460px,52vw,660px);display:flex;flex-direction:column;}

nav{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.5rem);align-items:center;}
nav a{font-style:italic;font-weight:700;font-size:clamp(1rem,0.95rem + 0.3vw,1.2rem);
  color:var(--white);}
nav a:hover{color:var(--teal);}
nav a.is-active{color:var(--teal);}

.hero__text{margin-top:auto;max-width:min(100%,900px);}
.h-name{font-size:clamp(1.9rem,4.4vw,3rem);color:var(--white);}
.h-hero{font-weight:800;font-size:clamp(3rem,10vw,6.4rem);color:var(--teal);
  line-height:0.98;margin-top:0.12em;}

/* animated headline rotator: slow, soft cross-fade between slogans */
.rotator{display:grid;}
.rotator .rot{grid-area:1/1;opacity:0;
  transition:opacity 1s ease;pointer-events:none;}
.rotator .rot.is-active{opacity:1;transition:opacity 1.2s ease .2s;}
.badge{display:inline-block;background:var(--teal);background-image:url('Wahlkreuz.svg'); background-repeat:no-repeat; background-position:8px center; background-size:9%; color:var(--white);
  font-style:italic;font-weight:500;font-size:clamp(1rem,0.9rem + 0.5vw,1.35rem);
  padding:.5em .95em .5em 2.4em;margin-top:auto;align-self:flex-start;}
.badge b{color:var(--black);font-weight:500;}

/* ============ TEAL "WARUM" SECTION ============ */
.band-teal{background:var(--teal);color:var(--black);
  padding-block:clamp(2.75rem,6vw,4.5rem);}
.band-teal p{max-width:740px;font-size:1.12em;}
.section-title{font-size:clamp(2.2rem,5.2vw,3.5rem);color:var(--white);
  margin-bottom:clamp(1.1rem,2.5vw,1.7rem);}

/* ============ WHITE "WOFÜR" SECTION ============ */
.stance{position:relative;padding-block:clamp(2.75rem,6vw,4.75rem);}
.stance .section-title{color:var(--ink);}
.stance__lead{max-width:740px;margin-bottom:clamp(1.8rem,4vw,2.75rem);}
.cross{position:absolute;top:0.5rem;right:var(--pad);
  width:clamp(64px,7vw,104px);height:auto;z-index:1;}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);}
.card{background:var(--teal);color:var(--white);
  padding:clamp(1.4rem,2.4vw,1.9rem);display:flex;flex-direction:column;
  min-height:clamp(220px,22vw,270px);border:2px solid transparent;cursor:pointer;
  transition:background-color .28s ease,color .28s ease,border-color .28s ease,
             box-shadow .28s ease,transform .28s ease;}
.card__title{font-size:clamp(1.35rem,1.1rem + 0.9vw,1.75rem);color:inherit;
  margin-bottom:.7em;}
.card__body{color:inherit;opacity:.92;font-size:.95em;flex:1;}
.card__cta{margin-top:0;display:inline-flex;align-items:center;gap:.5em;
  align-self:flex-end;font-style:italic;font-weight:600;
  font-size:clamp(1.05rem,1rem + 0.4vw,1.3rem);color:inherit;}
.card__cta .arrow{width:1.05em;height:auto;color:var(--ink);flex:none;
  transition:color .28s ease;}

/* invert on hover / keyboard focus (no position shift, just colour + shadow) */
.card:hover,.card:focus-visible{background:var(--white);color:var(--teal);
  border-color:var(--teal);box-shadow:0 14px 34px rgba(15,103,109,.20);outline:none;}
.card:hover .card__cta .arrow,
.card:focus-visible .card__cta .arrow{color:var(--teal);}

/* contact card starts inverted (white), flips to teal on hover */
.card--contact{background:var(--white);color:var(--teal);border-color:var(--teal);}
.card--contact .card__body{color:var(--ink);opacity:1;}
.card--contact:hover,.card--contact:focus-visible{background:var(--teal);
  color:var(--white);border-color:var(--teal);}
.card--contact:hover .card__body,.card--contact:focus-visible .card__body{color:var(--white);}
.card--contact:hover .card__cta .arrow,
.card--contact:focus-visible .card__cta .arrow{color:var(--white);}

/* ============ "ÜBER MEINE PERSON" (Foto mit überlagertem Titel, ohne Verlauf) ============ */
.ueber{position:relative;background:var(--black);color:var(--white);overflow:hidden;}
.ueber__photo{position:absolute;inset:0;z-index:0;}
.ueber__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;background:#111;}
.ueber__inner{position:relative;z-index:2;
  padding-block:clamp(2.75rem,6vw,4.5rem);
  min-height:clamp(360px,52.5vw,700px);}
.ueber-title{font-size:clamp(2.2rem,5.2vw,3.5rem);color:var(--white);}

/* ============ WHITE "FAMILIENVATER" SECTION ============ */
.familie{padding-block:clamp(2.75rem,6vw,4.5rem);}
.familie p{max-width:740px;}
.familie-title{font-size:clamp(2.2rem,5.2vw,3.5rem);color:var(--teal);
  margin-bottom:clamp(1.1rem,2.5vw,1.7rem);}
.familie__more{margin-top:clamp(1.8rem,4vw,2.75rem);text-align:right;}
.link-more{display:inline-flex;align-items:center;gap:.5em;
  font-style:italic;font-weight:600;color:var(--teal);
  font-size:clamp(1.1rem,1rem + 0.5vw,1.4rem);}
.link-more .arrow{width:1.05em;height:auto;color:var(--ink);transition:transform .18s ease;}
.link-more:hover .arrow{transform:translateX(4px);}

/* ============ FOOTER ============ */
footer{background:var(--teal);color:var(--white);
  padding-block:clamp(1rem,2vw,1.5rem);}
footer .content{display:flex;flex-wrap:wrap;gap:.75rem 2rem;
  justify-content:space-between;align-items:center;}
footer nav{gap:2rem;}
footer a,footer .copy{font-weight:500;font-size:1.05rem;}
footer a{font-style:normal;}
footer .copy{font-style:italic;}
footer a:hover{color:var(--ink);}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .hero__photo{width:100%;}
  .hero__text{max-width:none;}
  .cross{position:static;display:block;margin:0 0 1.5rem auto;}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr;}
  nav{gap:.9rem 1.4rem;}
  footer .content{justify-content:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;}
.hero :focus-visible,.ueber :focus-visible,footer :focus-visible,.card :focus-visible{outline-color:#fff;}

/* aktiver Menuepunkt: <body class="page-XXX"> je Seite setzen */
.page-start #nav-start,
.page-wahlprogramm #nav-wahlprogramm,
.page-ueber #nav-ueber,
.page-kontakt #nav-kontakt{color:var(--teal);}

/* ============================================================
   UNTERSEITEN-KOPF: nur Navigation + Foto (kein Slogan/Badge)
   Gesteuert ueber die <body class="page-..."> der jeweiligen Seite.
   ============================================================ */
.page-kontakt .hero__text,.page-kontakt .badge,
.page-wahlprogramm .hero__text,.page-wahlprogramm .badge,
.page-ueber .hero__text,.page-ueber .badge{display:none;}
.page-kontakt .hero__photo,
.page-wahlprogramm .hero__photo,
.page-ueber .hero__photo{width:100%;}

/* ============================================================
   KONTAKTSEITE
   ============================================================ */
.kontakt{padding-block:clamp(2.75rem,6vw,4.75rem);}
.kontakt__title{font-style:italic;font-weight:700;color:var(--teal);
  font-size:clamp(2.2rem,5.2vw,3.5rem);line-height:1.02;margin:0 0 clamp(1.3rem,3vw,2.1rem);}
.kontakt__lead{font-style:italic;font-weight:700;color:var(--ink);
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.18;margin:0 0 1em;max-width:930px;}
.kontakt__intro{max-width:740px;margin-bottom:clamp(2rem,4vw,3rem);}

/* Formular – Label unter dem Feld (wie im Entwurf) */
.form-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,3vw,2.1rem) clamp(1.2rem,2.5vw,2rem);}
.field{display:flex;flex-direction:column;}
.field--full{grid-column:1 / -1;}
.field input,.field textarea{width:100%;font:inherit;color:var(--ink);
  background:transparent;border:2px solid var(--teal);border-radius:0;
  padding:.7em .85em;outline:none;transition:border-color .2s,box-shadow .2s;}
.field input{height:3.1em;}
.field textarea{min-height:15em;resize:vertical;}
.field input:focus,.field textarea:focus{border-color:var(--teal-dark);
  box-shadow:0 0 0 3px rgba(38,175,183,.20);}
.field label{margin-top:.55em;color:#999;font-style:italic;font-weight:700;
  font-size:1.05rem;}
.form__note{grid-column:1 / -1;justify-self:end;text-align:right;
  color:#999;font-style:italic;font-weight:700;margin:0;}
.form__actions{grid-column:1 / -1;display:flex;justify-content:flex-end;}
.btn{display:inline-flex;align-items:center;gap:.55em;cursor:pointer;
  background:var(--teal);color:#fff;border:2px solid var(--teal);border-radius:0;
  font-family:inherit;font-style:italic;font-weight:700;
  font-size:clamp(1.05rem,1rem + 0.4vw,1.3rem);padding:.6em 1.4em;
  transition:background-color .25s ease,color .25s ease;}
.btn .arrow{width:1.05em;height:auto;color:currentColor;flex:none;}
.btn:hover,.btn:focus-visible{background:#fff;color:var(--teal);outline:none;}

/* Meine Anschrift */
.anschrift{margin-top:clamp(2.6rem,6vw,4rem);}
.anschrift__title{font-style:italic;font-weight:700;color:var(--ink);
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:0 0 1em;}
.anschrift__cols{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);align-items:start;}
.anschrift address{font-style:normal;line-height:1.55;}
.anschrift address a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.anschrift address a:hover{color:var(--teal);}

@media (max-width:600px){
  .form-grid{grid-template-columns:1fr;}
  .anschrift__cols{grid-template-columns:1fr;}
}

/* Kontaktformular: Status-Meldung + Honeypot */
.form-status{display:none;margin-bottom:clamp(1.2rem,3vw,2rem);
  padding:.9em 1.15em;border:2px solid;font-style:italic;font-weight:700;line-height:1.35;}
.form-status.is-ok{display:block;border-color:var(--teal);color:var(--teal-dark);
  background:rgba(38,175,183,.08);}
.form-status.is-error{display:block;border-color:var(--red);color:var(--red);
  background:rgba(226,6,19,.06);}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

/* ============================================================
   INHALTSSEITEN (Über mich, Wahlprogramm …)
   ============================================================ */
.inhalt{padding-block:clamp(2.4rem,5vw,3.8rem);}
.inhalt__title{font-style:italic;font-weight:700;color:var(--teal);
  font-size:clamp(2.2rem,5.2vw,3.5rem);line-height:1.02;margin:0 0 clamp(1.4rem,3.5vw,2.3rem);}
.inhalt__sub{font-style:italic;font-weight:700;color:var(--ink);
  font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1.1;
  margin:clamp(1.8rem,4vw,2.6rem) 0 .7em;}
.inhalt__sub:first-child{margin-top:0;}
.inhalt p{max-width:740px;}
.inhalt p + p{margin-top:0;}

/* Vollbreites Fotoband (Platzhalter-Foto) */
.fotoband{background:#000;overflow:hidden;}
.fotoband img{display:block;width:100%;height:clamp(260px,43.75vw,650px);
  object-fit:cover;object-position:center 28%;background:#111;}

/* Türkises Zitatband */
.quote-band{background:var(--teal);color:#fff;
  padding-block:clamp(2.3rem,5vw,3.6rem);}
.quote-band .quote{font-style:italic;font-weight:700;
  font-size:clamp(1.35rem,1.05rem + 1.2vw,2rem);line-height:1.2;margin:0;max-width:none;}
.quote-band .quote__author{color:var(--ink);font-style:italic;font-weight:700;text-align:right;
  font-size:clamp(1.25rem,1rem + 1vw,1.7rem);margin:clamp(1rem,2.5vw,1.6rem) 0 0;}

/* Wahlprogramm – Themenblöcke */
.programm{padding-block:clamp(2.2rem,4.5vw,3.4rem);scroll-margin-top:clamp(1rem,3vw,2rem);}
.programm__eyebrow{color:var(--teal);font-style:italic;font-weight:700;
  font-size:clamp(1.9rem,1.5rem + 1.9vw,3rem);line-height:1.02;margin:0 0 .1em;}
.programm__title{color:var(--ink);font-style:italic;font-weight:700;
  font-size:clamp(1.25rem,1.05rem + 0.8vw,1.55rem);line-height:1.15;margin:0 0 .7em;}
.programm__intro{max-width:740px;margin:0 0 .4em;}
.programm__list{columns:2;column-gap:clamp(1.6rem,4vw,3.2rem);
  list-style:none;margin:1.3em 0 0;padding:0;}
.programm__list li{break-inside:avoid;position:relative;padding-left:2em;
  margin:0 0 .85em;line-height:1.45;}
.programm__list li::before{content:"";position:absolute;left:0;top:.34em;
  width:1.15em;height:1em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028.5%2024.76%27%3E%3Cpath%20fill%3D%27%2326afb7%27%20d%3D%27M0%2C12.66v-.62c.23-1.03%2C1.09-1.74%2C2.18-1.74h19.94c-.54-.3-1.07-.54-1.51-.99l-5.74-5.85c-.75-.76-.79-2.04-.08-2.81.81-.88%2C2.12-.85%2C2.93-.02l10.17%2C10.31c.76.77.82%2C2.07.04%2C2.86l-10.25%2C10.39c-.89.9-2.4.69-3.06-.34-.52-.82-.42-1.91.26-2.6l5.78-5.86c.42-.43.9-.65%2C1.46-.95H2.13c-1.09%2C0-1.93-.72-2.13-1.77Z%27%2F%3E%3C%2Fsvg%3E") left center / contain no-repeat;}

@media (max-width:600px){
  .programm__list{columns:1;}
}

/* ============================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   Schlanker Kopf: nur Navigationsleiste, kein Foto
   ============================================================ */
.page-legal .hero{background:#000;}
.page-legal .hero__photo,
.page-legal .hero__text,
.page-legal .badge{display:none;}
.page-legal .hero__inner{min-height:0;padding-block:clamp(1.4rem,3vw,2rem);}

/* Fließtext-Listen und Links innerhalb von .inhalt (u. a. Rechtsseiten) */
.inhalt__eyebrow{color:var(--teal);font-style:italic;font-weight:700;
  font-size:clamp(1.05rem,1rem + 0.4vw,1.3rem);margin:0 0 .2em;}
.inhalt ul{list-style:none;margin:.5em 0 1.3em;padding:0;max-width:740px;}
.inhalt ul li{position:relative;padding-left:2em;margin:0 0 .55em;line-height:1.45;}
.inhalt ul li::before{content:"";position:absolute;left:0;top:.28em;
  width:1.15em;height:1em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2028.5%2024.76%27%3E%3Cpath%20fill%3D%27%2326afb7%27%20d%3D%27M0%2C12.66v-.62c.23-1.03%2C1.09-1.74%2C2.18-1.74h19.94c-.54-.3-1.07-.54-1.51-.99l-5.74-5.85c-.75-.76-.79-2.04-.08-2.81.81-.88%2C2.12-.85%2C2.93-.02l10.17%2C10.31c.76.77.82%2C2.07.04%2C2.86l-10.25%2C10.39c-.89.9-2.4.69-3.06-.34-.52-.82-.42-1.91.26-2.6l5.78-5.86c.42-.43.9-.65%2C1.46-.95H2.13c-1.09%2C0-1.93-.72-2.13-1.77Z%27%2F%3E%3C%2Fsvg%3E") left center / contain no-repeat;}
.inhalt a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}
.inhalt a:hover{color:var(--teal-dark);}
.inhalt address{font-style:normal;line-height:1.55;margin:0 0 1.2em;}

/* Bild-Modifier: Bildausschnitt ausrichten – kombinierbar, z. B. class="unten rechts".
   Setzt object-position UND transform-origin (damit auch der Parallax-Zoom die
   gewählte Kante stehen lässt und sie nicht mittig wegschneidet). */
img.oben,img.unten,img.links,img.rechts{
  object-position:var(--img-x,center) var(--img-y,center);
  transform-origin:var(--img-x,center) var(--img-y,center);}
img.links{--img-x:left;}
img.rechts{--img-x:right;}
img.oben{--img-y:top;}
img.unten{--img-y:bottom;}

/* ============================================================
   SCROLL-REVEAL: Inhaltsblöcke (Text ⇄ Bild) blenden beim Scrollen ein.
   Wird per JS (parallax.js) nur auf Blöcke unterhalb des Sichtbereichs
   angewendet -> ohne JS/bei reduzierter Bewegung bleibt alles sichtbar.
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.22,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.fotoband.reveal{transform:translateY(42px);}   /* Bildbänder etwas mehr Weg */
.fotoband.reveal.in{transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;}
}

/* ============================================================
   BARRIEREFREIHEIT: Skip-Link + main-Landmark
   (nur fokus-sichtbare Zusatz-Elemente, kein Eingriff ins Farbschema)
   ============================================================ */
main{display:block;}
main:focus{outline:none;}
.skip-link{position:absolute;left:.5rem;top:-4rem;z-index:1000;
  background:var(--white);color:var(--ink);border:2px solid var(--teal);
  padding:.55em 1em;font-style:italic;font-weight:700;text-decoration:none;
  transition:top .15s ease;}
.skip-link:focus{top:.5rem;}

/* „Warum"-Bereich: Text + optionales Aktuell-Element */
.band-teal__grid{display:flex;flex-direction:column;gap:clamp(1.6rem,4vw,2.6rem);}
.band-teal__grid > .aktuell{order:-1;}            /* schmal: über dem Text */
@media (min-width:900px){
  .band-teal__grid{flex-direction:row;align-items:flex-start;}
  .band-teal__grid > .aktuell{order:0;}           /* breit: rechts neben dem Text */
  .band-teal__text{flex:1 1 auto;min-width:0;}
  .aktuell{width:clamp(300px,34%,380px);}
}

/* Aktuell!-Box */
.aktuell{position:relative;flex:0 0 auto;align-self:flex-start;margin-top:2.4rem;max-width:420px;}
.aktuell__tag{position:absolute;left:0;bottom:100%;margin-bottom:-5px;
  background:var(--red);color:var(--white);font-style:italic;font-weight:700;
  font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);line-height:1;padding:.12em .55em .2em;}
.aktuell__body{background:var(--white);border:5px solid var(--red);
  padding:clamp(1rem,2.2vw,1.5rem);}
.aktuell__title{color:var(--teal);font-style:italic;font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.05;margin:0 0 .35em;}
.aktuell__when,.aktuell__where{color:var(--ink);font-style:italic;font-weight:700;
  font-size:clamp(1.2rem,1rem + 0.6vw,1.5rem);line-height:1.15;margin:0;}