/*
Theme Name: CONtraCEPT
Description: A Child Theme for the Enfold Wordpress Theme.
Version: 1.0
Author: Max
Author URI: https://roederstein.org
Template: enfold
*/
/*Add your own styles here:*/
/* ==========================================================================
CONtraCEPT Custom Styles
========================================================================== */
/* --- Vollbreiten-Sections ---------------------------------------------------
Die av-Sections hängen im seitenweiten Content-Container (.av-section-cont-open,
max-width 1310px) und brachen nicht auf volle Breite aus (weiße Ränder links/
rechts). Wir öffnen den seitenweiten Container auf 100%; die Inhalte jeder
Section bleiben durch deren eigenen inneren .container zentriert.
-------------------------------------------------------------------------- */
/* (Vollbreiten-Hack entfernt: nicht mehr nötig, seit der Shortcode-Tree korrekt
regeneriert wird und Enfold die Sections nativ auf volle Breite ausbricht.) */
/* --- Fußzeile (Socket): Links lesbar machen --------------------------------
Standard-Linkfarbe war dunkellila (#5C2D91) auf dunklem Lila-Grund (#3A1A5E).
-------------------------------------------------------------------------- */
#socket.socket_color,
#socket.socket_color .copyright {
color: #ffffff;
}
#socket.socket_color .sub_menu_socket a,
#socket.socket_color .sub_menu a {
color: rgba(255, 255, 255, 0.85);
}
#socket.socket_color .sub_menu_socket a:hover,
#socket.socket_color .sub_menu a:hover {
color: #ffffff;
}
#socket.socket_color .sub_menu_socket .av-subnav-seperator,
#socket.socket_color .sub_menu li + li {
border-color: rgba(255, 255, 255, 0.3);
}
/* --- Mobile-Optimierung -----------------------------------------------------
Die Inhalts-Spalten tragen ein festes Seiten-Padding von 60px (vom
padding-Attribut der Spalten, als Regel OHNE Media-Query). Das überstimmt
Enfolds Mobil-Standard und lässt auf Smartphones zu wenig Platz. Wir
reduzieren das Seiten-Padding auf kleinen Screens auf ein sinnvolles Maß.
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
#top .flex_column.av_one_full,
#top .flex_column.av_one_half,
#top .flex_column.av_one_third,
#top .flex_column.av_two_third {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
@media only screen and (max-width: 479px) {
#top .flex_column.av_one_full,
#top .flex_column.av_one_half,
#top .flex_column.av_one_third,
#top .flex_column.av_two_third {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ==========================================================================
CONtraCEPT Designsystem (cc-*)
Wiederverwendbare, markentreue Komponenten. Werden als Inline-HTML in
av_textblock-Elementen genutzt (rendert zuverlässig + im Builder editierbar).
Farben fix: Lila #5C2D91, Pink #E8457A, Hell #FAF5FF.
========================================================================== */
#top .av_textblock_section .cc-scope, /* fallback scope */
.cc {
--cc-purple: #5C2D91;
--cc-pink: #E8457A;
--cc-light: #FAF5FF;
--cc-ink: #2c2240;
--cc-muted: #6f6885;
}
/* Grid */
.cc-grid { display: grid; gap: 22px; margin: 8px 0; }
.cc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Card */
.cc-card {
background: #fff;
border: 1px solid rgba(92,45,145,0.07);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(92,45,145,0.08);
transition: transform .25s ease, box-shadow .25s ease;
height: 100%;
box-sizing: border-box;
}
.cc-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(92,45,145,0.16); }
.cc-card--soft { background: #FAF5FF; border-color: rgba(92,45,145,0.10); box-shadow: none; }
.cc-card--purple { background: linear-gradient(150deg,#5C2D91,#3a1060); color: #fff; border: none; }
.cc-card--pink { background: linear-gradient(150deg,#E8457A,#c12e63); color: #fff; border: none; }
.cc-card--purple h3, .cc-card--pink h3, .cc-card--purple h4, .cc-card--pink h4 { color: #fff; }
.cc-card h3, .cc-card h4 { color: var(--cc-purple); margin: 0 0 10px; }
.cc-card p { color: #4a4458; line-height: 1.65; margin: 0; }
.cc-card--purple p, .cc-card--pink p { color: rgba(255,255,255,0.88); }
/* Icon chip (enthält ein Inline-SVG) */
.cc-icon {
width: 56px; height: 56px; border-radius: 16px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg,#5C2D91,#E8457A);
color: #fff; margin-bottom: 18px;
box-shadow: 0 8px 20px rgba(92,45,145,0.28);
}
.cc-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.cc-icon--pink { background: linear-gradient(135deg,#E8457A,#5C2D91); }
.cc-icon--soft { background: #fff; color: #5C2D91; box-shadow: 0 6px 16px rgba(92,45,145,0.12); }
/* Eyebrow / Badge */
.cc-eyebrow {
display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: #E8457A;
background: rgba(232,69,122,0.10); padding: 6px 14px; border-radius: 30px; margin-bottom: 14px;
}
.cc-badge {
display: inline-block; font-size: 13px; font-weight: 700; color: #fff;
background: linear-gradient(135deg,#5C2D91,#E8457A); padding: 5px 13px; border-radius: 8px;
}
/* Stat */
.cc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 26px; }
.cc-stat__num {
font-size: 52px; font-weight: 800; line-height: 1;
background: linear-gradient(120deg,#5C2D91,#E8457A);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #5C2D91;
}
.cc-stat__label { color: var(--cc-muted); margin-top: 8px; font-size: 15px; }
.cc-card--purple .cc-stat__num, .cc-card--pink .cc-stat__num {
background: none; -webkit-text-fill-color: #fff; color: #fff;
}
/* Checkliste: aktive Definition im v3-Block weiter unten (#top .cc-list, Flexbox-Marker).
Frühere Basis-Definition entfernt (war komplett von v3 überschrieben; enthielt u.a. Alt-Rot #b03060). */
/* Divider */
.cc-divider { width: 64px; height: 5px; border-radius: 5px; background: linear-gradient(90deg,#5C2D91,#E8457A); margin: 6px 0 22px; }
.cc-divider--center { margin-left: auto; margin-right: auto; }
/* CTA-Block: Box-Optik im v4-Block (helle Karte). Button = einheitlicher cc-btn (v12). */
/* Button (für reine HTML-CTAs; Avia-Buttons bleiben unberührt) */
.cc-btn {
display: inline-block; background: linear-gradient(135deg,#5C2D91,#E8457A); color: #fff !important;
padding: 14px 28px; border-radius: 40px; font-weight: 600; text-decoration: none;
box-shadow: 0 10px 24px rgba(92,45,145,0.30); transition: transform .2s ease, box-shadow .2s ease;
}
.cc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(92,45,145,0.4); }
/* Press-/List-Row */
.cc-row {
display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid rgba(92,45,145,0.07);
border-left: 4px solid #E8457A; border-radius: 14px; padding: 22px 26px; margin-bottom: 16px;
transition: transform .2s ease, box-shadow .2s ease;
}
.cc-row:hover { transform: translateX(3px); box-shadow: 0 10px 26px rgba(92,45,145,0.12); }
.cc-row__date { color: #E8457A; font-weight: 700; font-size: 14px; white-space: nowrap; }
/* Sanfte Einblend-Animation beim Laden */
@keyframes ccFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cc-animate { animation: ccFadeUp .6s ease both; }
@media (prefers-reduced-motion: reduce) {
.cc-animate { animation: none; }
.cc-card, .cc-row, .cc-btn { transition: none; }
}
/* Mobil: Karten-Padding etwas reduzieren */
@media only screen and (max-width: 767px) {
.cc-card { padding: 24px; }
.cc-cta { padding: 30px; }
.cc-stat__num { font-size: 42px; }
}
/* ==========================================================================
Verfeinerungen v2 (Feedback: Schrift größer, Kontrast auf Lila, FAQ-Akkordeon)
========================================================================== */
/* Größere, besser lesbare Schrift in Karten */
.cc-card p, .cc-card li { font-size: 16px; line-height: 1.7; }
.cc-card h3 { font-size: 20px; }
.cc-card h4 { font-size: 18px; }
/* Lesbarkeit auf dunklen/lila Flächen */
.cc-on-dark p, .cc-on-dark li, .cc-on-dark h3, .cc-on-dark h4 { color: #ffffff !important; }
.cc-card--purple .cc-list li, .cc-card--pink .cc-list li, .cc-on-dark .cc-list li { color: rgba(255,255,255,0.92); }
.cc-card--purple .cc-list li::before, .cc-card--pink .cc-list li::before,
.cc-on-dark .cc-list li::before { background: rgba(255,255,255,0.20); }
.cc-card--purple .cc-list--check li::after, .cc-card--pink .cc-list--check li::after,
.cc-on-dark .cc-list--check li::after { border-color: #8affc0; }
/* Nummern-Badge, Pill-Label, Top-Accent für Karten (App-Typen u.a.) */
.cc-num { width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5C2D91,#E8457A);color:#fff;font-weight:800;font-size:18px;margin-bottom:16px;box-shadow:0 8px 20px rgba(92,45,145,0.25); }
.cc-pill { display:inline-block;font-size:12.5px;font-weight:600;color:#5C2D91;background:rgba(92,45,145,0.09);padding:4px 12px;border-radius:30px;margin:0 0 12px; }
.cc-card--accent-top { border-top: 4px solid #E8457A; }
/* FAQ-Akkordeon (reines HTML , kein JS, klappt auf Klick auf) */
.cc-faq { display:grid; gap:14px; }
.cc-faq details { background:#fff;border:1px solid rgba(92,45,145,0.10);border-radius:16px;box-shadow:0 6px 20px rgba(92,45,145,0.06);overflow:hidden;transition:box-shadow .2s ease; }
.cc-faq details[open] { box-shadow:0 12px 30px rgba(92,45,145,0.12); }
.cc-faq summary { list-style:none;cursor:pointer;padding:22px 26px;font-size:18px;font-weight:600;color:#5C2D91;display:flex;align-items:center;justify-content:space-between;gap:16px; }
.cc-faq summary::-webkit-details-marker { display:none; }
.cc-faq summary::after { content:"+";font-size:28px;font-weight:300;color:#E8457A;line-height:1;flex:0 0 auto; }
.cc-faq details[open] summary::after { content:"\2212"; }
.cc-faq .cc-faq__a { padding:0 26px 24px;color:#4a4458;line-height:1.7;font-size:16px; }
/* Mobil: Schrift/Spacing */
@media only screen and (max-width: 767px) {
.cc-card p, .cc-card li, .cc-faq .cc-faq__a { font-size: 15.5px; }
.cc-faq summary { font-size: 16.5px; padding: 18px 20px; }
.cc-faq .cc-faq__a { padding: 0 20px 20px; }
}
/* Glossar als Liste (statt Kacheln) */
.cc-gloss { margin: 8px 0; }
.cc-gloss__item { display:flex; gap:30px; padding:22px 6px; border-bottom:1px solid rgba(92,45,145,0.12); align-items:baseline; }
.cc-gloss__item:first-child { border-top:1px solid rgba(92,45,145,0.12); }
.cc-gloss__term { flex:0 0 240px; color:#5C2D91; font-weight:700; font-size:18px; }
.cc-gloss__def { flex:1; color:#4a4458; line-height:1.7; font-size:16px; margin:0; }
@media only screen and (max-width:600px){ .cc-gloss__item{ flex-direction:column; gap:6px; padding:18px 4px;} .cc-gloss__term{ flex:none; font-size:17px;} }
/* ==========================================================================
v3 (Feedback): Listen-Marker sauber & markentreu, Icon-Zentrierung
========================================================================== */
/* Kein doppelter Bullet (Enfold-Standard-Disc entfernen) */
#top .cc-list, #top .cc-list li { list-style: none !important; }
#top .cc-list { margin: 0; padding: 0; }
#top .cc-list li {
display: flex; align-items: flex-start; gap: 14px;
padding: 7px 0; color: #4a4458; line-height: 1.6;
}
/* alte ::after-Marker deaktivieren */
#top .cc-list li::after { content: none !important; }
/* Kreis mit zentriertem Glyph, per Flexbox an der ersten Textzeile ausgerichtet */
#top .cc-list li::before {
content: ""; position: static; flex: 0 0 23px; width: 23px; height: 23px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; line-height: 1;
margin-top: 0.12em;
background: rgba(92,45,145,0.10); color: #5C2D91;
}
#top .cc-list--check li::before { content: "\2713"; background: rgba(46,125,79,0.14); color: #2e7d4f; }
#top .cc-list--x li::before { content: "\2715"; background: rgba(232,69,122,0.14); color: #E8457A; }
/* auf dunklen/lila Flächen */
#top .cc-on-dark .cc-list li, #top .cc-card--purple .cc-list li, #top .cc-card--pink .cc-list li { color: rgba(255,255,255,0.92); }
#top .cc-on-dark .cc-list--check li::before, #top .cc-card--purple .cc-list--check li::before { background: rgba(255,255,255,0.22); color: #a6ffc8; }
#top .cc-on-dark .cc-list--x li::before { background: rgba(255,255,255,0.22); color: #ffb3cd; }
/* Icon-Chip: SVG als Block, exakt zentriert (kein Baseline-Versatz) */
#top .cc-icon { line-height: 0; }
#top .cc-icon svg { display: block; }
/* ==========================================================================
v4 (Feedback): Schriftart, dezenter CTA, FAQ-Fragen schwarz
========================================================================== */
/* Schrift: ansprechender System-Stack (kein externer Request, DSGVO-konform).
"Inter"/"Poppins" stehen vorn, damit eine später self-gehostete Webschrift
automatisch greift; bis dahin: Avenir Next (macOS) / Segoe UI (Windows). */
:root{
--cc-font-body:"Inter","Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--cc-font-head:"Poppins","Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
body, #top, #top p, #top li, #top td, #top input, #top textarea, #top select,
#top .av_textblock_section, #top .cc-card, #top .cc-faq, #top .cc-gloss__def,
#top #socket, #top .main_menu { font-family: var(--cc-font-body) !important; }
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6, .av-special-heading-tag,
#top #header .av-main-nav > li > a, #top .cc-card h3, #top .cc-card h4,
#top .cc-faq summary, #top .cc-gloss__term, #top .cc-stat__num, #top .cc-eyebrow,
#top .cc-num, #top .cc-pill, #top .cc-badge, #top .cc-cta h3 { font-family: var(--cc-font-head) !important; }
/* Dezenter CTA: helle, kompakte Karte statt großem Lila-Block */
.cc-cta { background:#ffffff; border:1px solid rgba(92,45,145,0.12); box-shadow:0 8px 24px rgba(92,45,145,0.07); border-radius:16px; padding:28px 32px; color:#4a4458; }
.cc-cta .cc-icon, .cc-cta .cc-icon--soft { background:linear-gradient(135deg,#5C2D91,#E8457A) !important; color:#fff !important; width:46px; height:46px; margin-bottom:14px; box-shadow:0 6px 16px rgba(92,45,145,0.22); }
.cc-cta h3 { color:#5C2D91 !important; margin:0 0 6px; font-size:19px; }
.cc-cta p { color:#5a5470 !important; margin:0 0 16px !important; font-size:15.5px; }
/* FAQ-Fragen: near-black statt dominantem Lila (das + bleibt Pink-Akzent) */
#top .cc-faq summary { color:#2b2533 !important; }
/* ==========================================================================
v5: Mobile-Härtung (Hero kompakter, Stat-Zahlen kleiner)
========================================================================== */
@media only screen and (max-width: 767px) {
#top .cc-subhero .flex_column { padding-top: 64px !important; padding-bottom: 64px !important; }
#top .cc-subhero .av-special-heading-tag { font-size: 32px !important; line-height: 1.15 !important; }
#top .cc-stat__num { font-size: 38px; }
#top .cc-cta { padding: 26px 22px; }
#top .cc-num { width: 36px; height: 36px; font-size: 16px; }
}
@media only screen and (max-width: 479px) {
#top .cc-subhero .flex_column { padding-top: 52px !important; padding-bottom: 52px !important; }
#top .cc-subhero .av-special-heading-tag { font-size: 27px !important; }
#top .cc-stat__num { font-size: 32px; }
#top .cc-icon { width: 50px; height: 50px; }
#top .cc-icon svg { width: 25px; height: 25px; }
}
/* ==========================================================================
v6: Karten-Hover aus (Karten sollen nicht klickbar wirken)
========================================================================== */
#top .cc-card:hover { transform: none; box-shadow: 0 10px 30px rgba(92,45,145,0.08); }
#top .cc-card--soft:hover { transform: none; box-shadow: none; }
#top .cc-card--purple:hover, #top .cc-card--pink:hover { transform: none; }
#top .cc-row:hover { transform: none; box-shadow: none; }
/* ==========================================================================
v7: Subpage-Hero höher (Bild als Banner statt schmaler Streifen)
+ CTA-Button größer und prägnanter (mit Pfeil)
========================================================================== */
#top .cc-subhero .flex_column { padding-top: 150px !important; padding-bottom: 150px !important; }
@media only screen and (max-width: 767px) { #top .cc-subhero .flex_column { padding-top: 90px !important; padding-bottom: 90px !important; } }
@media only screen and (max-width: 479px) { #top .cc-subhero .flex_column { padding-top: 70px !important; padding-bottom: 70px !important; } }
.cc-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 17px 38px; font-size: 17px; font-weight: 700; letter-spacing: .2px;
border-radius: 44px;
}
.cc-btn::after { content: "\2192"; font-size: 18px; line-height: 1; transition: transform .2s ease; }
.cc-btn:hover::after { transform: translateX(4px); }
/* ==========================================================================
v8: Enfolds automatische Überschriften-Trennlinie entfernen
(der quer laufende "Balken" neben Headings, v.a. im Hero auf dem Overlay).
Gewollte Trenner laufen über .cc-divider.
========================================================================== */
#top .special-heading-border { display: none !important; }
#top .av-special-heading .special-heading-inner-border { display: none !important; }
/* ==========================================================================
v9: "Interesse an Studienteilnahme" als CTA-Button im Header
Link bleibt volle Header-Höhe; die Pille liegt auf dem Text-Span und
wird per Flexbox vertikal zentriert (kein Überstand mehr).
========================================================================== */
#top #header .av-main-nav > li.cc-nav-cta { margin-left: 12px; }
#top #header .av-main-nav > li.cc-nav-cta > a {
display: flex !important;
align-items: center;
background: transparent !important;
box-shadow: none !important;
padding: 0 6px 0 10px !important;
}
#top #header .av-main-nav > li.cc-nav-cta > a .avia-menu-text {
background: #E8457A;
color: #ffffff !important;
font-weight: 700;
border-radius: 40px;
padding: 12px 28px;
line-height: 1.1;
display: inline-block;
box-shadow: 0 6px 16px rgba(232,69,122,0.30);
transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
#top #header .av-main-nav > li.cc-nav-cta > a:hover .avia-menu-text {
background: #5C2D91;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(92,45,145,0.34);
}
#top #header .av-main-nav > li.cc-nav-cta > a:before,
#top #header .av-main-nav > li.cc-nav-cta > a:after { display: none !important; }
/* ==========================================================================
v10: Single-Page "Das Projekt" — Anker-Subnav + Sprung-Offset
========================================================================== */
#top #forschungsverbund, #top #foerderung, #top #presse, #top #news-updates { scroll-margin-top: 100px; }
#top .cc-subnav-sec { border-bottom: 1px solid rgba(92,45,145,0.10); }
#top .cc-subnav { display:flex; flex-wrap:wrap; gap:6px 30px; justify-content:center; align-items:center; padding:18px 0; }
#top .cc-subnav a { font-weight:700; color:#5C2D91; text-decoration:none; font-size:16px; padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .2s ease, color .2s ease; }
#top .cc-subnav a:hover { color:#E8457A; border-bottom-color:#E8457A; }
/* ==========================================================================
v11: Audit-Verfeinerungen (Barrierefreiheit + Konsistenz)
========================================================================== */
/* AA-Kontrast: Pink als TEXT/Link dunkler (#C12E63 ~5,5:1 auf Weiß).
Flächen-Pink #E8457A (Buttons/Badges/Icons/Header-CTA) bleibt unverändert. */
#top .cc-eyebrow { color: #C12E63 !important; }
#top .cc-row a { color: #C12E63 !important; }
/* Sichtbarer Tastatur-Fokus (Enfold-Parent setzt a{outline:0}) */
#top a.cc-btn:focus-visible,
#top .cc-subnav a:focus-visible,
#top .cc-row a:focus-visible,
#top .av_textblock_section a:focus-visible,
#top .cc-faq summary:focus-visible,
#top #header .av-main-nav li.cc-nav-cta a:focus-visible {
outline: 3px solid #5C2D91 !important;
outline-offset: 2px;
border-radius: 6px;
}
/* Header-CTA-Button auch im mobilen Off-Canvas-Menü als Pille (Enfold klont cc-nav-cta) */
#top .av-burger-overlay #av-burger-menu-ul li.cc-nav-cta > a { background: transparent; }
#top .av-burger-overlay #av-burger-menu-ul li.cc-nav-cta > a .avia-menu-text {
display: inline-block; background: #E8457A; color: #ffffff !important;
font-weight: 700; border-radius: 40px; padding: 10px 24px;
}
/* ==========================================================================
v12: Audit-Runde 2 (A Button-Vereinheitlichung, C Heading-Hierarchie,
D Sticky-Subnav, F Skip-Link)
========================================================================== */
/* A: cc-btn ist der EINZIGE Button-Stil. Marken-Pink flach (kein Verlauf), Pfeil bleibt. */
#top .cc-btn { background: #E8457A; }
/* C: h2 in Karten/CTA optisch identisch zum bisherigen h3 (für korrekte Überschriften-Hierarchie) */
#top .cc-card h2 { font-size: 20px; line-height: 22px; font-weight: 600; margin: 0 0 10px; }
#top .cc-card--purple h2, #top .cc-card--pink h2 { color: #ffffff; }
#top .cc-cta h2 { font-size: 19px; line-height: 1.1; font-weight: 600; color: #5C2D91; margin: 0 0 6px; }
/* D: Anker-Subnav auf "Das Projekt" sticky (schlanker), sitzt unter dem ~90px-Header */
#top .cc-subnav { padding: 13px 0; }
#top .cc-subnav-sec { background: #ffffff; }
/* F: Skip-Link "Zum Inhalt springen" (sichtbar nur bei Tastatur-Fokus) + Sprungziel-Offset */
#top .cc-skip {
position: absolute; left: 8px; top: -60px; z-index: 100000;
background: #5C2D91; color: #ffffff !important; padding: 10px 18px;
border-radius: 8px; font-weight: 700; text-decoration: none;
transition: top .15s ease;
}
#top .cc-skip:focus { top: 8px; outline: 3px solid #E8457A; outline-offset: 2px; }
#top #maincontent { scroll-margin-top: 100px; outline: none; }
/* ==========================================================================
v13: Anker-Subnav "Das Projekt" fixiert beim Scrollen (JS in functions.php),
schlanker + Schatten im fixierten Zustand
========================================================================== */
#top .cc-subnav { padding: 12px 0; }
#top .cc-subnav-sec, #top .cc-subnav-sec .container, #top .cc-subnav-sec .entry-content-wrapper { min-height: 0 !important; }
#top .cc-subnav-sec.cc-subnav--fixed {
position: fixed; left: 0; right: 0; width: 100%; z-index: 60;
box-shadow: 0 6px 18px rgba(92,45,145,0.08);
}
/* ==========================================================================
v14: Polish-Runde — Tiefe & Materialität + ruhiger Typo-Feinschliff
Rein additives Child-CSS, keine Avia-/Content-Eingriffe. Markentreu
(#5C2D91, #E8457A, #3a1060/rgb 58,16,96, #FAF5FF), reduced-motion aktiv.
Keine Bewegungs-Effekthascherei: Karten heben sich NICHT (nicht klickbar).
========================================================================== */
/* 1) Hero-Overlay: diagonaler Marken-Verlauf statt Flachfarbe.
Enfold setzt die Overlay-Farbe als gehashte Regel OHNE #top-Präfix; #top
gewinnt durch Spezifität (kein !important nötig). Das Overlay-Element trägt
zudem opacity (würde einen Verlauf flach abdunkeln) -> Transparenz in die
rgba-Stops legen UND opacity:1 setzen. Nur #3a1060 + #5C2D91 als Farben. */
#top #hero .av-section-color-overlay,
#top .cc-subhero .av-section-color-overlay {
opacity: 1;
background:
linear-gradient(135deg, rgba(58,16,96,0.64) 0%, rgba(92,45,145,0.46) 55%, rgba(58,16,96,0.38) 100%),
linear-gradient(to top, rgba(58,16,96,0.40), transparent 42%);
}
/* 2) cc-card: zweilagige Tiefe + minimal stärkerer Rand, Radius 20->22px.
WICHTIG: v6 setzte im :hover den ALTEN flachen Ruhe-Schatten -> Hover-Wert
hier auf den neuen Ruhe-Schatten angleichen (sonst Schatten-Flacker beim
Hover). Kein transform/Lift (Karten bleiben bewusst nicht-klickbar). */
#top .cc-card {
border: 1px solid rgba(92,45,145,0.10);
border-radius: 22px;
box-shadow: 0 1px 2px rgba(92,45,145,0.06), 0 12px 28px -8px rgba(92,45,145,0.16);
position: relative;
}
#top .cc-card:hover {
transform: none;
box-shadow: 0 1px 2px rgba(92,45,145,0.06), 0 12px 28px -8px rgba(92,45,145,0.16);
}
#top .cc-card--soft, #top .cc-card--soft:hover {
box-shadow: none; border-color: rgba(92,45,145,0.10);
}
#top .cc-card--purple, #top .cc-card--pink,
#top .cc-card--purple:hover, #top .cc-card--pink:hover {
border: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 30px -8px rgba(58,16,96,0.35);
}
/* 3) cc-card--accent-top: flaches Pink -> feine Marken-Verlaufslinie (Krone).
Linien-Radius = Karten-Radius (22px), damit die Ecke nicht heraussteht. */
#top .cc-card--accent-top { border-top: none; }
#top .cc-card--accent-top::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
border-radius: 22px 22px 0 0;
background: linear-gradient(90deg, #5C2D91, #E8457A);
}
/* 4) Eyebrow feiner: Caps-Tracking + kurzer Pink-Akzentstrich statt Pille.
Vereinheitlicht die uneinheitlichen Inline-Overrides (Pink-Pille / weiß auf
Lila). Farbe bleibt #C12E63 (v11, AA). Inline-bg am Zahlen-Eyebrow braucht
!important zum Überschreiben (in .cc-card--purple berücksichtigt). */
#top .cc-eyebrow {
background: transparent; padding: 0; border-radius: 0;
letter-spacing: 2px; font-size: 12.5px;
display: inline-flex; align-items: center; gap: 10px;
}
#top .cc-eyebrow::before {
content: ""; flex: 0 0 auto; width: 24px; height: 2px;
background: #E8457A; border-radius: 2px;
}
#top .cc-card--purple .cc-eyebrow, #top .cc-on-dark .cc-eyebrow {
color: #ffffff !important; background: transparent !important;
}
#top .cc-card--purple .cc-eyebrow::before, #top .cc-on-dark .cc-eyebrow::before {
background: rgba(255,255,255,0.6);
}
/* 5) Typo-Feinschliff: Section-H2 ruhiger/redaktioneller. Hero ist und
bleibt damit automatisch ausgenommen (eigene v5/v7-Größen). Bewusst KEINE
font-size-Steuerung (würde mit Enfold + v5 kollidieren). */
#top main h2 { letter-spacing: -0.012em; line-height: 1.14; text-wrap: balance; }
/* 6) cc-btn: taktiler :active-Press (der Pfeil-Glide aus v7 bleibt). */
#top .cc-btn { transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease; }
#top .cc-btn:active { transform: translateY(1px); box-shadow: 0 6px 16px rgba(92,45,145,0.30); }
/* 7) Scroll-Spy: aktiver Abschnitt in der Sticky-Subnav (/das-projekt/).
Klasse .cc-subnav--active wird per positionsbasiertem Scroll-Listener
(functions.php) gesetzt, bewusst KEIN IntersectionObserver (die Anker-IDs
sitzen nur auf schmalen Opener-Bändern, ein IO-Band würde sie kaum treffen);
ohne JS bleibt die Subnav voll funktionsfähig, nur ohne Marker. */
#top .cc-subnav a.cc-subnav--active { color: #C12E63; border-bottom-color: #E8457A; }
/* 8) Hero-Scroll-Hinweis: Enfolds nativen Pfeil dezent pulsieren lassen.
Nur Opacity (KEIN transform -> Enfolds Zentrierung bleibt unberührt),
nur Desktop. */
@keyframes ccCuePulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (min-width: 768px) {
#top #hero .scroll-down-link { animation: ccCuePulse 2.4s ease-in-out infinite; }
}
/* reduced-motion: alle in v14 ergänzten Bewegungen aus */
@media (prefers-reduced-motion: reduce) {
#top .cc-btn:active { transform: none; }
#top #hero .scroll-down-link { animation: none; opacity: 1; }
}
/* ==========================================================================
v15: Hero-Robustheit (dunkler Grund + sofort weiße H1 + z-Stapelung).
HINWEIS ZUR HISTORIE: Die berüchtigte ~1-2s-Verzögerung der Hero-H1 in Chrome
ist GELÖST und lag NICHT am Hero/Parallax/Chrome-Paint, sondern an der ID-
Kollision `#cc-main` mit Cookie-Blocklisten (Browser-Erweiterung blendete
als vermeintliches Cookie-Banner aus). Details + Verbot
von cc-*-IDs: Kommentar in functions.php (Skip-Link). Die Heroes laufen wieder
mit attach='parallax'.
Diese drei Regeln bleiben bewusst als Robustheits-Schicht bestehen:
- Section-Grundfarbe #3a1060 AUSSERHALB des Parallax-Layers: weiße H1 steht
nie auf Weiß, auch bevor avia.js den Parallax-HG einblendet.
- KEIN `opacity:1 !important` auf `.av-parallax` setzen (zwang Chrome, den
großen will-change-Layer sofort zu kompositen -> Frame-Verzögerung).
- weiße H1 sofort per CSS (Enfold liefert custom_font sonst erst spät per JS);
Inhalt über dem Farb-Overlay (Bild z0 < Overlay z1 < Inhalt z5). */
#top #hero, #top .cc-subhero { background-color: #3a1060; }
#top #hero .container, #top .cc-subhero .container { position: relative; z-index: 5; }
#top #hero .av-special-heading-tag, #top .cc-subhero .av-special-heading-tag { color: #ffffff !important; }
/* ==========================================================================
v16: Hauptmenü-Beschriftung etwas größer (Wunsch Projektleitung).
Enfold setzt für das Menü keine eigene Größe (erbt ~14px); hier dezenter
Bump auf 16px. Wert bei Bedarf auf 15px reduzieren. Betrifft alle
Top-Level-Menüpunkte inkl. CTA-Button.
========================================================================== */
#top #header .av-main-nav > li > a,
#top #header .av-main-nav > li > a .avia-menu-text { font-size: 16px !important; }
/* Dropdown-/Untermenue-Punkte mit anheben (15px, eine Stufe unter der Top-Ebene) */
#top #header .av-main-nav ul li a,
#top #header .av-main-nav ul li a .avia-menu-text { font-size: 15px !important; }
/* ==========================================================================
v17: cc-flipbook — selbst gehosteter Seiten-Flip-Viewer fuer PDF-Flyer.
Seiten sind normale JPGs (aus der PDF exportiert), cc-flipbook.js fuegt
die Blaetter-Interaktion hinzu. Ohne JS: nur die erste Seite als
statisches Bild, keine Fremd-Bibliothek/kein CDN. Der Flyer ist ein
Falz-Flyer mit unterschiedlich breiten Panels je Seite (einheitliche
Hoehe) -> feste Buehnen-Hoehe + zentrierte Breite statt fixer
aspect-ratio faengt das automatisch ab.
========================================================================== */
.cc-flipbook { margin: 28px 0; --cc-fb-h: clamp(494px, 80vh, 884px); }
.cc-flipbook__stage {
position: relative;
height: var(--cc-fb-h);
display: flex; align-items: center; justify-content: center;
background: linear-gradient(180deg,#FAF5FF,#f1e9fb);
border-radius: 24px; padding: 16px 22px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(92,45,145,.06), 0 20px 44px -14px rgba(92,45,145,.22);
}
.cc-flipbook__book { position: relative; height: 100%; width: 100%; max-width: 760px; perspective: 1600px; }
/* Ohne JS: nur die erste Seite als normales Bild, keine Steuerung sichtbar */
.cc-flipbook__page { display: none; -webkit-user-drag: none; user-select: none; }
.cc-flipbook__page:first-child {
display: block; margin: 0 auto; max-height: 100%; max-width: 100%;
border-radius: 6px; box-shadow: 0 20px 45px rgba(44,34,64,.25);
}
.cc-flipbook__nav, .cc-flipbook__bar { display: none; }
/* Ab hier: JS-Zustand (Klasse .cc-flipbook--js wird von cc-flipbook.js gesetzt).
inset:0 + margin:auto + max-width/max-height:100% + object-fit:contain zentriert
jede Seite unabhaengig von ihrer Breite (Falz-Flyer: Panels sind unterschiedlich
breit) und laesst sie nie ueber die Buehne hinausragen. */
.cc-flipbook--js .cc-flipbook__page {
display: block; position: absolute; inset: 0; margin: auto;
max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
transform: rotateY(0deg) scale(1);
opacity: 0; visibility: hidden; pointer-events: none; z-index: 1;
border-radius: 6px; background: #fff; box-shadow: 0 20px 45px rgba(44,34,64,.25);
transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.cc-flipbook--js .cc-flipbook__page--active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 3; }
.cc-flipbook--js .cc-flipbook__page--enter-next,
.cc-flipbook--js .cc-flipbook__page--leave-next { transform: rotateY(-95deg) scale(.94); opacity: 0; z-index: 2; }
.cc-flipbook--js .cc-flipbook__page--enter-prev,
.cc-flipbook--js .cc-flipbook__page--leave-prev { transform: rotateY(95deg) scale(.94); opacity: 0; z-index: 2; }
.cc-flipbook--js .cc-flipbook__nav { display: flex; }
.cc-flipbook--js .cc-flipbook__bar { display: flex; }
/* Blaetter-Pfeile. .cc-flipbook__navwrap ist nur ein wpautop-Schutz-Wrapper
(siehe Kommentar bei .cc-flipbook__page:first-child weiter unten) -> selbst
randlos/deckungsgleich mit der Buehne, damit die Pfeile weiterhin exakt wie
vorher relativ zur Buehne positioniert sind. */
.cc-flipbook__navwrap { position: absolute; inset: 0; pointer-events: none; }
.cc-flipbook__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
align-items: center; justify-content: center; pointer-events: auto;
background: #fff; color: #5C2D91; font-size: 24px; line-height: 1;
box-shadow: 0 8px 20px rgba(92,45,145,.18); z-index: 5;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.cc-flipbook__nav:hover { background: #5C2D91; color: #fff; box-shadow: 0 12px 26px rgba(92,45,145,.3); }
.cc-flipbook__nav:disabled { opacity: .35; cursor: default; pointer-events: none; }
.cc-flipbook__nav--prev { left: 14px; }
.cc-flipbook__nav--next { right: 14px; }
.cc-flipbook__nav--prev::before { content: "\2039"; }
.cc-flipbook__nav--next::before { content: "\203A"; }
/* Bedienleiste: Vollbild, Punkte-Navigation, Seitenzähler, PDF-Download.
Bewusst EINE Zeile (nowrap): mit flex-wrap brach die Leiste unschön in
mehrere linksbuendige Zeilen um (jedes Item einzeln "zentriert" wirkte
dadurch schief). Auf schmalen Screens schrumpfen Abstand/Schrift stattdessen
(siehe Media Query), der Zaehler faellt bei sehr schmalen Screens ganz weg. */
.cc-flipbook__bar { align-items: center; justify-content: center; gap: 20px; margin-top: 18px; flex-wrap: nowrap; }
.cc-flipbook__dots { display: flex; gap: 8px; }
.cc-flipbook__dot { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; background: rgba(92,45,145,.22); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.cc-flipbook__dot--active { background: linear-gradient(135deg,#5C2D91,#E8457A); transform: scale(1.3); }
.cc-flipbook__counter { font-size: 14px; color: #6f6885; font-weight: 600; min-width: 48px; text-align: center; }
.cc-flipbook__fs, .cc-flipbook__download {
border: none; background: transparent; color: #5C2D91; font-size: 13px; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 0;
}
.cc-flipbook__fs:hover, .cc-flipbook__download:hover { color: #E8457A; }
.cc-flipbook__download::before { content: "\2193"; font-weight: 800; }
/* Vollbild-Modus (Fullscreen API) */
.cc-flipbook--fullscreen { background: #2c2240; display: flex; align-items: center; justify-content: center; padding: 5vh 4vw; }
.cc-flipbook--fullscreen .cc-flipbook__stage { height: 88vh; background: transparent; box-shadow: none; }
@media only screen and (max-width: 600px) {
.cc-flipbook { --cc-fb-h: clamp(416px, 73vh, 676px); }
.cc-flipbook__stage { padding: 12px 10px; border-radius: 18px; }
.cc-flipbook__nav { width: 38px; height: 38px; font-size: 19px; }
.cc-flipbook__nav--prev { left: 6px; }
.cc-flipbook__nav--next { right: 6px; }
.cc-flipbook__bar { gap: 10px; }
.cc-flipbook__fs, .cc-flipbook__download, .cc-flipbook__counter { font-size: 12px; }
.cc-flipbook__counter { min-width: auto; }
}
@media only screen and (max-width: 380px) {
.cc-flipbook__bar { gap: 8px; }
.cc-flipbook__counter { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cc-flipbook--js .cc-flipbook__page { transition: opacity .3s ease; }
.cc-flipbook--js .cc-flipbook__page--enter-next,
.cc-flipbook--js .cc-flipbook__page--enter-prev,
.cc-flipbook--js .cc-flipbook__page--leave-next,
.cc-flipbook--js .cc-flipbook__page--leave-prev { transform: none !important; }
}
/* v18: "Foerderung" (Das Projekt, #foerderung) — Logo-Panel und Link-Karte gleich hoch. */
@media only screen and (min-width: 768px) {
#top .cc-fund .entry-content-wrapper { display: flex; align-items: stretch; flex-wrap: nowrap; }
#top .cc-fund .flex_column { float: none; }
#top .cc-fund [class*="av-foerde-c2l"] .av_textblock_section,
#top .cc-fund [class*="av-foerde-c2l"] .avia_textblock,
#top .cc-fund .cc-logoframe { height: 100%; }
}