:root{
/* Schrift statt Schwarz: Fließtext läuft jetzt durchgängig in Rhöndorf-Blau */
--ink:#2d3c4b;
/* Seitenhintergrund: Cadenabbia-Türkis 25% (aus base 82/183/193 + 75% Weiß) */
--paper:#d4edf0;
/* Zweiter Hintergrundton für Wechsel-Sektionen: Cadenabbia-Türkis 10% */
--paper-2:#eef8f9;
/* Union-Gold – offizielle CDU-Akzentfarbe (RGB 255/166/0) */
--orange:#ffa600;
/* dunklere Gold-Variante nur für Text auf hellem Grund (Kontrast/Lesbarkeit) */
--orange-deep:#8a5a00;
/* helle Gold-Variante nur für Text auf dunklem Grund (Rhöndorf-Blau) */
--orange-onDark:#ffcb66;
/* Rhöndorf-Blau – offizieller CDU-Blauton (RGB 45/60/75, Quelle: FU-Styleguide 2024) */
--petrol:#2d3c4b;
--petrol-light:#47596b;
/* Cadenabbia-Türkis – offizielle CDU-Akzentfarbe (RGB 82/183/193) */
--tuerkis:#52b7c1;
--line:rgba(23,26,26,0.14);
--display: 'Space Grotesk', sans-serif;
--body: 'Inter', sans-serif;
--mono: 'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body);
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,0.97);
backdrop-filter:blur(6px);
border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;padding:16px 0;gap:28px;}
.brand-lockup{display:flex;align-items:center;gap:14px;margin-right:auto;}
.logo-slot{
height:66px;flex:none;
display:flex;align-items:center;justify-content:center;
}
.logo-slot img{height:100%;width:auto;display:block;}
.logo-slot .mark{width:14px;height:14px;background:var(--orange);border-radius:3px;}
.brand-text{display:flex;flex-direction:column;line-height:1.25;flex:none;}
.brand{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-0.01em;white-space:nowrap;}
.brand-sub{font-size:17.5px;color:#5a6060;font-weight:500;white-space:nowrap;}
.navlinks{display:flex;gap:18px;font-size:13.5px;font-weight:600;margin-left:16px;}
.navlinks a{
color:var(--petrol);text-decoration:none;opacity:0.85;transition:opacity .15s,border-color .15s;
white-space:nowrap;padding-bottom:3px;border-bottom:2px solid transparent;
}
.navlinks a:hover{opacity:1;border-color:var(--petrol);}
.nav-cta{
background:var(--petrol);color:#fff;
/* 50% kleiner als vorher (Padding + Schrift halbiert) */
padding:5px 10px;border-radius:3px;font-size:7px;font-weight:600;
text-decoration:none;white-space:nowrap;
}
@media (max-width:900px){ .navlinks{display:none;} }
/* Verhindert, dass der Untertitel auf sehr schmalen Handys hinter den Login-Button rutscht */
@media (max-width:420px){ .brand-sub{display:none;} }
.hero{padding:76px 0 40px;position:relative;}
h1{
font-family:var(--display);font-size:clamp(34px,5.4vw,58px);
line-height:1.04;letter-spacing:-0.02em;margin:0 0 22px;max-width:16ch;font-weight:600;
}
/* Reines Union-Gold wie gewünscht; leichter Schatten hält den Kontrast auf hellem Grund noch lesbar */
h1 em{font-style:normal;color:var(--orange);text-shadow:0 1px 1px rgba(23,26,26,.22);}
.hero-sub{font-size:18px;max-width:52ch;color:#3a3f3f;margin:0 0 34px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px;}
.btn{
padding:13px 24px;border-radius:3px;font-weight:600;font-size:14.5px;
text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
}
.btn-primary{background:var(--orange);color:var(--ink);}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:none;}
.hero-stats-wrap{position:relative;}
.hero-stats{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.stat{background:var(--paper);padding:22px 20px;}
.stat .n{font-family:var(--display);font-size:28px;font-weight:600;color:var(--petrol);}
.stat .l{font-size:12.5px;color:#5a6060;margin-top:4px;}
/* Kommunalwahl-Feld in Union-Gold hervorgehoben, Schrift/Farbe der Zahl unverändert */
.stat.stat-highlight{background:var(--orange);}
/* Text bricht früher um, damit er nicht unter dem Störer-Kreis verschwindet */
.stat.stat-highlight .l{max-width:112px;}
@media (max-width:700px){.hero-stats{grid-template-columns:repeat(2,1fr);}}
.stats-stand{
text-align:right;font-size:10.5px;color:#7a8080;margin-top:6px;
}
/* container-type:inline-size auf .hero-intro macht die Größe des Countdown-Störers (unten,
per cqw-Einheiten) von der tatsächlichen Breite der Einleitungsspalte abhängig — sobald in
"Aktionen" eine Kachel angelegt wird, teilt sich die Spalte den Platz mit der Aktionskachel
und wird schmaler, wodurch der Störer automatisch mit verkleinert wird (und wieder auf volle
Größe geht, sobald keine Aktionskachel vorhanden/sichtbar ist). Damit passt sich dieser
Störer genauso automatisch an wie der Störer je Aktionsbild. */
.hero-intro{flex:1 1 420px;min-width:0;container-type:inline-size;}
.stoerer{
/* Größe/Schrift skalieren jetzt stufenlos mit der Breite der Einleitungsspalte (cqw) --
Bezugswert war zuvor fest 134px/15px, das bleibt der Maximalwert bei viel Platz. */
position:absolute;top:-40px;right:-16px;border-radius:50%;
width:clamp(56px, 16.75cqw, 134px);height:clamp(56px, 16.75cqw, 134px);
background:linear-gradient(135deg, var(--petrol) 0%, var(--petrol) 60%, var(--tuerkis) 200%);color:#fff;
display:flex;align-items:center;justify-content:center;text-align:center;
font-family:var(--display);font-weight:700;line-height:1.28;
font-size:clamp(9px, 1.9cqw, 15px);
transform:rotate(-9deg);box-shadow:0 10px 22px rgba(23,26,26,.2);
border:3px solid var(--paper);padding:clamp(8px, 1.5cqw, 12px);text-decoration:none;
transition:transform .25s ease, box-shadow .25s ease;
}
.stoerer:hover{transform:rotate(-9deg) scale(1.06);box-shadow:0 14px 28px rgba(23,26,26,.28);}
/* Zweispaltiges Hero-Layout: Einleitungstext links, optionale Aktionskachel rechts daneben.
Flex-start hält die Kachel oben (auf Höhe der Überschrift) statt in der vertikalen Mitte,
damit sie nicht in die Statistik-Leiste mit dem Countdown-Störer hineinragt. */
.hero-flex{display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap;}
.aktion-col{flex:0 0 auto;position:relative;margin:0 auto;}
/* .aktion-tile ist der Größen-/Dreh-/Hover-Rahmen (kein overflow:hidden hier), damit ein
Störer in jeder Ecke frei über den Kartenrand hinausragen kann. Die eigentliche, abgerundete
und beschattete Karte (Bild oben + Beschriftung unten) liegt in .aktion-tile-card. Die
Drehung liegt in der CSS-Variable --aktion-rot, damit beim Hover eine Vergrößerung addiert
werden kann, ohne die eingestellte Drehung zu verlieren. container-type:inline-size macht
die Schriftgrößen von Störer UND Beschriftung (per cqw-Einheiten weiter unten) automatisch
von der tatsächlichen Kachelbreite abhängig — bei einer kleinen XS-Kachel entsprechend
kompakter, bei einer großen XL-Kachel größer (wie bei den Kandidatenkacheln). */
.aktion-tile{
position:relative;transform:rotate(var(--aktion-rot, 0deg));
transition:transform .35s ease;container-type:inline-size;
}
.aktion-col:hover .aktion-tile{
transform:rotate(var(--aktion-rot, 0deg)) scale(1.3);
z-index:6;
}
/* Die eigentliche Karte: Bild oben (fest quadratisch) + Beschriftung unten (Höhe automatisch
nach Textmenge) — dadurch wächst die gesamte Kachel automatisch mit, wenn die Beschriftung
mehr Platz braucht (größere Schrift, mehrere Zeilen), statt das Foto zu überlagern. */
.aktion-tile-card{
position:relative;z-index:2;overflow:hidden;border-radius:10px;background:var(--paper);
box-shadow:0 16px 32px rgba(23,26,26,.18);border:1px solid var(--line);
transition:box-shadow .35s ease;
}
.aktion-col:hover .aktion-tile-card{box-shadow:0 26px 48px rgba(23,26,26,.3);}
.aktion-tile-inner{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--paper);}
/* object-fit:contain statt cover, damit das Foto sich der Kachelgröße anpasst, ohne
beschnitten zu werden (gilt für jede Kachelgröße XS-XL) — object-position:top hält dabei
die Bildoberkante bündig mit der Kachel-Oberkante (auf Höhe der Überschrift), eventueller
Leerraum bei abweichendem Seitenverhältnis entsteht dann unten statt oben. */
.aktion-tile-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top center;
opacity:0;transition:opacity 1s ease;}
.aktion-tile-inner img.is-active{opacity:1;}
.aktion-tile.size-xs{width:160px;}
.aktion-tile.size-s{width:210px;}
.aktion-tile.size-m{width:270px;}
.aktion-tile.size-l{width:330px;}
.aktion-tile.size-xl{width:400px;}
/* Beschriftung (Name/Gremium/Listenplatz/Download) liegt als eigener Bereich UNTER dem Foto,
innerhalb derselben Karte — kein Überlagern des Fotos mehr. pointer-events:none auf der
ganzen Karte lässt Klicks auf Foto und reinen Beschriftungstext zur kachelweiten Verlinkung
durchfallen; nur der Download-Link bekommt sein eigenes pointer-events:auto zurück (kein
verschachteltes im — das wäre ungültiges HTML und unzuverlässig). */
.aktion-tile-card{pointer-events:none;}
.aktion-caption{padding:14px 14px 16px;text-align:center;}
.aktion-caption-item{display:none;}
.aktion-caption-item.is-active{display:block;}
/* Name: 100% größer als zuvor (15px → 30px maximal), Gremium und Listenplatz je 40% größer
(11px → 15,5px maximal), jeweils in eigener Zeile. Alle drei skalieren stufenlos mit der
Kachelbreite (cqw), genau wie der Störer weiter unten. */
.aktion-caption-item .name{
font-weight:700;color:var(--ink);margin-bottom:4px;
font-size:clamp(22px, 9.2cqw, 30px);line-height:1.15;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aktion-caption-item .gremium{
font-weight:600;color:var(--petrol);margin-bottom:3px;
font-size:clamp(11px, 4.5cqw, 15.5px);line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aktion-caption-item .listplatz{
font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.03em;
font-size:clamp(11px, 4.5cqw, 15.5px);line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.aktion-caption-item .aktion-download{
display:inline-block;margin-top:8px;font-weight:700;color:var(--petrol);text-decoration:none;
border-bottom:1px solid var(--petrol);pointer-events:auto;
font-size:clamp(10px, 4cqw, 14px);
}
.aktion-caption-item .aktion-download:hover{color:var(--tuerkis);border-color:var(--tuerkis);}
/* Störer je Bild: skaliert jetzt stufenlos mit der Kachelbreite (cqw, wie oben beschrieben) —
bei einer kleinen XS-Kachel entsprechend kleiner, bei einer großen XL-Kachel größer. Frei
positionierbar in einer der vier Ecken; nur der Störer des aktuell aktiven Bildes ist
sichtbar. Liegt außerhalb von .aktion-tile-card, damit er frei über den Kartenrand
hinausragen kann (die Karte selbst hat overflow:hidden für die abgerundeten Ecken). */
.aktion-stoerer{
position:absolute;border-radius:50%;
width:clamp(70px, 42cqw, 130px);height:clamp(70px, 42cqw, 130px);
color:#fff;display:none;align-items:center;justify-content:center;text-align:center;
font-family:var(--display);font-weight:700;line-height:1.2;
font-size:clamp(9px, 5.25cqw, 16px);padding:clamp(6px, 3.5cqw, 11px);
box-shadow:0 10px 22px rgba(23,26,26,.24);
border:3px solid var(--paper);z-index:3;
}
.aktion-stoerer.is-active{display:flex;}
.aktion-stoerer[hidden]{display:none;} /* für die Live-Vorschau im Redaktionsbereich, wo is-active + hidden kombiniert werden */
.aktion-stoerer.stoerer-pos-oben-rechts{top:-34px;right:-18px;transform:rotate(-9deg);}
.aktion-stoerer.stoerer-pos-oben-links{top:-22px;left:-22px;transform:rotate(9deg);}
.aktion-stoerer.stoerer-pos-unten-rechts{bottom:-22px;right:-22px;transform:rotate(9deg);}
.aktion-stoerer.stoerer-pos-unten-links{bottom:-22px;left:-22px;transform:rotate(-9deg);}
.aktion-stoerer.stoerer-color-blau{background:linear-gradient(135deg, var(--petrol) 0%, var(--petrol) 60%, var(--tuerkis) 200%);}
.aktion-stoerer.stoerer-color-gold{background:linear-gradient(135deg, var(--orange) 0%, var(--orange) 70%, #ffce70 200%);color:var(--ink);}
.aktion-stoerer.stoerer-color-tuerkis{background:linear-gradient(135deg, var(--tuerkis) 0%, var(--tuerkis) 65%, var(--petrol) 220%);}
.aktion-stoerer.stoerer-color-weiss{background:var(--paper);color:var(--ink);border-color:var(--line);}
/* Ganze Kachel klickbar (falls verlinkt): liegt als transparente Ebene unter der Karte. Da die
Karte (Bild + Beschriftung) komplett auf pointer-events:none steht (siehe oben), fallen
Klicks überall auf Foto und reinem Text zu diesem Link durch — nur der Download-Link fängt
seine eigenen Klicks unabhängig ab. */
.aktion-tile-link{position:absolute;inset:0;z-index:1;display:block;text-decoration:none;}
@media (max-width:900px){
/* align-items:flex-start bezieht sich in Zeilen-Richtung (row) auf die SENKRECHTE Achse
(hält die Kachel oben, siehe Kommentar weiter oben) — sobald hier auf Spalten-Richtung
(column) umgeschaltet wird, würde dieselbe Eigenschaft plötzlich die WAAGRECHTE Achse
steuern und .hero-intro dadurch auf reine Inhaltsbreite schrumpfen lassen (Text bricht
dann nach jedem Wort um). Deshalb hier gezielt auf "stretch" zurücksetzen, damit
.hero-intro wieder die volle Breite der Spalte einnimmt. */
.hero-flex{flex-direction:column;align-items:stretch;}
.aktion-col{align-self:center;}
}
@media (max-width:700px){
/* Nur noch die Breite wird hier begrenzt — die Höhe der Karte ergibt sich automatisch aus
Bild (quadratisch zur Breite) + Beschriftung. Störer-Größe/-Schrift skalieren dank
container-type:inline-size auf .aktion-tile automatisch mit dieser Breite mit, ganz ohne
eigene Override-Regel hier. */
.aktion-tile.size-xs,.aktion-tile.size-s,.aktion-tile.size-m,.aktion-tile.size-l,.aktion-tile.size-xl{
width:min(78vw,300px);
}
}
section{padding:64px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px;flex-wrap:wrap;}
.section-head h2{font-family:var(--display);font-size:clamp(24px,3vw,32px);margin:0;font-weight:600;letter-spacing:-0.01em;}
.section-tag{font-family:var(--mono);font-size:12px;color:var(--petrol-light);text-transform:uppercase;letter-spacing:.05em;}
.view-all{font-size:13.5px;font-weight:600;text-decoration:none;color:var(--orange-deep);white-space:nowrap;}
.section-intro{font-size:16px;color:#3a3f3f;margin:-18px 0 30px;max-width:64ch;}
.subgroup-title{
font-family:var(--display);font-size:14.5px;text-transform:uppercase;letter-spacing:.05em;
color:var(--petrol);margin:0 0 16px;padding-top:8px;
}
.subgroup-title:not(:first-of-type){margin-top:40px;}
.news-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px;}
@media (max-width:820px){.news-grid{grid-template-columns:1fr;}}
.news-card{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;}
.news-img{height:170px;background:var(--petrol);position:relative;}
.news-card:nth-child(2) .news-img{background:var(--orange);}
.news-card:nth-child(3) .news-img{background:var(--tuerkis);}
.news-card.feature .news-img{height:260px;}
.news-img .tag{
position:absolute;bottom:14px;left:14px;background:rgba(255,255,255,.92);color:var(--ink);
font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:2px;
}
.news-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.news-date{font-family:var(--mono);font-size:12px;color:#7a8080;margin-bottom:8px;}
.news-title{font-weight:700;font-size:16.5px;margin:0 0 10px;line-height:1.3;}
.news-card.feature .news-title{font-size:21px;}
.news-excerpt{font-size:14px;color:#565c5c;margin:0;flex:1;}
.news-link{font-size:13px;font-weight:600;color:var(--orange-deep);margin-top:14px;text-decoration:none;}
.news-source-note{
font-family:var(--mono);font-size:11.5px;color:#7a8080;margin-top:18px;
border-top:1px dashed var(--line);padding-top:14px;
}
.news-body{align-items:center;justify-content:center;min-height:70px;}
.news-pending{
font-family:var(--mono);font-size:11.5px;color:#8a8f8f;
border:1px solid var(--line);padding:4px 11px;border-radius:20px;
}
/* dezenter Verlauf zwischen den beiden offiziellen Markenfarben statt Vollfarbe */
.themen{background:linear-gradient(135deg, var(--petrol) 0%, var(--petrol) 55%, var(--tuerkis) 220%);color:var(--paper);}
.themen .section-tag{color:var(--orange-onDark);}
.themen-list{border-top:1px solid rgba(255,255,255,.16);}
.themen-item{
display:grid;grid-template-columns:44px 1fr;gap:22px;
padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16);
}
.themen-item .num{font-family:var(--mono);font-size:13px;color:var(--orange);padding-top:3px;}
.themen-item p{font-size:16.5px;line-height:1.65;color:#dde1e1;margin:0;max-width:74ch;}
.themen-item .tuerkis{color:var(--tuerkis);font-weight:700;font-size:18.5px;}
@media (max-width:600px){.themen-item{grid-template-columns:1fr;gap:8px;}}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:820px){.team-grid{grid-template-columns:repeat(2,1fr);}}
.team-grid.wide{grid-template-columns:repeat(6,1fr);gap:14px;}
@media (max-width:980px){.team-grid.wide{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.team-grid.wide{grid-template-columns:repeat(2,1fr);}}
.person{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff;}
.person-photo{height:230px;background:#e2e5e2;position:relative;}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.person-photo .initials{
width:100%;height:100%;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:700;font-size:38px;color:var(--petrol-light);background:#e2e5e2;
}
.person-photo .pending{
position:absolute;top:10px;right:10px;background:#fff;border:1px solid var(--line);color:#5a6060;
font-family:var(--mono);font-size:10px;padding:3px 7px;border-radius:20px;
}
.person-photo::after{content:"";position:absolute;left:14px;bottom:14px;width:26px;height:3px;background:var(--orange);}
/* Kachelgrößen-Skala (frei wählbar je Person, Auswahl im Redaktionsbereich): XS-XL —
gilt für Fraktion, Vorstand und Beisitzer:innen gleichermaßen. */
.person.size-xs .person-photo{height:85px;}
.person.size-s .person-photo{height:110px;}
.person.size-m .person-photo{height:150px;}
.person.size-l .person-photo{height:190px;}
.person.size-xl .person-photo{height:230px;}
.person.size-xs .person-photo .initials{font-size:15px;}
.person.size-s .person-photo .initials{font-size:19px;}
.person.size-m .person-photo .initials{font-size:25px;}
.person.size-l .person-photo .initials{font-size:30px;}
.person.size-xl .person-photo .initials{font-size:38px;}
/* Kandidaten-Kacheln (Kommunalwahl 2026): gleiche Kachelgröße wie Fraktion, aber Bildbereich in
Union-Gold mit mittig eingesetztem, gerahmtem Foto statt randabschneidendem Vollflächenfoto. */
.candidate-photo{height:230px;background:var(--orange);padding:8px;}
.candidate-photo-inner{width:100%;height:100%;border-radius:4px;overflow:hidden;background:#fff;}
.candidate-photo-inner img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.candidate-photo-inner .initials{
width:100%;height:100%;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:700;font-size:34px;color:var(--petrol-light);background:#fff;
}
/* Kachelgrößen-Skala (frei wählbar je Kandidat:in, Auswahl im Redaktionsbereich): XS-XL */
.person.size-xs .candidate-photo{height:85px;}
.person.size-s .candidate-photo{height:110px;}
.person.size-m .candidate-photo{height:150px;}
.person.size-l .candidate-photo{height:190px;}
.person.size-xl .candidate-photo{height:230px;}
.person.size-xs .candidate-photo-inner .initials{font-size:15px;}
.person.size-s .candidate-photo-inner .initials{font-size:19px;}
.person.size-m .candidate-photo-inner .initials{font-size:25px;}
.person.size-l .candidate-photo-inner .initials{font-size:30px;}
.person.size-xl .candidate-photo-inner .initials{font-size:34px;}
.person-info{padding:14px 16px 18px;}
.team-grid.wide .person-info{padding:12px 12px 14px;}
.person-info .name{font-weight:700;font-size:15px;margin-bottom:3px;}
.team-grid.wide .person-info .name{font-size:13px;}
.person-info .listplatz{font-size:11px;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;}
.person-info .role{font-size:12.5px;color:var(--petrol);font-weight:600;}
.team-grid.wide .person-info .role{font-size:11px;}
.roster-note{
font-family:var(--mono);font-size:11.5px;color:#7a8080;margin-top:22px;
border-top:1px dashed var(--line);padding-top:14px;
}
.insta{background:var(--paper-2);}
.insta-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px;}
.insta-copy{flex:1;min-width:260px;}
.handle{
display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;background:#fff;
border:1px solid var(--line);padding:8px 14px;border-radius:20px;margin-top:18px;text-decoration:none;color:var(--ink);
}
.insta-qr-promo{
/* Hintergrund Union-Gold, QR-Code +100%, Text entsprechend mitgewachsen */
display:flex;align-items:center;gap:20px;background:var(--orange);border:1px solid var(--line);
border-radius:8px;padding:20px 26px;text-decoration:none;color:var(--ink);flex:none;
}
.insta-qr-promo img{width:128px;height:128px;flex:none;}
.insta-qr-promo strong{display:block;font-family:var(--display);font-size:18px;margin-bottom:5px;}
.insta-qr-promo span{display:block;font-size:14px;color:var(--ink);opacity:.75;max-width:24ch;}
.insta-tiles{display:flex;flex-wrap:wrap;gap:18px;max-width:640px;}
.ig-tile{text-decoration:none;color:var(--ink);display:block;width:150px;}
@media (max-width:600px){.ig-tile{width:calc(50% - 9px);}}
/* Kachelgrößen-Skala (frei wählbar je Kachel, Auswahl im Redaktionsbereich): XS-XL */
.ig-tile.size-xs{width:85px;}
.ig-tile.size-s{width:110px;}
.ig-tile.size-m{width:150px;}
.ig-tile.size-l{width:190px;}
.ig-tile.size-xl{width:230px;}
@media (max-width:600px){.ig-tile.size-xs,.ig-tile.size-s,.ig-tile.size-m,.ig-tile.size-l,.ig-tile.size-xl{width:calc(50% - 9px);}}
.ig-tile-ph{
aspect-ratio:1;border-radius:6px;background:var(--petrol);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
.ig-tile:nth-child(2) .ig-tile-ph{background:var(--tuerkis);}
.ig-tile-ph svg{opacity:.9;}
.ig-pending{
font-family:var(--mono);font-size:11px;color:#fff;background:rgba(255,255,255,.16);
padding:4px 10px;border-radius:20px;
}
.ig-tile-label{display:block;font-size:13px;font-weight:600;margin-top:10px;color:var(--petrol);}
.downloads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:820px){.downloads-grid{grid-template-columns:1fr;}}
.downloads-grid--single{grid-template-columns:minmax(0,300px);}
.doc-card{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;}
.doc-preview{height:340px;background:#e9e9e4;border-bottom:1px solid var(--line);overflow:hidden;}
.doc-preview img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}
.doc-preview.empty{display:flex;align-items:center;justify-content:center;color:#8a8f8f;font-family:var(--mono);font-size:12px;}
.doc-links{display:flex;flex-direction:column;gap:8px;margin-top:auto;align-items:flex-start;}
.doc-view{
font-size:12.5px;font-weight:600;color:var(--petrol);text-decoration:none;
}
.doc-body{padding:18px 20px;flex:1;display:flex;flex-direction:column;}
.doc-title{font-weight:700;font-size:15px;margin-bottom:6px;}
.doc-meta{font-family:var(--mono);font-size:11.5px;color:#7a8080;margin-bottom:14px;}
.doc-dl{margin-top:auto;font-size:13.5px;padding:10px 18px;}
.doc-card.placeholder{opacity:.6;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{border:1px solid var(--line);border-radius:5px;padding:28px;background:#fff;}
.contact-card h3{font-family:var(--display);margin:0 0 6px;font-size:19px;}
.contact-card p{margin:0 0 18px;color:#565c5c;font-size:14px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;}
.field input, .field select{
width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:3px;
font-family:var(--body);font-size:14px;background:var(--paper);
}
.field input:disabled{color:#9aa0a0;}
.contact-info-list{list-style:none;padding:0;margin:0;}
.contact-info-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;display:flex;justify-content:space-between;}
.contact-info-list li span:first-child{color:#7a8080;font-family:var(--mono);font-size:12px;text-transform:uppercase;}
.qr-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);}
.qr-card{border:1px solid var(--line);border-radius:4px;padding:12px;text-align:center;text-decoration:none;color:var(--ink);}
.qr-card img{width:100%;height:auto;margin:0 auto 8px;}
.qr-brand{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:700;}
.qr-brand svg{flex:none;}
.qr-card.wa{border-top:3px solid var(--petrol);}
.qr-card.ig{border-top:3px solid var(--orange);}
.qr-card.fb{border-top:3px solid var(--tuerkis);}
.redaktion-konzept{background:var(--paper-2);}
.concept-flag{
font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
background:var(--orange);color:var(--ink);padding:5px 10px;border-radius:20px;white-space:nowrap;
}
.mock-window{display:flex;justify-content:center;}
.mock-card{
width:100%;max-width:360px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px;
box-shadow:0 12px 30px rgba(23,26,26,.06);
}
.mock-logo{width:38px;height:38px;background:var(--petrol);border-radius:6px;margin-bottom:14px;}
.mock-card h4{font-family:var(--display);margin:0 0 18px;font-size:17px;}
.mock-modules{max-width:640px;margin:34px auto 0;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.mock-modules li{
list-style:none;display:flex;justify-content:space-between;align-items:center;
padding:13px 20px;border-bottom:1px solid var(--line);font-size:14px;
}
.mock-modules li:last-child{border-bottom:none;}
.mock-modules .edit-btn{
font-family:var(--mono);font-size:11px;border:1px solid var(--line);padding:5px 10px;border-radius:20px;color:#9aa0a0;
}
.impressum{background:#fff;}
.legal-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media (max-width:760px){.legal-grid{grid-template-columns:1fr;}}
.legal-block{margin-bottom:30px;}
.legal-block h3{font-family:var(--display);font-size:16px;margin:0 0 10px;font-weight:600;}
.legal-block p{font-size:14px;line-height:1.65;color:#3a3f3f;margin:0 0 10px;}
.legal-block address{font-style:normal;font-size:14px;line-height:1.65;color:#3a3f3f;}
/* Haftung/Urheberrecht (rechte Spalte): 2 Schriftgrößen kleiner als der Rest des Impressums */
.legal-col-liability .legal-block p{font-size:12px;}
.legal-note{
font-family:var(--mono);font-size:11.5px;color:#7a8080;margin-top:8px;
border-top:1px dashed var(--line);padding-top:30px;
}
footer{border-top:1px solid var(--line);padding:36px 0;font-size:13px;color:#6a7070;}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.foot-links a{margin-left:18px;text-decoration:none;color:#6a7070;}
.form-notice{font-size:13.5px;padding:9px 12px;border-radius:4px;margin:0 0 14px;}
.form-notice-ok{background:#e9f7ee;border:1px solid #a8d9bb;color:#1f5c34;}
.form-notice-error{background:#fdeaea;border:1px solid #e8b4b4;color:#7a1f1f;}
.concept-flag-live{background:var(--tuerkis);color:#fff;}
.edit-btn-live{background:var(--tuerkis);color:#fff;border-color:var(--tuerkis);}
.ig-tile-img{aspect-ratio:1;border-radius:6px;object-fit:cover;width:100%;display:block;}
/* ===== Frischer-Auftritt-Ergänzungen ===== */
/* Sanftes Einblenden der Bereiche beim Scrollen */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
/* Kleine Hover-Bewegung auf Karten, damit die Seite interaktiver wirkt */
.news-card, .person, .doc-card{transition:transform .25s ease, box-shadow .25s ease;}
.news-card:hover, .person:hover, .doc-card:hover{
transform:translateY(-5px);box-shadow:0 16px 30px rgba(23,26,26,.14);
}
/* Nur bei Kandidaten 2026: Kachel beim Überfahren mit der Maus um 30% vergrößert hervorheben
(überschreibt die allgemeine .person:hover-Bewegung oben gezielt für diese Kacheln). */
.person.candidate-card{position:relative;}
.person.candidate-card:hover{
transform:scale(1.3);box-shadow:0 20px 40px rgba(23,26,26,.24);z-index:5;
}
/* Barrierefreiheit: Bewegung reduzieren, wenn vom System gewünscht */
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1;transform:none;transition:none;}
.news-card, .person, .doc-card, .stoerer, .person.candidate-card, .aktion-tile, .aktion-tile-inner{transition:none;}
}
/* Mobile Schnellzugriffsleiste (Kontakt / WhatsApp / Instagram) */
.mobile-quickbar{display:none;}
@media (max-width:700px){
.mobile-quickbar{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
background:#fff;border-top:1px solid var(--line);
box-shadow:0 -6px 18px rgba(23,26,26,.1);
padding-bottom:env(safe-area-inset-bottom, 0);
}
.mobile-quickbar a{
flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:9px 4px 8px;text-decoration:none;color:var(--petrol);font-size:11px;font-weight:600;
}
.mobile-quickbar a:active{background:var(--paper-2);}
body{padding-bottom:62px;}
}