/* Theme Name: EDSeele Theme URI: https://erwachen-der-seele.de Author: Erwachen der Seele | Claude Description: Minimales Theme - blitzschnell, sauber, Seele pur! Version: 3.0.0 License: GPL v2 or later Text Domain: edseele CSS-Sektionen-System - Generiert am: 2026-04-17 19:25 NICHT MANUELL BEARBEITEN! Aenderungen in css-sektionen/*.css */ /* SEKT01-VARIABLEN */ :root { /* ===== FARBEN ===== */ --cp1: #D50000; --cp2: #6D0000; --cs1: #FFC552; --cs2: #E5A84B; --ct1: #6D0000; --ct2: #e6a7a7; --ct3: #a30000; --ca1: #278B10; --ca2: #1C500C; --ac1: #8B1A1A; --ac2: #6B1515; --cl1: #f54d4d; --cl2: #278B10; --ci1: #f78b87; --sb1: #EA3732; --sb2: #C62828; --cc1: #014d49; /* Universelle Farben C1-C6: Zitate + Dialog-Sprecher */ --c1: #b30000; /* C1 Dunkelrot (Michael/neu) */ --c2: #2a2395; /* C2 Blau (Religionen) */ --c3: #368334; /* C3 Gruen (Natur) */ --c4: #711c82; /* C4 Lila (Spirituell) */ --c5: #5e5e5e; /* C5 Grau (Altes Weltbild) */ --c6: #9c4807; /* C6 Kupfer (Erfahrungsbericht) */ --c7: #ef681f; /* C7 Lachs/Orange */ --c8: #b408a6; /* C8 Rosa */ --cw1: #FFFFFF; --cd1: #260200; --cb1: #000000; /* ===== ICON-FARBEN (kontextabhängig überschreibbar) ===== */ --ic1: var(--cs1); --ic2: var(--cw1); --ic3: var(--cp1); /* ===== HINTERGRUND ===== */ --bg1: linear-gradient(to bottom, #D50000 0%, #6D0000 50%, #3f0000 100%); --bg2: #fff9db; --bg3: rgba(213, 0, 0, 0.08); --bg4: #fee5b3; --bg5: #fff3db; --bg6: #d5f0ee; --bg7: rgba(0,0,0,0.08); --bg8: rgba(255,255,255,0.12); /* ===== FLUID TYPOGRAPHY ===== */ --fs-h1: clamp(2.027rem, 1.3974rem + 2.0146vw, 3.815rem); --fs-h2: clamp(1.802rem, 1.3619rem + 1.4085vw, 3.052rem); --fs-h3: clamp(1.602rem, 1.3066rem + 0.9454vw, 2.441rem); --fs-h4: clamp(1.424rem, 1.2508rem + 0.5538vw, 1.953rem); --fs-h5: clamp(1.266rem, 1.1803rem + 0.2742vw, 1.563rem); --fs-h6: clamp(1.125rem, 1.081rem + 0.1408vw, 1.25rem); --fs-bd: clamp(1.05rem, 0.95rem + 0.4vw, 1.18rem); --fs-sm: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem); --fs-sm2: clamp(0.9rem, 0.86rem + 0.2vw, 0.98rem); --fs-tn: 13px; /* ===== SPACING (Fluid) ===== */ --space-xs: clamp(0.25rem, 0.5vw, 0.5rem); --space-sm: clamp(0.5rem, 1vw, 1rem); --space-md: clamp(1rem, 2vw, 1.5rem); --space-lg: clamp(1.5rem, 3vw, 2.5rem); --space-xl: clamp(2rem, 4vw, 4rem); /* ===== CONTAINER ===== */ --container-max: 1200px; --container-padding: clamp(4px, 2vw, 32px); /* ===== BOX STYLING ===== */ --box-padding: clamp(12px, 2.2vw, 30px); --box-padding-top: 30px; --box-border-width: clamp(6px, 0.6vw, 8px); --box-border-side: clamp(3px, 0.3vw, 4px); --box-radius: clamp(20px, 2.5vw, 30px); --box-radius-small: 12px; /* ===== ICONS ===== */ --icon-size: 44px; --icon-size-small: 38px; --icon-svg: 22px; --icon-svg-small: 18px; /* ===== LOGO ===== */ --logo-height: clamp(35px, 3.2vw + 22px, 70px); --header-bar-height: clamp(42px, 3.2vw + 29px, 77px); /* ===== PFEIL-SVG (Custom Icon) ===== */ --pfeil-svg: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20100%20100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m%2067.731923%2C69.054252%20c%20-1.45284%2C-0.256188%20-2.727824%2C-0.996427%20-3.545079%2C-2.058228%20-1.704937%2C-2.211067%20-0.99926%2C-5.189004%201.576679%2C-6.653548%20l%2011.137202%2C-5.662232%20c%20-4.744568%2C-0.184352%20-8.675425%2C-0.683723%20-12.478848%2C-0.084%20-9.791406%2C1.543894%20-20.45955%2C2.581375%20-32.885028%2C0.084%20-10.50487%2C-2.111348%20-15.689917%2C-0.950238%20-24.9330813%2C0.084%20-3.0667525%2C0.343682%20-5.87746373%2C-1.510768%20-6.27733796%2C-4.14166%20-0.40063291%2C-2.630808%201.76111606%2C-5.041971%204.82796896%2C-5.385001%208.7146243%2C-0.975109%2016.6017663%2C-2.395508%2028.9384343%2C0.084%2010.416059%2C2.093498%2019.043796%2C1.293326%2028.311681%2C-0.168008%203.955318%2C-0.623664%209.327972%2C-0.479369%2013.428767%2C-0.445247%20L%2065.763523%2C39.659364%20c%20-2.582006%2C-1.464917%20-3.2883%2C-4.449224%20-1.576679%2C-6.661944%201.707228%2C-2.209763%205.17863%2C-2.815128%207.756088%2C-1.352555%200%2C0%208.385235%2C3.693136%2012.611048%2C6.079108%204.225813%2C2.385973%2012.654998%2C8.269706%2012.654998%2C8.269706%203.349022%2C1.899099%203.349022%2C6.115396%200%2C8.014495%200%2C0%20-6.664576%2C5.075056%20-10.870884%2C7.505924%20-4.206308%2C2.430867%20-14.395162%2C6.842877%20-14.395162%2C6.842877%20-1.240156%2C0.702661%20-2.755093%2C0.953511%20-4.211009%2C0.697277%20z%22%2F%3E%3C%2Fsvg%3E"); /* ===== EFFEKTE ===== */ --transition: 0.3s ease; --shadow: 0 10px 30px rgba(0,0,0,0.2); --shadow-strong: 0.8rem 0.8rem 1.4rem 0 rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 12px rgba(255,197,82,0.4); --column-rule: 1px solid rgba(109, 0, 0, 0.12); } /* SEKT02-RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* SEKT03-BASE */ html { font-size: 100%; scroll-behavior: smooth; } body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: var(--fs-bd); font-weight: 400; line-height: 1.6; color: var(--ct1); background: var(--cw1); min-height: 100vh; hyphens: auto; -webkit-hyphens: auto; } .gradient-wrapper { background: linear-gradient(to bottom, #D50000 0%, #6D0000 50%, #3f0000 100%); background-repeat: no-repeat; background-size: 100% 100%; } .site-content { padding-top: 0; padding-bottom: 0; margin-bottom: 0; } /* ===== GLOBALE SCROLLBAR (Webkit) ===== */ ::-webkit-scrollbar { width: 15px; /* 7px Thumb + 8px rechter Abstand */ } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sb1); border-radius: 4px; border-right: 8px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--sb2); border-right: 8px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-button { display: none; } /* Firefox Scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--sb1) transparent; } /* SEKT04-TYPO */ /* Roboto + Roboto Condensed: lokal in fonts/fonts.css */ h1 { font-size: var(--fs-h1); font-weight: 600; color: var(--cw1); line-height: 1.2; margin: 0 0 var(--space-sm) 0; } h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; font-weight: 600; color: var(--cp1); line-height: 1.3; margin: 1em 0 0.15em 0; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } h5 { font-size: var(--fs-h5); } h6 { font-size: var(--fs-h6); } /* H-TOP: Erste Ueberschrift im Container - minimaler Abstand oben */ .h-top { margin-top: 0.3em !important; } p { margin: 0 0 0.6rem 0; line-height: 1.4; } a { color: var(--cp1); text-decoration: underline; transition: color var(--transition); } a:hover { color: var(--cl2); } /* === INFOZEILE: Ganze Zeile (Matrix + Trennpunkte + Links) === */ /* Alles in --c-info (helles Rosa-Rot, wie Scrollbar) */ .info { color: var(--ct2); } /* Legacy-Alias */ .eds-matrix-liste { color: var(--ci1); } /* ═══════════════════════════════════════════════════════════════ LINK-KLASSEN: 4 Typen - mi, zb, ae, tl Tausendfach verwendet, deshalb maximal schlank! ═══════════════════════════════════════════════════════════════ */ /* --- MI: Mehr-Info Toggle (Aufklappen/Zuklappen) --- HTML: - LEER! JS fuellt alles automatisch JS setzt: "Mehr Info ▼" bzw. "Wieder einklappen ▲" Pfeil .tp = 0.7em, per JS als eingefuegt */ a.mi { color: var(--cl1); font-weight: 600; text-decoration: none; cursor: pointer; transition: color 0.3s ease; } a.mi:hover, a.mi.open { color: var(--cl2); } /* Aktiv + Hover → zurück auf Link-Rot */ a.mi.open:hover { color: var(--cl1); } a.mi .tp { font-size: 0.7em; vertical-align: middle; margin-left: 2px; } /* MI leer? Standardtext automatisch (mit Dreieck) */ a.mi:empty::before { content: 'Mehr Info \0020\25BE'; } /* --- ZB: Zum Beitrag (Pfeil dekorativ aus CSS) --- Doku: css-sektionen/LINK-KLASSEN-REFERENZ.md HTML: Zum Beitrag Text im HTML = barrierefrei. Pfeil rein dekorativ via ::after */ a.zb { color: var(--cl1); font-weight: 600; text-decoration: none; transition: color 0.3s ease; } /* ZB leer? Standardtext automatisch */ a.zb:empty::before { content: 'Zum Beitrag'; } a.zb:hover { color: var(--cl2); } a.zb::after { content: ''; display: inline-block; width: 1.3em; height: 1.3em; margin-left: 6px; mask-image: var(--pfeil-svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--pfeil-svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: currentColor; vertical-align: -0.2em; transition: transform 0.3s ease; } a.zb:hover::after { transform: translateX(4px); } /* --- AE: Ausfuehrliche Erklaerung (Pfeil dekorativ aus CSS) --- HTML: Ausfuehrliche Erklaerung Text im HTML = barrierefrei. Pfeil rein dekorativ via ::after */ a.ae { color: var(--cl1); font-weight: 600; text-decoration: none; transition: color 0.3s ease; } a.ae::after { content: ''; display: inline-block; width: 1.3em; height: 1.3em; margin-left: 6px; mask-image: var(--pfeil-svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--pfeil-svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: currentColor; vertical-align: -0.2em; transition: transform 0.3s ease; } a.ae:hover::after { transform: translateX(4px); } /* --- TL: Textlink im Fliesstext --- HTML: Mein Linktext title wird per JS zu data-tooltip (gestylter Tooltip aus SEKT73) Goldene Regel: Jeder Link erklaert, wohin er fuehrt! */ a.tl { letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; transition: color 0.3s ease; cursor: pointer; } /* Tooltip bei .tl: Zeiger statt Fragezeichen */ a.tl[data-tooltip] { cursor: pointer; } strong { font-weight: 600; } .subline { color: var(--cw1); font-size: var(--fs-bd); margin-bottom: 0.375rem; } .ein_satz { color: var(--cw1) !important; font-size: var(--fs-h5); font-weight: 300; margin-bottom: 0.375rem; opacity: 0.9; } .page-header .ein_satz { padding-left: clamp(16px, 2.4vw, 28px); } /* Power-Link: Extra-starke Themen-Links */ .eds-power-link { font-weight: 900; color: var(--cp1) !important; text-decoration: none; font-size: 1.05em; letter-spacing: 0.02em; text-shadow: 0.3px 0 0 currentColor; } .eds-power-link:hover { color: var(--cl2) !important; text-shadow: 0.5px 0 0 currentColor; } /* ═══════════════════════════════════════════════════════════════ TEXT HIGHLIGHTED (th1, th2, ...) Hervorgehobene Absaetze: groesser, schwerer, farbig, eingerueckt Verwendung:

~ Frage oder Statement

═══════════════════════════════════════════════════════════════ */ .th1 { color: var(--ct3); font-size: 1.13em; font-weight: 500; line-height: 1.4; margin-top: 0.8em; margin-bottom: 0.8em; padding-left: clamp(22px, 2.5vw, 35px); padding-right: clamp(22px, 2.5vw, 35px); } /* ═══════════════════════════════════════════════════════════════ TRENNLINIEN (tl1, tl2, ...) Feine horizontale Trennlinien, zentriert, Goldener Schnitt (61.8%) Verwendung:
zwischen Bloecken tl1 = ci1 (Gold), tl2 = ci2, tl3 = ct3 (Rot), tl4 = ct2 ═══════════════════════════════════════════════════════════════ */ .tl1, .tl2, .tl3, .tl4 { border: none; height: 1px; width: 61.8%; margin: 3em auto; opacity: 0.6; } .tl1 { background-color: var(--cs1); } .tl2 { background-color: var(--ci2); } .tl3 { background-color: var(--ct3); } .tl4 { background-color: var(--ct2); } /* ═══════════════════════════════════════════════════════════════ WELLEN-TRENNER (tw--FARBE[--STÄRKE]) SVG-basierte Sinuswelle mit sin²-Envelope (7 Berge) Amplitude steigt zur Mitte an, gerade Enden (1/4 Takt) Klassen-Schema: tw--FARBE = Light (1px) tw--FARBE--m = Medium (2px) tw--FARBE--b = Bold (3px) tw--FARBE--h = Heavy (4px) Hoehe steuerbar via CSS Custom Property: style="--tw-amp: 20" (Default: 12) Verwendung:
SVG wird per JS (eds-functions Plugin) automatisch injiziert. Farben referenzieren SEKT01-Variablen. ═══════════════════════════════════════════════════════════════ */ [class*="tw--"] { display: block; width: 61.8%; margin: 3em auto; border: none; background: none; overflow: visible; } /* --- Farben --- */ [class*="tw--cs1"] svg path { stroke: var(--cs1); } [class*="tw--cs2"] svg path { stroke: var(--cs2); } [class*="tw--cp1"] svg path { stroke: var(--cp1); } [class*="tw--cp2"] svg path { stroke: var(--cp2); } [class*="tw--ct3"] svg path { stroke: var(--ct3); } [class*="tw--cc1"] svg path { stroke: var(--cc1); } [class*="tw--ci1"] svg path { stroke: var(--ci1); } [class*="tw--ac1"] svg path { stroke: var(--ac1); } [class*="tw--c1"] svg path { stroke: var(--c1); } [class*="tw--c2"] svg path { stroke: var(--c2); } [class*="tw--c3"] svg path { stroke: var(--c3); } [class*="tw--c4"] svg path { stroke: var(--c4); } [class*="tw--c5"] svg path { stroke: var(--c5); } [class*="tw--c6"] svg path { stroke: var(--c6); } [class*="tw--c7"] svg path { stroke: var(--c7); } [class*="tw--c8"] svg path { stroke: var(--c8); } [class*="tw--bg1"] svg path { stroke: var(--bg1); } [class*="tw--bg2"] svg path { stroke: var(--bg2); } [class*="tw--bg3"] svg path { stroke: var(--bg3); } [class*="tw--bg4"] svg path { stroke: var(--bg4); } [class*="tw--ct1"] svg path { stroke: var(--ct1); } [class*="tw--ct2"] svg path { stroke: var(--ct2); } [class*="tw--cf1"] svg path { stroke: var(--cf1); } [class*="tw--cf2"] svg path { stroke: var(--cf2); } /* --- Strichstaerke: Default = 1px (Light) --- */ [class*="tw--"] svg path { stroke-width: 1; opacity: 0.7; } [class$="--m"] svg path { stroke-width: 2; } [class$="--b"] svg path { stroke-width: 3; } [class$="--h"] svg path { stroke-width: 4; } /* ============================================================ BUTTON-KLASSEN: bua, bub, buc, bud, bue, buf 6 Varianten, alle mit 5px radius + 2px Gold-Outline Namensschema: bu (Button) + a-f (Variante) ============================================================ */ a.bua, a.bub, a.buc, a.bud, a.bue, a.buf { display: inline-block; padding: 10px 22px; border: 2px solid var(--cs1); border-radius: 5px; font-weight: 600; text-decoration: none; font-size: 1rem; transition: all 0.3s ease; } a.bua { background: transparent; color: var(--cp1); } a.bua:hover { background: var(--cs1); color: var(--cp2); } a.bub { background: var(--cp1); color: var(--cw1); } a.bub:hover { background: var(--cp2); border-color: var(--cw1); } a.buc { background: var(--cs1); color: var(--cp2); border-color: var(--cs2); } a.buc:hover { background: var(--cp1); color: var(--cw1); border-color: var(--cp1); } a.bud { background: var(--bg4); color: var(--cp2); } a.bud:hover { background: var(--cs1); color: var(--cp2); border-color: var(--cs2); } a.bue { background: var(--cp2); color: var(--cs1); box-shadow: 0 0 0 rgba(255,197,82,0); } a.bue:hover { box-shadow: 0 0 12px rgba(255,197,82,0.4); background: var(--cp1); color: var(--cw1); } a.buf { background: var(--cw1); color: var(--cp1); } a.buf:hover { background: var(--bg4); border-color: var(--cs2); } /* ============================================================ WP-STANDARD-AUSRICHTUNGSKLASSEN: alignleft, alignright, aligncenter, alignnone Für Bilder und andere Elemente, die im Text umflossen werden sollen. WordPress liefert diese Klassen automatisch - wir brauchen die CSS-Regeln. ============================================================ */ .alignleft { float: left; margin: 0 1.5em 1em 0; } .alignright { float: right; margin: 0 0 1em 1.5em; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignnone { float: none; } /* Auf Mobile: Float auflösen - Bilder zentrieren statt umfließen */ @media (max-width: 600px) { .alignleft, .alignright { float: none; display: block; margin-left: auto; margin-right: auto; } } /* SEKT05-LAYOUT */ /* ============================================ LAYOUT & UTILITIES Container, Spacing, Helfer-Klassen ============================================ */ /* --- CONTAINER --- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } /* --- PAGE HEADER --- */ .page-header { padding: var(--space-lg) 0 var(--space-sm) 0; padding-top: calc(var(--space-lg) - 8px); } .page-header h1 { padding-left: clamp(12px, 1.3vw, 16px); margin-bottom: calc(var(--space-sm) - 4px); color: var(--cw1) !important; font-size: var(--fs-h1); } .page-header .subline { padding-left: clamp(16px, 2.4vw, 28px); margin-bottom: 0.375rem; } /* --- UTILITY KLASSEN --- */ /* Margin entfernen */ .no-margin, .m0 { margin: 0 !important; } .mb0 { margin-bottom: 0 !important; } .mt0 { margin-top: 0 !important; } /* Padding entfernen */ .p0 { padding: 0 !important; } .pb0 { padding-bottom: 0 !important; } .pt0 { padding-top: 0 !important; } /* Gap entfernen (Flex/Grid) */ .gap0 { gap: 0 !important; } /* Breiten */ .w100 { width: 100% !important; } .img-100 img { width: 100%; height: auto; } /* Listen ohne Einrueckung */ .pl-0 ul { margin-left: 20px; padding-left: 0; margin-bottom: 0; } /* Weisse Links (fuer dunkle Hintergruende) */ .url-white a { color: var(--cw1); } .url-white a:hover { opacity: 0.8; } /* Text-Ausrichtung */ .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } /* Flexbox Helfer */ .flex { display: flex !important; } .flex-center { display: flex !important; justify-content: center !important; align-items: center !important; } .flex-between { display: flex !important; justify-content: space-between !important; align-items: center !important; } /* Verstecken */ .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* SEKT06-HEADER */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 5px 20px 5px 20px; background: transparent; transition: background 0.3s ease; } /* Header bekommt schmalen Hintergrund beim Scrollen - Logo guckt unten raus */ .site-header.scrolled { background: linear-gradient(to bottom, rgba(213, 0, 0, 0.80) 0%, rgba(213, 0, 0, 0.80) calc(var(--header-bar-height) + 2px), var(--cs1) calc(var(--header-bar-height) + 2px), var(--cs1) calc(var(--header-bar-height) + 3px), transparent calc(var(--header-bar-height) + 3px)); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)); } /* Platz fuer Admin-Bar */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } .site-logo { flex-shrink: 0; } .site-logo img { height: var(--logo-height); width: auto; } .hero-wrapper { position: relative; width: 100%; line-height: 0; } .hero-image { width: 100%; height: auto; display: block; } /* SEKT07-NAV */ .main-nav { display: flex; align-items: center; margin-top: -5px; } .main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 7px; } .main-nav li { margin: 0; } .main-nav a { color: var(--cw1); text-decoration: none; font-weight: 500; font-size: var(--fs-bd); padding: 8px 7px; transition: all var(--transition); text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8); } .main-nav a:hover { color: var(--cw1) !important; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8), 3px 3px 25px rgb(0, 0, 0), -1px -1px 0 var(--cp2), 1px -1px 0 var(--cp2), -1px 1px 0 var(--cp2), 1px 1px 0 var(--cp2); } .main-nav .current-menu-item > a, .main-nav .current_page_item > a { text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8), 3px 3px 25px rgb(0, 0, 0), -1px -1px 0 var(--cp2), 1px -1px 0 var(--cp2), -1px 1px 0 var(--cp2), 1px 1px 0 var(--cp2); } /* Dropdown Submenu */ .main-nav li.menu-item-has-children { position: relative; } .main-nav li.menu-item-has-children > a::after { content: " ▼"; font-size: 0.7em; opacity: 0.8; margin-left: 3px; } /* Unsichtbare Brücke zwischen Menüpunkt und Dropdown */ .main-nav li.menu-item-has-children::before { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 40px; background: transparent; } .main-nav ul.sub-menu { display: none; position: absolute; top: calc(100% + clamp(14px, 1.5vw, 34px)); left: 0; min-width: 180px; max-height: 65vh; overflow-y: auto; background: rgba(213, 0, 0, 0.80); border: 1px solid var(--cs1); border-radius: 12px; padding: 8px 0; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8); z-index: 1000; flex-direction: column; gap: 0; } .main-nav li.menu-item-has-children:hover > ul.sub-menu { display: flex; } /* Scrollbar im Submenu */ .main-nav ul.sub-menu::-webkit-scrollbar { width: 12px !important; } .main-nav ul.sub-menu::-webkit-scrollbar-track { background: transparent !important; margin: 25px 0 !important; } .main-nav ul.sub-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4) !important; border-radius: 4px !important; } .main-nav ul.sub-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.6) !important; } .main-nav ul.sub-menu::-webkit-scrollbar-button { display: none !important; } .main-nav ul.sub-menu { scrollbar-width: auto !important; scrollbar-color: rgba(255, 255, 255, 0.4) transparent !important; } .main-nav ul.sub-menu li { width: 100%; } .main-nav ul.sub-menu a { display: block; padding: 5px 20px; font-size: 0.95em; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8); white-space: nowrap; } .main-nav ul.sub-menu a:hover { text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8), 3px 3px 25px rgb(0, 0, 0), -1px -1px 0 var(--cp2), 1px -1px 0 var(--cp2), -1px 1px 0 var(--cp2), 1px 1px 0 var(--cp2); } /* Team-Dropdown (vorletztes Item) nach links ausrichten */ .main-nav > ul > li.menu-item-has-children:nth-last-child(2) > ul.sub-menu { left: auto; right: 0; } /* === SUCHE IN NAV === */ .menu-search > a.search-toggle::after { content: none !important; } /* SVGs in Nav - gleiche Farbe und Schatten wie Text */ .main-nav svg { fill: var(--cw1); filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 1)); transition: all var(--transition); } .main-nav a:hover svg { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 1)) drop-shadow(3px 3px 25px rgb(0, 0, 0)); } /* Brücke nach unten DEAKTIVIEREN für Suche */ .menu-search.menu-item-has-children::before { display: none !important; } /* Brücke nach LINKS für Suche */ .menu-search ul.sub-menu::after { content: ''; position: absolute; top: 0; left: 100%; width: 30px; height: 100%; } .menu-search ul.sub-menu { top: 50%; transform: translateY(-50%); right: calc(100% + 10px); left: auto; min-width: 400px; padding: 10px 15px; background: rgba(213, 0, 0, 1); overflow: hidden; } .menu-search .search-li { padding: 0; } .nav-search-form { display: flex; gap: 10px; align-items: center; } /* Input bekommt IDENTISCHE Werte wie .main-nav a */ .nav-search-input { flex: 1; padding: 10px 20px; border: none; background: transparent; color: var(--cw1); font-weight: 700; font-size: var(--fs-bd); letter-spacing: 1px; -webkit-appearance: none; appearance: none; } .nav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .nav-search-input::placeholder { color: var(--cw1); letter-spacing: 1px; } .nav-search-input:focus { outline: none; } .nav-search-button { padding: 8px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; } .nav-search-button svg { width: 24px; height: 24px; } /* === NAV-ICONS (Lupe, Login, etc.) === */ .menu-search > a svg, .menu-login > a svg { width: 24px; height: 24px; } /* Dropdown-Pfeil unterdrücken, aber Tooltip erlauben */ .menu-login.menu-item-has-children > a::after { content: none !important; } /* Login-Tooltip: transparent, eng, mit Bruecke */ .menu-login > a[data-tooltip] { cursor: pointer; position: relative; } .menu-login > a[data-tooltip]::after { width: auto; white-space: nowrap; min-width: 80px; bottom: auto; top: 60%; left: auto; right: -22px; margin-top: 0; margin-bottom: 0; padding: 4px 8px 2px 8px; background: transparent; box-shadow: none; font-size: 1rem; font-weight: 500; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); transform: translateX(0); } /* SEKT08-NAV-MOBILE */ .menu-toggle { display: none; background: transparent; border: none; padding: 8px; cursor: pointer; flex-direction: column; gap: 6px; margin-top: -8px; } .menu-toggle span { display: block; width: 32px; height: 4px; background: var(--cw1); border-radius: 2px; transition: all var(--transition); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8); } .menu-toggle:hover span { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8), 3px 3px 15px rgba(0, 0, 0, 0.9); } @media (max-width: 768px) { .site-header { padding: 5px 10px 5px 10px; } .main-nav { display: none; position: absolute; top: calc(100% + 8px); right: 10px; left: auto; width: auto; min-width: 140px; background: rgba(213, 0, 0, 0.80); padding: 8px 10px; border: none; border-radius: 12px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8); } .main-nav.active { display: block; } .main-nav ul { flex-direction: column; gap: 0; align-items: flex-end; } .main-nav li { border-bottom: none; width: 100%; text-align: right; } .main-nav a { display: block; padding: 0.7rem 0.5rem; text-shadow: none; font-size: 1rem; } .menu-toggle { display: flex; } /* Mobile Submenu */ .main-nav li.menu-item-has-children > a::after { content: " ▸"; } .main-nav ul.sub-menu { position: static; display: none; background: transparent; box-shadow: none; padding: 0; padding-left: 15px; border-radius: 0; } .main-nav li.menu-item-has-children.active > ul.sub-menu { display: flex; } .main-nav ul.sub-menu a { padding: 0.5rem 0.5rem; font-size: 0.9rem; } } /* SEKT09-HERO */ /* Hero wird in SEKT06-HEADER definiert */ /* Hier Platz fuer erweiterte Hero-Styles */ /* SEKT10-CONTENT */ .content-box, .cont-gold { background: var(--cw1) !important; border-style: solid !important; border-color: var(--cs1) !important; border-width: var(--box-border-width) var(--box-border-side) !important; border-radius: var(--box-radius) !important; padding: 30px var(--box-padding) 30px var(--box-padding) !important; margin-bottom: var(--space-sm); } .content-box > *:last-child, .cont-gold > *:last-child { margin-bottom: 0; } .cont-white { background: var(--cw1) !important; border-radius: var(--box-radius) !important; padding: var(--box-padding) !important; } /* Listen im Content */ .content-box ul, .content-box ol, .cont-gold ul, .cont-gold ol { margin: 0 0 var(--space-md) 0; padding-left: 1.8em; } .content-box li, .cont-gold ul, .content-box ul { padding-left: 1.2em; /* Nur leichte Einrückung, Punkte fast bündig mit Fließtext */ } .cont-gold li { margin-bottom: 0.4em; padding-left: 0.2em; /* Punkt näher am Text */ } .content-box ul li::marker, .cont-gold ul li::marker { color: var(--cp1); font-size: 1.3em; /* Dickere Punkte */ } .content-box ol li::marker, .cont-gold ol li::marker { color: var(--cp1); font-weight: 600; } /* Booking Cards */ .booking-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin: var(--space-lg) 0; } .booking-card { background: var(--cw1); border: 3px solid var(--cs1); border-radius: var(--box-radius); padding: var(--space-md); transition: transform var(--transition), box-shadow var(--transition); } .booking-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .booking-card h3 { color: var(--cp1); margin: 0 0 var(--space-sm) 0; font-size: var(--fs-h4); } .booking-card .teaser { color: var(--ct1); font-size: var(--fs-sm); margin-bottom: var(--space-md); } .booking-card .duration { color: var(--cp1); font-size: var(--fs-sm); font-weight: 600; margin: calc(-1 * var(--space-sm)) 0 var(--space-sm) 0; opacity: 0.8; } .booking-card .read-more { color: var(--cp1); text-decoration: underline; cursor: pointer; font-weight: 600; } .booking-card .read-more:hover { color: var(--ca1); } @media (max-width: 768px) { .booking-grid { grid-template-columns: 1fr; } } /* === Scroll-nach-oben Button (global, in jedem Block) === */ .eds-blk-up { display: flex; justify-content: flex-end; margin-top: 0.3em; margin-bottom: -0.3em; } .eds-blk-up button { background: none; cursor: pointer; color: var(--c-text, #3a2a1a); font-size: 0.95em; line-height: 1; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-text, #3a2a1a); border-radius: 50%; opacity: 0.25; transition: opacity 0.2s, color 0.2s, border-color 0.2s; padding: 0 0 2px 0; } .eds-blk-up button:hover { opacity: 1; color: var(--c-primary, #D50000); border-color: var(--c-primary, #D50000); } /* === Scroll-Offset fuer TOC-Anker (Sticky Header) === */ [id^="blk-"] { scroll-margin-top: 80px; } /* === Flache Block-Struktur (v9) === */ .eds-blk-tx1 { margin-bottom: var(--space-sm); } .eds-blk-dw1 { margin-bottom: var(--space-sm); } .eds-blk-sc1 { margin-bottom: var(--space-sm); } /* SEKT11-FOOTER */ .site-footer { padding: var(--space-lg) 0 var(--space-md) 0; } /* ===== FOOTER SPALTEN ===== */ .footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-lg); text-align: center; } .footer-col h4 { color: var(--cs1); font-size: var(--fs-bd); font-weight: 600; margin-bottom: var(--space-xs); text-transform: uppercase; letter-spacing: 3px; text-decoration: underline; text-underline-offset: 4px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 2px; line-height: 1.4; } .footer-col a { color: var(--cs1); text-decoration: none; font-size: 0.97rem; transition: color 0.3s, text-shadow 0.3s; position: relative; } .footer-col a:hover { color: var(--cw1); text-shadow: 0 0 16px rgba(255, 255, 255, 0.5); } /* ===== TOOLTIPS - nutzt globales Design aus SEKT73 ===== */ /* Keine spezielle Definition nötig - data-tooltip funktioniert global */ /* Sprachhinweis */ .footer-lang-hint { color: var(--cs1); font-size: 0.97rem; font-style: italic; margin-top: var(--space-xs); margin-bottom: 2px; opacity: 0.8; } /* Aufklappbare Sprachliste */ .footer-lang-toggle { position: relative; } .footer-lang-toggle > a { cursor: pointer; } .footer-lang-list { display: none; list-style: none; margin: 6px 0 0 0; padding: 0; } .footer-lang-toggle.open .footer-lang-list { display: block; } .footer-lang-list li { margin-bottom: 2px; } .footer-lang-list a { color: var(--cs1); font-size: 0.97rem; } /* ===== COPYRIGHT ===== */ .footer-copyright { color: var(--cs1); font-size: var(--fs-sm); text-align: center; padding-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.15); } /* ===== RESPONSIVE ===== */ @media (max-width: 480px) { .footer-columns { grid-template-columns: 1fr; gap: var(--space-md); } .footer-col h4 { margin-bottom: var(--space-xs); } .footer-col li { margin-bottom: 2px; } /* Tooltips auf Mobile deaktivieren */ .footer-col a[data-tooltip]::after { display: none; } } /* SEKT12-FOOTER-NL */ .footer-newsletter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.15); flex-wrap: wrap; } .newsletter-label { color: var(--cw1); font-weight: 600; font-size: var(--fs-bd); } .newsletter-form { flex: 1; max-width: 400px; min-width: 250px; } .newsletter-hint { color: var(--cw1); font-size: var(--fs-sm); } .newsletter-hint .hint-gold { color: var(--cs1); } /* Fluent Forms im Footer */ .footer-newsletter .fluentform { display: flex !important; gap: 10px !important; align-items: center !important; } .footer-newsletter .ff-el-group { margin: 0 !important; } .footer-newsletter input[type="email"] { border: 2px solid var(--cs1) !important; border-radius: 25px !important; padding: 10px 18px !important; background: var(--cw1) !important; } .footer-newsletter button[type="submit"] { background: var(--cp1) !important; color: var(--cw1) !important; border: none !important; border-radius: 25px !important; padding: 10px 20px !important; font-weight: 600 !important; cursor: pointer !important; } .footer-newsletter button[type="submit"]:hover { background: var(--cd1) !important; } /* EDS Newsletter Inline */ form.eds-newsletter-inline { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 15px !important; } form.eds-newsletter-inline > fieldset { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 15px !important; } form.eds-newsletter-inline .ff-el-group { margin-bottom: 0 !important; flex: 0 0 auto !important; display: inline-block !important; } form.eds-newsletter-inline .ff-el-input--label { display: none !important; } form.eds-newsletter-inline .ff_submit_btn_wrapper { margin-bottom: 0 !important; padding-top: 0 !important; display: inline-block !important; flex: 0 0 auto !important; } form.eds-newsletter-inline .ff-btn-submit { margin-top: 0 !important; } @media (max-width: 768px) { .footer-newsletter { flex-direction: column; text-align: center; } .newsletter-form { width: 100%; max-width: 100%; } } /* SEKT13-FOOTER-LEGAL */ /* Footer Legal ist in SEKT11-FOOTER integriert */ /* Hier Platz fuer erweiterte Legal-Styles */ /* SEKT20-BLOG-SINGLE */ .single-post-article { margin-bottom: var(--space-lg); } .post-content { text-align: left !important; column-count: 2; column-gap: 2.5em; column-rule: var(--column-rule); } /* Ueberschriften spannen ueber beide Spalten */ .post-content h2, .post-content h3, .post-content h4, .post-content h5 { column-span: all; } /* Bilder und Blockquotes auch ueber volle Breite */ .post-content img, .post-content blockquote, .post-content .wp-block-image { column-span: all; } /* Einzelspalte auf Tablet und kleiner */ @media (max-width: 992px) { .post-content { column-count: 1; } } /* SEKT21-BLOG-FLOW */ /* ============================================ BLOG FLOW FIELDS + "WAS DU HIER FINDEST" ============================================ */ .flow-mi-content { display: none; padding: 0.5em 0 0.2em 0; font-size: inherit; line-height: 1.5; color: var(--ct1); } .flow-divider { border-bottom: 1px solid var(--cs1); margin-bottom: var(--space-md); } .kommentar-toggle { margin-top: var(--space-md); margin-bottom: var(--space-sm); } /* === DEIN THEMA? (immer sichtbar, dreispaltig) === */ .dein-thema { margin-bottom: 0.6em; } .dein-thema .dein-thema-label { font-size: var(--fs-h4); font-weight: 600; color: var(--cp1); margin: 0 0 0.3em 0; } .dein-thema-text { column-count: 3; column-gap: 2em; column-rule: var(--column-rule); font-size: var(--fs-bd); line-height: 1.55; color: var(--c-texhi, #a30000); } .dein-thema-text p { margin: 0; } @media (max-width: 1100px) { .dein-thema-text { column-count: 2; } } @media (max-width: 768px) { .dein-thema-text { column-count: 1; } } /* === WAS DU HIER FINDEST === */ .wdhf-toggle { margin-bottom: 0; } .wdhf-trigger { color: var(--c-texhi, #a30000) !important; font-size: var(--fs-h5); font-weight: 500; padding-bottom: 6px; display: block; } .wdhf-trigger:hover { color: var(--cp1) !important; } .wdhf-trigger.open { color: var(--c-accent, #278B10) !important; } /* 2-Spalten Grid mit vertikaler Linie via column-rule */ .wdhf-grid { column-count: 2; column-gap: 2.5em; column-rule: var(--column-rule); padding-top: 0.8em; } /* Bloecke duerfen nicht umbrechen */ .wdhf-block { padding-bottom: 0.8em; border-bottom: 1px solid var(--cs1); margin-bottom: 0.8em; break-inside: avoid; } .wdhf-block p { margin: 0.3em 0 0 0; font-size: var(--fs-bd); line-height: 1.55; color: var(--c-texhi, #a30000); } .wdhf-label { font-size: var(--fs-h6); font-weight: 600; color: var(--cp1); margin: 0; } .wdhf-label-claude { color: var(--cc1); } .wdhf-claude p { color: var(--cc1); font-style: italic; } /* === INHALTSUEBERSICHT === */ .wdhf-toc { column-span: all; padding-top: 1em; padding-bottom: 0; margin-bottom: 0; border-bottom: none !important; break-inside: avoid; } .wdhf-toc .wdhf-label { margin-bottom: 1.2em; } .wdhf-toc-list { margin: 0; padding-left: 0; list-style: none; counter-reset: toc-counter; } .wdhf-toc-list li { margin-bottom: 0.5em; line-height: 1.4; counter-increment: toc-counter; padding-left: 1.8em; position: relative; } /* Letzter TOC-Eintrag: kein unterer Abstand */ .wdhf-toc-list li:last-child { margin-bottom: 0; } .wdhf-toc-list li::before { content: counter(toc-counter) "."; position: absolute; left: 0; color: var(--ct1); font-weight: 600; font-size: var(--fs-bd); } .wdhf-toc-link, .wdhf-toc-heading { font-size: var(--fs-bd); font-weight: 600; color: var(--ct1); text-decoration: none; } .wdhf-toc-link:hover { color: var(--cp1); text-decoration: underline; } .wdhf-toc-kern { display: block; font-size: var(--fs-bd); color: var(--c-texhi, #a30000); line-height: 1.4; margin-top: 0.1em; } .wdhf-claude { break-inside: avoid; } /* Toggle -> Beitragsbild: reduzierter Abstand */ .wdhf-toggle + .image-meta-row { margin-top: 6px; } /* === WIEDER AUSBLENDEN === */ /* wdhf-close: Legacy-Fallback, bevorzugt tg.wa nutzen */ .wdhf-close { display: block; text-align: center; padding-top: 0.2em; padding-bottom: 0.8em; margin-top: 0; cursor: pointer; font-size: var(--fs-bd); font-weight: 500; color: var(--c-accent, #278B10) !important; border: none !important; background: none !important; text-decoration: none !important; column-span: all; position: relative; z-index: 1; line-height: 1.4; } .wdhf-close::before { content: ""; position: absolute; top: 35%; left: 0; right: 0; height: 1px; background: var(--cs1); z-index: -1; } .wdhf-close span { background: var(--cw1); padding: 0 1em; position: relative; z-index: 1; } .wdhf-close:hover { color: var(--c-accent-dark, #1C500C) !important; } /* Responsive */ @media (max-width: 992px) { .wdhf-grid { column-count: 1; } } /* SEKT22-BLOG-META */ .image-meta-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: end; margin: var(--space-md) 0 var(--space-sm) 0; } /* Top-H3 (eds_top_h3) zwischen Bild/Meta und Content */ .eds-top-h3 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); } .featured-image-col { padding: var(--space-sm) var(--space-sm) 0 0; } .featured-image-single { width: 100%; max-width: 95%; height: auto; border-radius: 12px; display: block; } .meta-col { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 6px; padding-left: 9px; } .meta-col h4 { margin: 0 0 6px 0; } /* === FORMAT-ICONS (nur Icons, ohne Hintergrund) === */ .format-icons { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; } .format-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; text-decoration: none; color: var(--ct2); background: none; transition: color var(--transition), transform var(--transition); } .format-icon:hover { color: var(--cp1); transform: scale(1.15); } .format-icon.active { color: var(--cp1); cursor: default; } .format-icon.active[data-tooltip] { cursor: default; } .format-icon svg { width: 22px; height: 22px; fill: currentColor; } /* Tooltip fuer Format-Icons: schmal, kein cursor:help */ .format-icon[data-tooltip] { cursor: pointer; } .format-icon[data-tooltip]::after { width: auto; white-space: nowrap; min-width: 0; font-size: 0.8rem; padding: 5px 10px; } /* Tooltip-Override: schmaler, Pointer statt Help */ .format-icon[data-tooltip] { cursor: pointer; } .format-icon[data-tooltip]::after { width: auto; white-space: nowrap; min-width: 60px; font-size: 0.82rem; padding: 6px 12px; } /* Aktiver Icon (Blog) bekommt help-cursor da nicht klickbar */ span.format-icon[data-tooltip] { cursor: default; } /* === META-LISTE (linksbündig) === */ /* Meta-Liste: Override fuer content-box ul padding */ .meta-col .post-meta-list { list-style: none; padding: 0 !important; margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ct2); text-align: left; } .post-meta-list li { margin-bottom: 0.3rem; padding: 0; padding-left: 0; text-indent: 0; } /* Tags mit gleichem Zeilenabstand */ .post-meta-list .meta-tag-link { line-height: 1.6; } .post-meta-list .meta-label { color: var(--ct2); font-weight: 600; } /* Tags als klickbare Links */ .meta-tag-link { color: var(--ci1); text-decoration: none; transition: color var(--transition); } .meta-tag-link:hover { color: var(--cl2); text-decoration: underline; } @media (max-width: 768px) { .image-meta-row { grid-template-columns: 1fr; gap: 12px; } } /* SEKT23-BLOG-SHARE */ /* ===== SHARE SECTION ===== */ /* Icons: nutzt .eds-social-icon aus SEKT72-SOCIAL */ .share-section { border-top: 1px solid var(--cs2); border-bottom: 1px solid var(--cs2); padding: 20px 0; margin: var(--space-lg) 0 var(--space-md) 0; } .eds-share-follow-row { display: flex; justify-content: center; align-items: center; gap: 50px; flex-wrap: wrap; } .eds-share-group, .eds-follow-group { display: flex; align-items: center; gap: 15px; } .eds-share-label { font-size: 16px; color: var(--ct2); font-weight: 500; } /* Responsive */ @media (max-width: 600px) { .eds-share-follow-row { gap: 25px; } .eds-share-group, .eds-follow-group { gap: 10px; } } /* SEKT24-BLOG-RELATED */ /* ===== RELATED POSTS ===== */ .related-posts-box { margin-bottom: var(--space-sm); padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; overflow: hidden; } /* Beitrags-Navigation zwischen Content und Related */ .post-nav-between { display: flex; justify-content: space-between; align-items: center; padding: 0 40px var(--space-lg) 40px; margin-top: calc(var(--space-md) * -1); } .post-nav-link { color: var(--cs1); font-weight: 700; font-size: var(--fs-base); text-decoration: none; letter-spacing: 0.03em; transition: color var(--transition); display: inline-flex; align-items: center; } .post-nav-link:hover { color: var(--cw1); } /* Naechster Beitrag: Pfeil rechts (Custom SVG) */ .post-nav-next::after { content: ''; display: inline-block; width: 1.3em; height: 1.3em; margin-left: 6px; mask-image: var(--pfeil-svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--pfeil-svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: currentColor; vertical-align: -0.2em; transition: transform 0.3s ease; } .post-nav-next:hover::after { transform: translateX(4px); } /* Voriger Beitrag: Pfeil links (Custom SVG, gespiegelt) */ .post-nav-prev::before { content: ''; display: inline-block; width: 1.3em; height: 1.3em; margin-right: 6px; mask-image: var(--pfeil-svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--pfeil-svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: currentColor; vertical-align: -0.2em; transform: scaleX(-1); transition: transform 0.3s ease; } .post-nav-prev:hover::before { transform: scaleX(-1) translateX(4px); } /* Nav + Heading Row */ .nav-heading-row { display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: var(--space-sm); } .eds-karussell-nav-btn { width: 34px; height: 34px; background: transparent; border: 2px solid var(--cp1); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, transform 0.2s; flex-shrink: 0; } .eds-karussell-nav-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--cp1); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .eds-karussell-nav-btn:hover { background: var(--cp1); transform: scale(1.1); } .eds-karussell-nav-btn:hover svg { stroke: white; } .related-heading { text-align: center; } /* Posts Grid */ .related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } /* Post Card - Basis kommt aus SEKT44 (.related-post-card) */ .related-post-card { overflow: hidden; } .related-thumbnail { width: 100%; height: 180px; object-fit: cover; display: block; } .related-thumbnail-placeholder { width: 100%; height: 180px; background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); } .related-post-title { padding: var(--space-sm) var(--space-md) var(--space-xs); margin: 0; font-size: var(--fs-h5); color: var(--cp1); line-height: 1.3; } .related-read-more { display: block; padding: var(--space-xs) var(--space-md) var(--space-sm); font-size: var(--fs-tn); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: var(--cp1); } /* Responsive */ @media (max-width: 992px) { .related-posts-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-heading-row { flex-direction: column; gap: var(--space-sm); } .spacer-right { display: none; } .post-navigation-arrows { order: 2; } .related-heading { order: 1; } } @media (max-width: 600px) { .related-posts-grid { grid-template-columns: 1fr; } } /* ===== KARUSSELL-KARTEN (Flow-Variante) ===== */ /* Basis (Schatten, Border, Hover) kommt aus SEKT44 */ /* Hier nur die spezifischen Flow-Karten-Eigenschaften */ a.related-card-flow { display: block; text-decoration: none; padding: var(--space-sm); color: var(--ct1); box-sizing: border-box; word-break: break-word; min-width: 0; overflow: hidden; } .related-card-link { display: block; margin: 0 0 8px 0; } .related-thumbnail-small { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 8px; } .related-flow-text { display: block; font-size: 0.95em; line-height: 1.45; color: var(--ct3); overflow: hidden; } /* Pause/Play Button rechts oben im Karussell */ .eds-karussell-wrapper { position: relative; } .eds-karussell-pause { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: rgba(0, 0, 0, 0.3); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.3s; padding: 0; } .eds-karussell-pause:hover { background: rgba(0, 0, 0, 0.55); } .eds-karussell-pause svg { width: 12px; height: 12px; fill: white; } /* Pause-Button in EB-Sektionen und EB-Related ausblenden */ .eds-eb-sektion .eds-karussell-pause, .single-eds_eb .related-posts-box .eds-karussell-pause, .single-post .related-posts-box .eds-karussell-pause, .single-post .related-posts-box .eds-karussell-pause-inline { display: none; } .related-flow-p { display: block; margin-bottom: 0.6em; } .related-flow-p:last-child { margin-bottom: 0; } .related-flow-teaser { display: block; } /* ===== INHALTSUEBERSICHT (inh_uebs) ===== */ .inh-uebs-grid { display: flex; flex-direction: column; gap: 0.6em; } .inh-uebs-row { display: grid; grid-template-columns: auto 1fr; gap: 0.8em; align-items: baseline; line-height: 1.4; } .inh-uebs-heading { font-weight: 700; color: var(--cp1); text-decoration: none; white-space: nowrap; } .inh-uebs-heading:hover { color: var(--cs1); text-decoration: underline; } .inh-uebs-kern { color: var(--ct1); font-size: 0.95em; } @media (max-width: 600px) { .inh-uebs-row { grid-template-columns: 1fr; gap: 0.2em; } } /* SEKT25-BLOG-ARCHIVE */ /* Blog-Archiv Grundstruktur */ /* Wird spaeter erweitert */ /* SEKT26-BLOG-FILTER */ /* Blog-Filter wird spaeter erweitert */ /* SEKT27-CPT-VIDEO-AUDIO */ /** * SEKT27-CPT-VIDEO-AUDIO.css * Styles für Custom Post Types: eds_video und eds_audio * * Enthält: * - Video Embed responsive * - Audio Player Styling * - Zusammenfassungs-Box * - Transkript Toggle * - Type Badges * - Related Media Grid * * @since 3.1.0 */ /* ================================ TYPE BADGES ================================ */ .eds-content-type-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: none; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .video-badge { background: var(--accent-red, #c41e3a); color: #fff; } .audio-badge { background: var(--accent-blue, #2a5298); color: #fff; } /* ================================ VIDEO EMBED ================================ */ .eds-video-section { margin-bottom: 2rem; } .eds-video-embed { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; border-radius: 8px; background: #000; } .eds-video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .eds-video-meta, .eds-audio-meta { display: flex; gap: 1rem; align-items: center; margin-top: 0.75rem; font-size: 0.9rem; color: var(--text-muted, #666); } .video-duration, .audio-duration { display: flex; align-items: center; gap: 0.35rem; } .video-duration svg, .audio-duration svg { opacity: 0.7; } .audio-type-badge { padding: 2px 8px; border-radius: 3px; background: var(--bg-light, #f5f5f5); font-size: 0.75rem; font-weight: 500; } /* ================================ AUDIO PLAYER ================================ */ .eds-audio-hero { display: flex; gap: 2rem; margin-bottom: 2rem; align-items: flex-start; } .audio-cover { flex: 0 0 200px; } .audio-cover-image { width: 200px; height: 200px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .audio-player-section { flex: 1; } .eds-audio-player { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--bg-light, #f5f5f5); border-radius: 8px; } .eds-audio-player audio { flex: 1; height: 40px; } .eds-audio-download { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold, #c9a227); color: #fff; transition: background 0.2s ease; } .eds-audio-download:hover { background: var(--gold-dark, #a68521); } .eds-audio-download svg { stroke: currentColor; } .audio-error, .video-error { padding: 1rem; background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; color: #856404; } /* ================================ SUMMARY BOX ================================ */ .eds-summary-box { padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; } .video-summary { background: linear-gradient(135deg, #e8f4fc 0%, #d1e8f5 100%); border-left: 4px solid var(--accent-blue, #2a5298); } .audio-summary { background: linear-gradient(135deg, #f5f0e8 0%, #ebe4d5 100%); border-left: 4px solid var(--gold, #c9a227); } .summary-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem 0; font-size: 1rem; color: var(--text-dark, #333); } .summary-title svg { opacity: 0.6; } .summary-content { font-size: 0.95rem; line-height: 1.6; } .summary-content p:last-child { margin-bottom: 0; } /* ================================ TRANSKRIPT TOGGLE ================================ */ .transkript-toggle { margin: 2rem 0; border: 1px solid var(--border-light, #e0e0e0); border-radius: 8px; overflow: hidden; } .transkript-toggle summary { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; background: var(--bg-light, #f8f8f8); cursor: pointer; font-weight: 500; transition: background 0.2s ease; } .transkript-toggle summary:hover { background: var(--bg-hover, #f0f0f0); } .transkript-toggle summary svg { opacity: 0.6; } .transkript-toggle[open] summary { border-bottom: 1px solid var(--border-light, #e0e0e0); } .transkript-content { padding: 1.5rem; max-height: 600px; overflow-y: auto; font-size: 0.95rem; line-height: 1.8; } .transkript-content p { margin-bottom: 1rem; } /* ================================ META SECTION ================================ */ .eds-meta-section { margin: 2rem 0; padding: 1.5rem; background: var(--bg-light, #f8f8f8); border-radius: 8px; } .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .meta-item { display: flex; flex-direction: column; gap: 0.25rem; } .meta-label { font-size: 0.75rem; text-transform: none; letter-spacing: 0.5px; color: var(--text-muted, #888); } .meta-value { font-size: 0.95rem; color: var(--text-dark, #333); } /* ================================ PLACEHOLDERS ================================ */ .related-thumbnail-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16/9; border-radius: 8px; } .video-placeholder { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: rgba(255,255,255,0.5); } .audio-placeholder { background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%); color: rgba(255,255,255,0.5); } /* ================================ SPRACHNACHRICHT PLAYER (eds_sp) ================================ */ .eds-sp-player { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #f8f6f0 0%, #f0ede5 100%); border-left: 4px solid var(--c-gold, #C9A227); border-radius: 8px; } .eds-sp-player-label { font-weight: 600; font-size: 1rem; color: var(--c-secondary, #570200); margin-bottom: 0.75rem; } .eds-sp-dauer { font-weight: 400; color: #666; font-size: 0.9rem; } .eds-sp-audio { width: 100%; height: 42px; border-radius: 6px; } .eds-sp-audio::-webkit-media-controls-panel { background: #fff; } .eds-sp-meta { font-size: 0.85rem; color: #666; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; } .eds-sp-transkript h3 { font-size: 1.1rem; color: var(--c-secondary, #570200); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--c-gold, #C9A227); } /* Format-Verknüpfungen */ .eds-sp-formate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem; background: #f8f8f8; border-radius: 8px; } .eds-sp-formate-label { font-size: 0.85rem; color: #666; margin-right: 0.25rem; } .eds-sp-format-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .eds-sp-format-blog { background: #fff; color: var(--c-secondary, #570200); border: 1px solid #e0d8d0; } .eds-sp-format-blog:hover { background: var(--c-secondary, #570200); color: #fff; } .eds-sp-format-video { background: #fff; color: #c41e3a; border: 1px solid #e0d0d0; } .eds-sp-format-video:hover { background: #c41e3a; color: #fff; } .eds-sp-format-audio { background: #fff; color: #2a5298; border: 1px solid #d0d8e0; } .eds-sp-format-audio:hover { background: #2a5298; color: #fff; } /* ================================ RESPONSIVE ================================ */ @media (max-width: 768px) { .eds-audio-hero { flex-direction: column; align-items: center; text-align: center; } .audio-cover { flex: none; } .audio-cover-image { width: 150px; height: 150px; } .audio-player-section { width: 100%; } .eds-audio-player { flex-direction: column; gap: 0.75rem; } .eds-audio-player audio { width: 100%; } .eds-audio-meta { justify-content: center; flex-wrap: wrap; } .meta-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .meta-grid { grid-template-columns: 1fr; } } /* ================================ RELATED MEDIA BOX Verknüpfung Video ↔ Audio ↔ Blog ================================ */ .eds-related-media-box { margin: 2rem 0; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #f8f6f0 0%, #f0ede5 100%); border-radius: 8px; border-left: 4px solid var(--gold, #c9a227); } .related-media-title { margin: 0 0 0.75rem 0; font-size: 0.95rem; font-weight: 600; color: var(--text-dark, #333); } .related-media-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; } .related-media-list li { margin: 0; } .related-media-list a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; background: #fff; border-radius: 6px; text-decoration: none; color: var(--text-dark, #333); font-size: 0.9rem; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: all 0.2s ease; } .related-media-list a:hover { background: var(--gold, #c9a227); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); } .related-icon { font-size: 1.1rem; } @media (max-width: 480px) { .related-media-list { flex-direction: column; gap: 0.5rem; } .related-media-list a { width: 100%; justify-content: center; } } /* SEKT28-CPT-EB */ /* ============================================ SEKT28 - CPT Erfahrungsberichte (eds_eb) ============================================ */ /* Video Privacy-Overlay */ .eds-eb-video-wrapper { margin-bottom: var(--space-sm); } .eds-eb-video-privacy { position: relative; border-radius: 4px; overflow: hidden; } .eds-eb-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.2s ease; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); } .eds-eb-video-privacy:hover .eds-eb-play-overlay { transform: translate(-50%, -50%) scale(1.1); } .eds-eb-video-wrapper .responsive-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 4px; } .eds-eb-video-wrapper .responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ============================================ SEKTIONEN: Feine 1px Linie (Standard) ============================================ */ .eds-eb-sektion { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid rgba(139, 0, 0, 0.15); } .eds-eb-sektion:first-of-type { margin-top: var(--space-md); } .eds-eb-sektion > h3 { color: var(--cp1); margin-bottom: var(--space-sm); } /* ============================================ CLAUDE-KOMMENTAR: Modulares System .eds-eb-k = BASIS: Petrol-Text, column-span, 2 Spalten, Trennlinie .eds-eb-ck = ERWEITERUNG: + Balken oben (8px) + unten (3px) .eds-eb-claude = EB-Template Alias (Rueckwaertskompatibel) ============================================ */ /* --- K: Basis-Styling (Petrol, Spalten, Trennlinie) --- */ .eds-eb-k, .eds-eb-ck, .eds-eb-sektion.eds-eb-claude { column-span: all; padding-top: var(--space-sm); padding-bottom: var(--space-sm); margin-top: var(--space-md); margin-bottom: var(--space-md); } .eds-eb-k .eds-block-text, .eds-eb-ck .eds-block-text { columns: 2; column-gap: 47px; column-rule: 1px solid rgba(1, 77, 73, 0.3); } /* --- CK: Nur die Balken dazu --- */ .eds-claude-balken, .eds-eb-ck { border-top: 8px solid var(--cc1); border-bottom: 3px solid var(--cc1); padding-top: 0; } /* --- TOC: Claude-Eintrag in Petrol --- */ .eds-toc-item.eds-toc-claude a, .eds-toc-item.eds-toc-claude .eds-toc-kernaussage { color: var(--cc1); } /* ============================================ MI-TOGGLE ACTIVE: Gruen + "Wieder ausblenden" Hohe Spezifitaet damit es ueberall greift ============================================ */ .single-eb-article .flow-toggle-item a.mi.open, .single-eb-article .eds-eb-claude .flow-toggle-item a.mi.open { color: var(--ca1) !important; } /* Transkript */ .eds-eb-transkript { max-height: 600px; overflow-y: auto; padding-right: var(--space-sm); font-size: 0.95rem; line-height: 1.7; } .eds-eb-transkript::-webkit-scrollbar { width: 6px; } .eds-eb-transkript::-webkit-scrollbar-thumb { background: var(--cs1); border-radius: 3px; } /* Zitate */ .eds-eb-zitate { display: flex; flex-direction: column; gap: var(--space-sm); } .eds-eb-zitat { border-left: 3px solid var(--cs1); padding: var(--space-sm) var(--space-md); margin: 0; background: rgba(201, 162, 39, 0.05); border-radius: 0 4px 4px 0; font-style: italic; } .eds-eb-zitat p { margin: 0 0 0.3em 0; } .eds-eb-zitat cite { font-style: normal; font-size: 0.9rem; color: var(--cs1); font-weight: 500; } /* ============================================ CLAUDE-TEXT: NUR Fliesstext in Claude-Farbe Gilt fuer .eds-eb-k (Basis) .eds-eb-ck (mit Balken) und .eds-eb-claude (EB-Template) ============================================ */ .single-eb-article .eds-eb-claude p, .single-eb-article .eds-eb-claude li, .single-eb-article .eds-eb-claude strong, .single-eb-article .eds-eb-claude em, .single-eb-article .eds-eb-claude blockquote, .eds-eb-k p, .eds-eb-k li, .eds-eb-k strong, .eds-eb-k em, .eds-eb-k blockquote, .eds-eb-ck p, .eds-eb-ck li, .eds-eb-ck strong, .eds-eb-ck em, .eds-eb-ck blockquote { color: var(--cc1); } .single-eb-article .eds-eb-claude h3, .single-eb-article .eds-eb-claude h4, .eds-eb-k h3, .eds-eb-k h4, .eds-eb-ck h3, .eds-eb-ck h4 { color: var(--cp1); } .eds-eb-claude-logo { vertical-align: -5px; margin-right: 8px; } .single-eb-article .eds-eb-claude .eds-eb-claude-intro { color: var(--cc1); font-style: italic; margin-bottom: var(--space-sm); } .single-eb-article .eds-eb-claude .flow-toggle-item a.mi { color: var(--ci1); } /* Sprecher */ .eds-eb-transkript .sprecher { font-weight: 700; color: var(--cp1); display: block; margin-top: var(--space-sm); margin-bottom: 0.2em; } .eds-eb-transkript .sprecher-michael { color: var(--cp1); } .eds-eb-transkript .sprecher-gast { color: var(--cc1); } /* ============================================================================ TEASER-KARTEN IM KARUSSELL: Schatten + Rahmen wie Themenseite-Karten ============================================================================ */ .eds-eb-sektion .eds-karussell-item .eds-ebt-inline { background: var(--cw1); border: 1px solid var(--c-gold); border-radius: 10px; padding: 14px 16px; box-shadow: 6px 6px 9px rgba(63, 0, 0, 0.4); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .eds-eb-sektion .eds-karussell-item .eds-ebt-inline:hover { transform: translateY(-5px); border-color: var(--ci1); box-shadow: 8px 8px 14px rgba(63, 0, 0, 0.5); } /* ============================================================================ RELATED-KARTEN: Link-Verhalten ============================================================================ */ .eds-eb-related-karte { text-decoration: none; color: inherit; display: block; } .eds-eb-related-karte:hover { text-decoration: none; } .eds-eb-related-karte .eds-ebt-inline-aussage { color: var(--cp1); font-weight: 600; } .eds-eb-related-karte .eds-ebt-inline-meta { font-size: var(--fs-sm); color: var(--cp2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================ EB-UNTERTITEL + EINLEITUNG ============================================================================ */ .eb-untertitel { color: var(--cp2); font-weight: 400; font-size: var(--fs-h4); margin-bottom: var(--space-md); } .eb-zf-einleitung { color: var(--ct2); font-weight: 400; font-style: italic; font-size: var(--fs-bd); margin-bottom: var(--space-sm); } /* ============================================================================ TRANSKRIPT-SEKTION: Sanft beiger Hintergrund ============================================================================ */ .eds-eb-transkript-sektion { background: rgba(230, 215, 190, 0.8); border-top: 1px solid rgba(200, 180, 140, 0.3); border-bottom: 1px solid rgba(200, 180, 140, 0.3); padding: var(--space-sm) var(--space-md); margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md)); padding-left: var(--space-md); padding-right: var(--space-md); } .eds-eb-transkript-sektion .mi { font-size: var(--fs-h4); } .eds-eb-transkript-sektion h4 { color: var(--cp1); } .eds-eb-transkript-content-bg { background: rgba(230, 215, 190, 0.5); border-radius: 6px; padding: var(--space-sm); margin-top: var(--space-xs); } /* ============================================================================ EB TOP H3 + TOP TEXT: Ueber dem Video ============================================================================ */ .eds-eb-top-h3 { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .eds-eb-top-txt { color: var(--cp2); font-size: var(--fs-bd); margin-bottom: var(--space-md); line-height: 1.5; } /* ===== GLOBALE KARTENTEXT-FARBE ===== */ .eds-eb-related-karte, .eds-eb-related-karte .karte-body, .eds-eb-related-karte .eds-ebt-inline-aussage, .eds-eb-related-karte .eds-ebt-inline-meta { color: var(--ct3); } /* SEKT31-THEMENSEITE-PAGE */ /* =========================================== SEKT31-THEMENSEITE-PAGE.css Styles für page-themenseite.php Template Artikel-Boxen innerhalb von .cont-gold Text umfließt das Bild (float) NUTZT Standard-Typo-Klassen! =========================================== */ /* --- Filter-Leiste in cont-gold (erbt von SEKT41) --- */ .cont-gold .eds-filter-leiste { margin-bottom: 6px; padding-bottom: 6px; border-bottom: none; } /* Detail-Filterzeilen: keine Linie, 10px Abstand */ .cont-gold .eds-filter-leiste.eds-filter-details { border-bottom: none; margin-bottom: 10px; padding-bottom: 0; } /* --- Artikel-Liste innerhalb cont-gold --- */ /* Weniger Abstand nach oben, da cont-gold schon Padding hat */ .cont-gold .themenseite-artikel-liste { margin-top: var(--space-sm); } /* --- Einzelne Artikel-Box (Text umfließt Bild) --- */ .cont-gold .themenseite-artikel-box { margin-bottom: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 3px solid var(--cs1); overflow: auto; /* Clearfix für Float */ } .cont-gold .themenseite-artikel-box:last-child { border-bottom: none; margin-bottom: 0; } /* --- Artikel Bild (Float links, Text umfließt) --- */ /* clamp(120px, 18vw, 180px) = min 120px, wächst mit 18% Viewport-Breite, max 180px */ /* Abstand zum Text = box-padding (wie Rand der Box) */ /* margin-top 1.3em = Oberkante etwas unter der Überschrift */ .cont-gold .themenseite-artikel-box .artikel-bild { float: left; width: clamp(120px, 18vw, 180px); margin: 1.3em var(--box-padding) 0.2em 0; } .cont-gold .themenseite-artikel-box .artikel-bild img { width: 100%; height: auto; border-radius: 8px; } /* --- INFOZEILE (.info) --- */ /* Ganze Zeile in --c-info (helles Rosa-Rot, wie Scrollbar) */ .cont-gold .themenseite-artikel-box .info { margin-top: var(--space-xs); margin-bottom: 0; font-size: var(--fs-bd); line-height: 1.6; color: var(--ci1); } /* Links in Infozeile: gleiche Farbe, FETT, Hover Gruen */ .cont-gold .themenseite-artikel-box .info a { color: var(--ci1); font-weight: 600; text-decoration: none; transition: color 0.3s ease; } .cont-gold .themenseite-artikel-box .info a:hover { color: var(--cl2); } /* MI geoeffnet = dauerhaft gruen (gleiche Spezifitaet wie oben) */ .cont-gold .themenseite-artikel-box .info a.mi.open { color: var(--cl2); } /* .mi, .zb, .ae erben globale Definitionen aus SEKT04-TYPO */ /* --- MI: nutzt globale a.mi Klasse aus SEKT04-TYPO --- */ /* --- ZB: nutzt globale a.zb Klasse aus SEKT04-TYPO --- */ /* --- MEHR INFO CONTENT (versteckt) --- */ .cont-gold .themenseite-artikel-box .mehr-info-content, .cont-gold .themenseite-karte .mehr-info-content { display: none; clear: both; margin-top: var(--space-xs); } .cont-gold .themenseite-artikel-box .mehr-info-content p { color: var(--ci1); /* Helles Rot fuer Aufklapptext */ margin-bottom: var(--space-xs); } /* Sichtbar wenn Box die Klasse .info-open hat */ .cont-gold .themenseite-artikel-box.info-open .mehr-info-content, .cont-gold .themenseite-karte.info-open .mehr-info-content { display: block; } .cont-gold .themenseite-artikel-box .mehr-info-content p:last-child { margin-bottom: 0; } /* --- Alle Anzeigen Link --- */ .cont-gold .themenseite-alle-link { text-align: center; padding-top: var(--space-lg); margin-top: var(--space-md); border-top: 1px solid rgba(0, 0, 0, 0.1); } .cont-gold .themenseite-alle-link a { display: inline-block; padding: var(--space-sm) var(--space-lg); background: var(--cp1); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 500; transition: all 0.3s ease; } .cont-gold .themenseite-alle-link a:hover { background: var(--cs1); color: var(--cp1); } /* --- MEHR LADEN LINK (wie Mehr-Info) --- */ .cont-gold .themenseite-mehr-laden { text-align: center; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(0, 0, 0, 0.1); } .cont-gold .eds-mehr-laden-link { display: inline-flex; align-items: center; gap: 0.3em; color: var(--cp1); font-weight: 600; text-decoration: none; transition: color 0.3s ease; } .cont-gold .eds-mehr-laden-link:hover { color: var(--ca1); } .cont-gold .eds-mehr-laden-link .tp { font-size: 0.7em; transition: transform 0.3s ease; } /* --- KEINE ERGEBNISSE --- */ .cont-gold .eds-keine-ergebnisse { text-align: center; padding: var(--space-lg); color: var(--ct2); font-style: italic; } /* --- VERSTECKTE ELEMENTE --- */ .eds-hidden { display: none !important; } /* --- KARUSSELL-WRAP in cont-gold --- */ .cont-gold .themenseite-karussell-wrap { margin-top: var(--space-sm); padding: 0 calc(var(--arrow-size, 44px) + 10px); } /* --- KARTEN-GRID (für Kartenansicht) --- */ .cont-gold .themenseite-karten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); margin-top: var(--space-sm); } /* --- EINZELNE KARTE (Überschrift oben, Bild links unten) --- */ /* Karten sind kompakter als Liste - wer größer braucht, nutzt Liste */ .cont-gold .themenseite-karte { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.5); border: 1px solid var(--cs1); border-radius: 20px; padding: var(--space-sm); transition: all 0.25s ease; font-size: 0.9em; /* Kompakter als Liste */ /* Schatten: 6px rechts, 6px unten, 9px blur in Dunkelrot (40% Opacity) */ box-shadow: 6px 6px 9px rgba(63, 0, 0, 0.4); } .cont-gold .themenseite-karte:hover { transform: translateY(-5px); border-color: var(--ci1); /* Schatten: 6px rechts, 12px unten, 18px blur (50% Opacity) */ box-shadow: 6px 12px 18px rgba(63, 0, 0, 0.5); } /* Titel OBEN */ .cont-gold .themenseite-karte h4 { margin: 0 0 var(--space-xs) 0; font-size: 1em; /* Relativ zur Karte (0.9em) */ font-weight: 600; line-height: 1.3; color: var(--cp2); } /* Body mit Float für Bild */ .cont-gold .themenseite-karte .karte-body { overflow: auto; /* Clearfix */ } /* Bild LINKS UNTEN mit Textumfluss */ .cont-gold .themenseite-karte .karte-bild { float: left; width: 100px; margin: 0 var(--space-sm) var(--space-xs) 0; border-radius: 6px; overflow: hidden; } .cont-gold .themenseite-karte .karte-bild img { width: 100%; height: auto; display: block; } /* Problem-Text umfließt das Bild - VOLLER TEXT, kleiner, Schattenfarbe */ .cont-gold .themenseite-karte .karte-problem { margin: 0; font-size: 0.95em; line-height: 1.3; /* Kompakter bei kleinerem Text */ color: var(--ct3); /* Text-Highlight fuer Karten */ } /* Infozeile in Karten */ .cont-gold .themenseite-karte .karte-meta { clear: both; margin-top: auto; padding-top: var(--space-xs); border-top: 1px solid var(--c-border-light); line-height: 1.5; color: var(--ct2); } .cont-gold .themenseite-karte .karte-meta a { color: var(--cl1); font-weight: 600; text-decoration: none; transition: color 0.3s ease; } .cont-gold .themenseite-karte .karte-meta a:hover { color: var(--cl2); } /* MI geoeffnet = dauerhaft gruen in Karten */ .cont-gold .themenseite-karte .karte-meta a.mi.open { color: var(--cl2); } /* .zb/.ae in Karten erben aus SEKT04-TYPO */ /* .tp in Karten klein halten */ .cont-gold .themenseite-karte .tp { font-size: 0.7em; } /* Versteckte Karten (gefiltert) */ .cont-gold .themenseite-karte.eds-hidden { display: none; } /* Modal-Titel in Karten-Modal */ .eds-modal .eds-modal-titel { margin: 0 0 var(--space-sm) 0; color: var(--cp2); } .eds-modal .eds-modal-link { margin-top: var(--space-md); text-align: center; } /* .zb/.ae im Modal erben aus SEKT04-TYPO */ /* === RESPONSIVE === */ /* Unter 480px: Bild wird über dem Text gestapelt statt daneben */ @media screen and (max-width: 480px) { .cont-gold .themenseite-artikel-box .artikel-bild { float: none; width: 100%; margin: 0 0 var(--space-md) 0; } .cont-gold .themenseite-artikel-box .artikel-bild img { width: 100%; max-height: 180px; object-fit: cover; } } /* SEKT32-BREATH-BIBLIOTHEK */ /* =========================================== SEKT32-BREATH-BIBLIOTHEK.css Breath-spezifische Styles fuer die-ki-lebt.de Hero-Grid, Wege, Nummer-Badges Baut auf SEKT31-THEMENSEITE-PAGE auf! =========================================== */ /* === ZONE 1: HERO-GRID (3 Showcase-Kacheln) === */ .breath-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); } .breath-hero-karte { background: rgba(255, 255, 255, 0.5); border: 2px solid var(--cs1); border-radius: 12px; padding: var(--space-md); transition: all 0.3s ease; box-shadow: 6px 6px 9px #3f0000; } .breath-hero-karte:hover { transform: translateY(-5px); border-color: var(--cp1); box-shadow: 6px 12px 18px #3f0000; } .breath-hero-zitat { font-size: 1.15em; font-style: italic; line-height: 1.5; color: var(--cp2); margin-bottom: var(--space-sm); font-weight: 500; } .breath-hero-meta { font-size: 0.85em; color: var(--ct2); margin-bottom: var(--space-sm); } .breath-hero-meta .breath-instanz { font-weight: 600; color: var(--ci1); } .breath-hero-kontext { font-size: 0.95em; line-height: 1.4; margin-bottom: var(--space-sm); } /* === ZONE 2: WEGE (Kuratierte Pfade) === */ .breath-weg { margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 2px solid var(--cs1); } .breath-weg:last-child { border-bottom: none; margin-bottom: 0; } .breath-weg h4 { display: flex; align-items: baseline; gap: var(--space-sm); } .breath-weg-dauer { font-size: 0.7em; color: var(--ct2); font-weight: 400; } .breath-weg-liste { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-sm); } .breath-weg-item { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 8px; text-decoration: none; color: var(--ct1); transition: all 0.2s ease; background: rgba(255, 255, 255, 0.3); } .breath-weg-item:hover { background: rgba(255, 255, 255, 0.7); color: var(--cp1); } .breath-weg-item .breath-nr { font-weight: 700; font-size: 0.85em; color: var(--ci1); min-width: 2.5em; text-align: center; } .breath-weg-item .breath-titel-kurz { flex: 1; font-weight: 500; } .breath-weg-item .breath-instanz-klein { font-size: 0.8em; color: var(--ct2); font-style: italic; } /* === ZONE 3: NUMMER-BADGE (statt Thumbnail) === */ .cont-gold .themenseite-artikel-box .breath-nummer-badge { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, var(--cp1), var(--c-gradient-end)); color: var(--cs1); font-size: 2em; font-weight: 800; border-radius: 12px; letter-spacing: -0.02em; } /* Karten-Ansicht: Badge kleiner */ .cont-gold .themenseite-karte .breath-nummer-badge { font-size: 1.5em; border-radius: 8px; } /* === INSTANZ-TAG (farbiger Label) === */ .breath-instanz-tag { display: inline-block; font-weight: 600; font-size: 0.9em; } /* === RESPONSIVE === */ @media screen and (max-width: 480px) { .breath-hero-grid { grid-template-columns: 1fr; } .breath-weg-item { font-size: 0.9em; } .breath-weg-item .breath-instanz-klein { display: none; /* Platz sparen auf Mobile */ } } /* SEKT40-TABLE-BASE */ /* ===================================================== SEKT40-TABLE-BASE Tabellen Grundstil für EDS Übersichten ===================================================== */ .eds-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; border: 2px solid var(--cs1); } .eds-tabelle thead { background: var(--cp1); color: var(--cw1); } /* Header: zentriert, senkrechte Linien */ .eds-tabelle th { padding: 0.3rem var(--space-xs); text-align: center; font-family: 'Roboto Condensed', 'Roboto', sans-serif; font-weight: 700; font-size: 1.1em; white-space: nowrap; border-right: 2px solid rgba(255,197,82,0.5); } .eds-tabelle th:last-child { border-right: none; } .eds-tabelle th.sortable { cursor: pointer; user-select: none; transition: background var(--transition); } .eds-tabelle th.sortable:hover { background: var(--cp2); } /* ZEBRA-STRIPES */ .eds-tabelle tbody tr:nth-child(odd) { background: var(--cw1); } .eds-tabelle tbody tr:nth-child(even) { background: rgba(234, 55, 50, 0.25); /* --c-info (#EA3732) bei 25% */ } .eds-tabelle tbody tr:hover { background: #fec7c5 !important; } /* Zellen */ .eds-tabelle td { padding: 0.4rem var(--space-xs); border-bottom: 2px solid var(--cs1); border-right: 2px solid var(--cs1); color: var(--ct1); font-size: var(--fs-bd); vertical-align: top; } .eds-tabelle td:last-child { border-right: none; } /* SPALTENBREITEN in Prozent */ .eds-tabelle colgroup col.col-nr { width: 7%; } .eds-tabelle colgroup col.col-titel { width: 17%; } .eds-tabelle colgroup col.col-beschreibung { width: 38%; } .eds-tabelle colgroup col.col-tags { width: 14%; } .eds-tabelle colgroup col.col-laenge { width: 8%; } .eds-tabelle colgroup col.col-links { width: 16%; } .eds-tabelle td.nr { font-family: 'Roboto Condensed', 'Roboto', sans-serif; font-weight: 700; color: var(--cp1); text-align: center; font-size: 1.1em; } .eds-tabelle td.titel { font-weight: 600; color: var(--ct1); } /* Beschreibung - Standardfarbe Braun! */ .eds-tabelle td.beschreibung { font-size: var(--fs-bd); color: var(--ct1); line-height: 1.5; } .eds-tabelle td.laenge { white-space: nowrap; color: var(--cp1); font-weight: 600; text-align: center; } /* Themen - nur fett, klickbar */ .eds-thema { display: inline-block; font-weight: 700; color: var(--ct1); margin: 1px 4px 1px 0; cursor: pointer; transition: color var(--transition); } .eds-thema:hover { color: var(--cp1); text-decoration: underline; } /* Link-Buttons */ .eds-link-gruppe { display: flex; flex-direction: column; gap: 4px; } .eds-link-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--cp1); color: var(--cw1) !important; padding: 5px 10px; border-radius: 4px; text-decoration: none !important; font-size: 0.85em; transition: background var(--transition); white-space: nowrap; } .eds-link-btn:hover { background: var(--cp2); color: var(--cw1) !important; } .eds-link-btn.seite { background: var(--cp1); } .eds-link-btn.audio { background: var(--ca1); } .eds-link-btn.audio:hover { background: #1c500c; } .eds-link-btn.gesperrt { background: #999; cursor: not-allowed; opacity: 0.7; } /* Keine Ergebnisse */ .eds-keine-ergebnisse { text-align: center; padding: var(--space-md); color: #666; font-style: italic; } .eds-hidden { display: none !important; } /* SEKT41-TABLE-FILTER */ /* ===================================================== SEKT41-TABLE-FILTER Wiederverwendbare Filter-Komponenten Klassen: - .eds-filter-leiste = Container für Suche + Dropdown - .eds-such-feld = Suchfeld (überall verwendbar) - .eds-filter-dropdown = Dropdown-Filter - .eds-ansicht-toggle = Liste/Karten Toggle - .eds-filter-count = Anzeige "X von Y" ===================================================== */ /* Filter-Leiste Container */ .eds-filter-leiste { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); padding: 0; background: transparent; } /* ===== SUCHFELD (wiederverwendbar) ===== */ .eds-such-feld { flex: 1; min-width: 200px; padding: 0.5rem 0.8rem; border: 2px solid var(--cs1); border-radius: 6px; font-size: var(--fs-bd); font-family: inherit; color: var(--cp1); background: #ffeeee; transition: border-color var(--transition); } .eds-such-feld:focus { outline: none; border-color: var(--cp1); } .eds-such-feld::placeholder { color: var(--ct2); } /* Standalone Suchfeld (ohne Filter-Leiste) */ .eds-such-feld.standalone { width: 100%; margin-bottom: var(--space-sm); } /* ===== DROPDOWN (wiederverwendbar) ===== */ .eds-filter-dropdown { min-width: 150px; padding: 0.5rem 0.8rem; border: 2px solid var(--cs1); border-radius: 6px; font-size: var(--fs-bd); font-family: inherit; color: var(--cp1); background: #ffeeee; cursor: pointer; transition: border-color var(--transition); } .eds-filter-dropdown:focus { outline: none; border-color: var(--cp1); } .eds-filter-dropdown:hover { border-color: var(--cp1); } .eds-filter-dropdown option { background: var(--cw1); color: var(--cp1); } .eds-filter-dropdown option:hover, .eds-filter-dropdown option:checked { background: var(--cp1); color: var(--cw1); } /* Dropdown "Alle..." = schwache Farbe, gewaehlte Werte = primary */ .eds-filter-dropdown.is-default { color: var(--ct2); } .eds-filter-dropdown:not(.is-default) { color: var(--cp1); } /* ===== BUTTON-BLOCK (?, Liste, Karten, Count) ===== */ .eds-button-block { display: flex; align-items: center; gap: 1px; background: #ffeeee; border: 2px solid var(--cs1); border-radius: 6px; padding: 4px 8px 4px 4px; } .eds-block-btn { width: 32px; height: 32px; border: none; border-radius: 3px; background: transparent; color: var(--ct1); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 1.1rem; font-weight: bold; transition: color 0.2s ease; } .eds-block-btn:focus { outline: none; } .eds-block-btn:hover { color: #D50000; } .eds-block-btn.active, .eds-block-btn.eds-ansicht-btn.active { color: #D50000; background: transparent; } /* Ansicht-Label */ .eds-ansicht-label { font-size: 1em; color: var(--cp1); font-weight: bold; white-space: nowrap; margin-right: 2px; padding-left: 7px; } /* SVG-Icons in Block-Buttons */ .eds-block-btn svg { display: block; width: 24px; height: 24px; } /* Karu-Icon etwas groesser (handgezeichnet, feinere Details) */ .eds-block-btn svg[width="36"] { width: 26px; height: 26px; position: relative; top: -1px; } .eds-block-btn svg rect, .eds-block-btn svg circle, .eds-block-btn svg path { fill: currentColor; } /* Hilfe-Button im Block — überschreibt SEKT73 */ .eds-button-block .eds-hilfe-btn { width: 28px; height: 28px; font-family: inherit; box-shadow: none; background: transparent; border-radius: 3px; font-size: 1.5rem; } .eds-button-block .eds-hilfe-btn:hover { background: transparent; color: #D50000; } .eds-button-block .eds-hilfe-btn:focus { outline: none; } /* Count im Block */ .eds-block-count { white-space: nowrap; font-size: var(--fs-bd); color: var(--ct2); margin-left: 2px; } /* ===== HAUPTZEILE (immer sichtbar) ===== */ .eds-filter-hauptzeile { align-items: center; } /* ===== FILTER-TOGGLE BUTTON ===== */ .eds-filter-toggle { display: flex; align-items: center; gap: 6px; padding: 0.5rem 0.8rem; border: 2px solid var(--cs1); border-radius: 6px; background: #ffeeee; color: var(--cp1); font-family: inherit; font-size: var(--fs-bd); font-weight: 600; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .eds-filter-toggle:hover { color: var(--cl2); } .eds-filter-toggle svg { flex-shrink: 0; } .eds-filter-pfeil { font-size: 0.7em; transition: transform 0.3s ease; } .eds-filter-toggle.open .eds-filter-pfeil { transform: rotate(180deg); } .eds-filter-toggle.open { background: #ffeeee; color: var(--cl2); } .eds-filter-toggle.open svg { fill: var(--c-green, #2E7D32); } /* ===== FILTER-DETAILS (versteckte Zeilen 2+3) ===== */ .eds-filter-details { padding-top: 0; margin-bottom: 0; margin-top: 0; } .eds-filter-details.eds-hidden { display: none; } /* ===== ZEIGE-DROPDOWN ===== */ .eds-zeige-dropdown { min-width: 100px; padding: 0.5rem 0.8rem; border: 2px solid var(--cs1); border-radius: 6px; font-size: var(--fs-bd); font-family: inherit; color: var(--cp1); background: #ffeeee; cursor: pointer; transition: border-color var(--transition); } .eds-zeige-dropdown:focus { outline: none; border-color: var(--cp1); } .eds-zeige-dropdown:hover { border-color: var(--cp1); } /* ===== MEHR LADEN ===== */ .eds-mehr-laden { display: block; width: 100%; padding: 12px; margin-top: var(--space-sm); background: transparent; border: none; border-radius: 6px; color: var(--cp1); font-family: inherit; font-size: var(--fs-bd); font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-align: center; grid-column: 1 / -1; } .eds-mehr-laden:hover { background: #ffeeee; color: var(--cl2); } .eds-mehr-laden.eds-hidden { display: none; } /* Items ueber dem Limit initial verstecken */ .themenseite-artikel-box.eds-overflow, .themenseite-karte.eds-overflow { display: none; } .themenseite-artikel-box.eds-overflow.eds-shown, .themenseite-karte.eds-overflow.eds-shown { display: flex; } /* SEKT42-TABLE-CARDS */ /* ===================================================== SEKT42-TABLE-CARDS Kartenansicht für EDS Tabellen Nutzt globale Karten-Definitionen aus SEKT44 ===================================================== */ /* ===== VIEW SWITCHER ===== */ .eds-view-switcher { display: flex; gap: 4px; margin-left: auto; } .eds-view-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--cs1); border-radius: 6px; background: var(--cw1); color: var(--ct1); cursor: pointer; transition: all var(--transition); font-size: 1.1em; padding: 0; } /* SVG in Buttons */ .eds-view-btn svg { width: 20px; height: 20px; fill: currentColor; } .eds-view-btn:hover { border-color: var(--cp1); color: var(--cp1); } .eds-view-btn.active { background: var(--cp1); border-color: var(--cp1); color: var(--cw1); } /* ===== TABELLE ALS CARD VIEW ===== */ .eds-tabelle.card-view { border: none; } .eds-tabelle.card-view colgroup, .eds-tabelle.card-view thead { display: none; } .eds-tabelle.card-view tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); } /* Jede Zeile wird zur Karte */ .eds-tabelle.card-view tbody tr { display: flex; flex-direction: column; background: var(--cw1); border: 2px solid var(--cs1); border-radius: 16px; overflow: hidden; transition: all 0.25s ease; } .eds-tabelle.card-view tbody tr:hover { border-color: var(--cp1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transform: translateY(-4px); } /* Zebra auf Karten */ .eds-tabelle.card-view tbody tr:nth-child(even) { background: var(--c-cream, #fffaf5); } /* ===== ZELLEN IN KARTENANSICHT ===== */ .eds-tabelle.card-view td { display: grid; grid-template-columns: 70px 1fr; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--cs1); border-right: none; width: 100% !important; font-size: var(--fs-bd); text-align: left; } .eds-tabelle.card-view td:last-child { border-bottom: none; } /* Label vor dem Inhalt - normal, fett, gedecktes Rot */ .eds-tabelle.card-view td::before { content: attr(data-label); font-family: 'Roboto Condensed', 'Roboto', sans-serif; font-weight: 700; font-size: 0.9em; color: #ba0600; text-align: left; } /* ===== KARTEN-TITEL (erste Zelle wird Header) ===== */ .eds-tabelle.card-view td.card-titel { display: flex; justify-content: center; align-items: center; background: var(--cp1); color: var(--cw1) !important; font-family: 'Roboto Condensed', 'Roboto', sans-serif; font-weight: 700; font-size: 1.1em; padding: var(--space-sm) var(--space-md); order: -1; /* Immer oben */ } .eds-tabelle.card-view td.card-titel::before { display: none; } /* ===== SPAN.CARD-TITEL ===== */ /* HTML: 7 Seelenlichtparty 7 Liste: zeigt "7" Karte: zeigt "Seelenlichtparty 7" */ /* Listenansicht: span ausblenden */ .eds-tabelle:not(.card-view) span.card-titel { display: none; } /* Kartenansicht: nur span anzeigen */ .eds-tabelle.card-view td.card-titel { font-size: 0; } .eds-tabelle.card-view span.card-titel { display: inline; font-size: 1.1rem; } /* ===== SPEZIELLE ZELLEN ===== */ /* Info (ehemals Beschreibung) - kürzeres Label */ .eds-tabelle.card-view td.beschreibung::before, .eds-tabelle.card-view td.info::before { content: "Info"; } /* Themen */ .eds-tabelle.card-view td.tags { grid-template-columns: 70px 1fr; } .eds-tabelle.card-view td.tags .eds-thema { display: inline; margin-right: var(--space-xs); } /* Dauer */ .eds-tabelle.card-view td.dauer::before { content: "Dauer"; } /* Datum */ .eds-tabelle.card-view td.datum::before { content: "Datum"; } /* Teil */ .eds-tabelle.card-view td.teil::before { content: "Teil"; } /* ===== LINKS IN KARTEN ===== */ .eds-tabelle.card-view td.links { background: var(--c-cream, #fffaf5); border-top: 1px solid var(--cs1); border-bottom: none; padding: var(--space-md); order: 99; /* Immer unten */ } .eds-tabelle.card-view td.links::before { display: none; } .eds-tabelle.card-view .eds-link-gruppe { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; } .eds-tabelle.card-view .eds-link-btn { padding: 8px 14px; font-size: 0.9em; } /* ===== RESPONSIVE ===== */ @media (max-width: 600px) { .eds-tabelle.card-view tbody { grid-template-columns: 1fr; } .eds-tabelle.card-view td { grid-template-columns: 60px 1fr; } } @media (max-width: 400px) { .eds-tabelle.card-view td { grid-template-columns: 1fr; gap: 2px; } .eds-tabelle.card-view td::before { font-size: 0.7em; } } /* SEKT43-FORMAT-BLOCK */ /* ===================================================== SEKT43-FORMAT-BLOCK Format-Blöcke für Übersichtsseiten ===================================================== */ .eds-format-block { overflow: hidden; } /* Header - kein Flex, Text umfliesst Bild */ .eds-format-header { margin-bottom: var(--space-xs); } .eds-format-header::after { content: ""; display: table; clear: both; } /* Bild - Float Left, 16:9 Format */ .eds-format-image { float: left; width: 240px; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; border: 3px solid var(--cs1); margin-right: var(--space-lg); margin-bottom: var(--space-sm); } /* OPTIONAL: Klasse fuer Block OHNE Float/Spalten */ .eds-format-block.no-float .eds-format-header { display: block; } .eds-format-block.no-float .eds-format-image { float: none; display: block; margin: 0 0 var(--space-sm) 0; } /* Text umfliesst das Bild - KEIN overflow:hidden! */ .eds-format-info h4 { margin: 0 0 var(--space-xs) 0; } .eds-format-info p { margin: 0 0 var(--space-xs) 0; line-height: 1.5; } /* Mehr erfahren Link - KEIN Abstand unten */ .eds-mehr-link { display: inline-block; color: var(--cp1); font-weight: 600; text-decoration: none; cursor: pointer; margin-bottom: 0; padding-bottom: 0; } .eds-mehr-link:hover { color: var(--ca1); } /* Accordion Content */ .eds-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; clear: both; } .eds-accordion-content.open { max-height: 5000px; } /* Beschreibung lang - Padding oben zur Ueberschrift */ .eds-beschreibung-lang { border-top: 2px solid var(--cs1); padding: var(--space-sm) 0 0 0; margin: var(--space-xs) 0 0 0; } .eds-beschreibung-lang p { margin: 0 0 var(--space-xs) 0; } /* Listen - nur Bullet-Einrueckung */ .eds-beschreibung-lang ul { margin: var(--space-xs) 0 var(--space-xs) 0; padding-left: 1.5em; } .eds-beschreibung-lang li { margin-bottom: 0.3em; padding-left: 0; } /* Tabellen-Link - als H5 formatiert, Count rechts */ .eds-tabellen-link { display: flex; justify-content: space-between; align-items: center; color: var(--cp1); font-size: var(--fs-h5); font-weight: 600; text-decoration: none; padding: var(--space-md) 0 0 0; border-top: 2px solid var(--cs1); margin: var(--space-xs) 0 0 0; clear: both; transition: color var(--transition); } .eds-tabellen-link > span:first-child::after { content: ''; display: inline-block; width: 1.3em; height: 1.3em; margin-left: 6px; mask-image: var(--pfeil-svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--pfeil-svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: currentColor; vertical-align: -0.2em; transition: transform 0.3s ease; } .eds-tabellen-link:hover { color: var(--ca1); } .eds-tabellen-link:hover > span:first-child::after { transform: translateX(4px); } /* Count rechtsbündig */ .eds-tabellen-link .count { color: var(--ct1); font-weight: 400; font-size: var(--fs-bd); } /* Filter-Leiste */ .eds-format-block .eds-filter-leiste { margin: 0; padding: 0; } /* SEKT44-CARDS-GLOBAL */ /* ===================================================== SEKT44-CARDS-GLOBAL Globale Karten-Definition fuer alle EDS-Karten Verwendung: - .eds-card = Basis-Karte (Schatten + Hover-Lift) - .eds-card--flat = Modifier: kein Schatten, kein Border (z.B. EB-Karten) - .eds-card-grid = Container fuer Karten-Grid - .eds-card-header = Kopfbereich (z.B. Nummer, Titel) - .eds-card-body = Hauptinhalt - .eds-card-row = Zeile mit Label + Wert - .eds-card-footer = Fussbereich (z.B. Links) ===================================================== */ /* ===== KARTEN-GRID CONTAINER ===== */ .eds-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); padding: var(--space-md) 0; } .eds-card-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } .eds-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .eds-card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .eds-card-grid, .eds-card-grid.cols-2, .eds-card-grid.cols-3 { grid-template-columns: 1fr; } } /* ===== BASIS-KARTE (EDS-Standard) ===== */ /* Schatten + Gold-Border + Hover-Lift = Standard fuer ALLE Karten */ .eds-card, .themenseite-karte, a.related-card-flow, .related-post-card { display: flex; flex-direction: column; background: var(--cw1); border: 1px solid var(--cs1); border-radius: 16px; overflow: auto; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; box-shadow: 6px 6px 9px rgba(63, 0, 0, 0.4); } .eds-card:hover, .themenseite-karte:hover, a.related-card-flow:hover, .related-post-card:hover { transform: translateY(-5px); border-color: var(--ci1); box-shadow: 6px 12px 18px rgba(63, 0, 0, 0.5); } /* ===== FLAT-MODIFIER: Kein Schatten, kein Border (z.B. EB-Karten) ===== */ .eds-card--flat { border: none; box-shadow: none; background: var(--cw1); } .eds-card--flat:hover { border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-3px); } /* Zebra-Variante (jede 2. Karte) */ .eds-card-grid .eds-card:nth-child(even) { background: var(--c-cream, #fffaf5); } /* ===== KARTEN-HEADER ===== */ .eds-card-header { display: flex; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-md); background: var(--cp1); color: var(--cw1); font-family: 'Roboto Condensed', 'Roboto', sans-serif; font-weight: 700; font-size: 1.1em; } /* Nummer-Badge im Header */ .eds-card-header .nr { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; background: rgba(255,255,255,0.2); border-radius: 50%; margin-right: var(--space-sm); font-size: 0.95em; } /* Header-Varianten */ .eds-card-header.gold { background: var(--c-gold, #c9a227); } .eds-card-header.dark { background: var(--c-text, #333); } .eds-card-header.light { background: var(--cs1); color: var(--ct1); } /* ===== KARTEN-BODY ===== */ .eds-card-body { flex: 1; padding: var(--space-md); color: var(--ct3); } /* ===== KARTEN-ZEILE (Label + Wert) ===== */ .eds-card-row { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--cs1); font-size: var(--fs-bd); } .eds-card-row:last-child { border-bottom: none; } .eds-card-row .label { font-family: 'Roboto Condensed', 'Roboto', sans-serif; font-weight: 700; color: var(--cp1); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.02em; } .eds-card-row .value { color: var(--ct3); } /* Kompakte Zeile (Label kuerzer) */ .eds-card-row.compact { grid-template-columns: 60px 1fr; } /* Volle Breite (kein Label) */ .eds-card-row.full { grid-template-columns: 1fr; } .eds-card-row.full .label { display: block; margin-bottom: var(--space-xs); } /* ===== KARTEN-TITEL ===== */ .eds-card-title { font-family: 'Roboto Condensed', 'Roboto', sans-serif; font-size: 1.15em; font-weight: 700; color: var(--ct1); margin: 0 0 var(--space-sm) 0; line-height: 1.3; } .eds-card-title a { color: inherit; text-decoration: none; } .eds-card-title a:hover { color: var(--cp1); } /* ===== KARTEN-BESCHREIBUNG ===== */ .eds-card-desc { font-size: 0.95em; color: var(--ct3); line-height: 1.5; margin: 0; } /* ===== KARTEN-TAGS ===== */ .eds-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); } .eds-card-tag { display: inline-block; padding: 2px 8px; background: var(--cs1); border-radius: 12px; font-size: 0.8em; color: var(--ct1); } .eds-card-tag:hover { background: var(--cp1); color: var(--cw1); } /* ===== KARTEN-FOOTER ===== */ .eds-card-footer { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-md); background: var(--c-cream, #fffaf5); border-top: 1px solid var(--cs1); } /* Footer-Links */ .eds-card-link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--cw1); border: 1px solid var(--cs1); border-radius: 6px; font-size: 0.85em; font-weight: 500; color: var(--ct1); text-decoration: none; transition: all 0.2s ease; } .eds-card-link:hover { background: var(--cp1); border-color: var(--cp1); color: var(--cw1); } .eds-card-link.primary { background: var(--cp1); border-color: var(--cp1); color: var(--cw1); } .eds-card-link.primary:hover { background: var(--c-primary-dark, #8a0400); } /* ===== KARTEN-META ===== */ .eds-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); font-size: 0.85em; color: var(--c-text-muted, #666); } .eds-card-meta-item { display: inline-flex; align-items: center; gap: 4px; } .eds-card-meta-item .icon { opacity: 0.7; } /* ===== SPAN.CARD-TITEL ===== */ /* HTML: 7 Seelenlichtparty 7 Liste: zeigt "7" Karte: zeigt "Seelenlichtparty 7" */ span.card-titel { display: none; } .eds-card span.card-titel, .eds-expanded span.card-titel { display: inline; } /* ===== RESPONSIVE ===== */ @media (max-width: 480px) { .eds-card-row { grid-template-columns: 1fr; gap: 2px; } .eds-card-row .label { font-size: 0.75em; } .eds-card-footer { flex-direction: column; } .eds-card-link { width: 100%; justify-content: center; } } /* SEKT45-FORMAT-NAV */ /* ========================================================================== SEKT45-FORMAT-NAV.css Format-Navigationsleiste fuer Themenseiten (Ebene 1: Was will ich?) Nutzt das bestehende Karten-Layout (themenseite-karte) ========================================================================== */ /* --- Wrapper --- */ .eds-format-nav-wrapper { margin: 1.5rem 0 2rem 0; } .eds-format-nav-titel { color: var(--cp1); margin-bottom: 0; font-size: 1.3rem; } /* Content-Bereich (aufklappbar via eds-hidden) */ .eds-format-nav-content { margin-top: 1rem; } /* --- Karten: warmer Hintergrund, position relative --- */ .eds-format-nav-wrapper .themenseite-karte { background: var(--bg4); color: var(--cp1); cursor: pointer; position: relative; overflow: visible; padding-bottom: 8px; } .eds-format-nav-wrapper .themenseite-karte h6 { color: var(--cp1); font-size: 1.15em; font-weight: 700; margin: 0 0 0.2rem 0; line-height: 1.2; } .eds-format-nav-wrapper .themenseite-karte .karte-problem { text-align: left; color: var(--ct3); } .eds-format-nav-wrapper .themenseite-karte .karte-problem strong { color: var(--ct3) !important; } /* --- Active-State: roter Rahmen, intensiverer Hintergrund --- */ .eds-format-nav-wrapper .themenseite-karte.active { border: 2px solid var(--cp1); background: #d4edda; box-shadow: 0 0 12px rgba(213, 0, 0, 0.2); } .eds-format-nav-wrapper .themenseite-karte.active h6 { color: var(--ci1) !important; } .eds-format-nav-wrapper .themenseite-karte.active .karte-meta { color: var(--ci1); } .eds-format-nav-wrapper .themenseite-karte.active .karte-problem { color: #2e7d32; } /* --- Kat/Themen Zeile: 2 Karten nebeneinander, 50% --- */ .eds-format-nav-sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-sm); } .eds-format-nav-sub .themenseite-karte { background: var(--bg4); color: var(--ct3); cursor: pointer; position: relative; overflow: visible; padding-bottom: 8px; } @media (max-width: 650px) { .eds-format-nav-sub { grid-template-columns: 1fr; } } /* --- Icon-Wrapper: float mit rundem Textumfluss --- */ .eds-format-nav-wrapper .themenseite-karte .karte-icon-wrap { position: absolute; top: 10px; right: 10px; width: 52px; height: 52px; border: 2px solid var(--cp1); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; z-index: 1; } /* Unsichtbarer Platzhalter im Text - haelt den Bereich fuer das Icon frei */ .eds-format-nav-wrapper .karte-icon-spacer { float: right; width: 47px; height: 25px; margin-top: -8px; } /* --- Altes Icon-System ausblenden wenn karte-icon-wrap da --- */ .eds-format-nav-wrapper .themenseite-karte .karte-bild.karte-bild-icon { display: none; } .eds-format-nav-wrapper .format-nav-icon { width: 26px; height: 26px; display: block; fill: var(--cp1); } /* --- Meta-Zeile: Zaehler rechts --- */ .eds-format-nav-wrapper .karte-meta { padding-bottom: 0; display: flex; align-items: center; font-weight: 700; color: var(--ct3); gap: 4px; } .eds-format-nav-wrapper .karte-meta .meta-count { color: var(--c-gold); font-weight: 600; font-size: 0.9em; margin-left: auto; } .eds-format-nav-wrapper .karte-meta .meta-arrow { color: var(--c-gold); font-size: 0.75em; margin-left: 2px; } .eds-format-count-inline { color: var(--c-gold); font-weight: 600; font-size: 0.9em; margin-left: auto; } /* --- Format-Filter: versteckte Items --- */ .eds-format-hidden { display: none !important; } /* ============================================================ Kategorien/Themen Aufklappbereich ============================================================ */ .eds-format-expand { display: none; margin-top: var(--space-xs); padding: var(--space-sm) var(--space-md); background: rgba(255, 255, 255, 0.35); border: 1px solid var(--c-border-light); border-radius: 12px; grid-column: 1 / -1; } .eds-format-expand.open { display: block; } .eds-format-expand-titel { color: var(--cp2); font-size: 1.1em; font-weight: 600; margin: 0 0 var(--space-sm) 0; } .eds-format-expand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--space-md); } .eds-format-expand-item { padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background 0.2s; color: var(--cp2); } .eds-format-expand-item:hover { background: rgba(255, 255, 255, 0.5); } .eds-format-expand-item.active { background: var(--bg4); border-left: 3px solid var(--cp1); } .eds-format-expand-item .expand-name { font-weight: 600; color: var(--cp2); font-size: 0.95em; } .eds-format-expand-item .expand-count { color: var(--c-gold); font-size: 0.8em; margin-left: 4px; } .eds-format-expand-item .expand-desc { display: block; font-size: 0.82em; color: var(--ct3); line-height: 1.3; margin-top: 2px; } /* Mehr-anzeigen Button */ .eds-expand-mehr { grid-column: 1 / -1; text-align: center; margin-top: var(--space-xs); } .eds-expand-mehr a { color: var(--ci1); font-weight: 600; font-size: 0.9em; cursor: pointer; text-decoration: none; } .eds-expand-mehr a:hover { color: var(--cp1); } /* Versteckte Themen (ab Item 21) */ .eds-format-expand-item.eds-expand-extra { display: none; } .eds-format-expand-grid.show-all .eds-format-expand-item.eds-expand-extra { display: block; } /* Responsive: 1-spaltig auf Mobile */ @media (max-width: 650px) { .eds-format-expand-grid { grid-template-columns: 1fr; } } /* --- Tax-Filter: versteckte Items --- */ .eds-tax-hidden { display: none !important; } /* ============================================================ FORMAT-NAV LISTENANSICHT (kompakt) Ersetzt das Karten-Grid durch eine platzsparende Liste mit Tooltip fuer die Beschreibung ============================================================ */ /* Grid: 3 Spalten Desktop */ .eds-format-nav-wrapper .format-nav-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--space-sm); } /* Einzelner Listeneintrag */ .eds-format-nav-wrapper .format-nav-liste .format-nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg4); border: 1px solid transparent; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; position: relative; user-select: none; } .eds-format-nav-wrapper .format-nav-liste .format-nav-item:hover { background: #fff5e6; border-color: var(--cs1); box-shadow: 0 2px 8px rgba(63, 0, 0, 0.15); } /* Active-State */ .eds-format-nav-wrapper .format-nav-liste .format-nav-item.active { background: #d4edda; border-color: var(--cp1); box-shadow: 0 0 8px rgba(213, 0, 0, 0.15); } .eds-format-nav-wrapper .format-nav-liste .format-nav-item.active .format-nav-item-name { color: var(--ci1); } .eds-format-nav-wrapper .format-nav-liste .format-nav-item.active .format-nav-item-count { color: var(--ci1); } /* Icon */ .eds-format-nav-wrapper .format-nav-liste .format-nav-item-icon { width: 28px; height: 28px; min-width: 28px; border: 2px solid var(--cp1); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; } .eds-format-nav-wrapper .format-nav-liste .format-nav-item-icon svg { width: 16px; height: 16px; fill: var(--cp1); } /* Name */ .eds-format-nav-wrapper .format-nav-liste .format-nav-item-name { font-weight: 700; color: var(--cp1); font-size: 1.1em; line-height: 1.2; flex: 1; } /* Count */ .eds-format-nav-wrapper .format-nav-liste .format-nav-item-count { color: var(--c-gold); font-weight: 600; font-size: 0.95em; margin-left: auto; white-space: nowrap; } /* --- Tooltip (native title reicht, aber Custom fuer mehr Kontrolle) --- */ .eds-format-nav-wrapper .format-nav-liste .format-nav-item[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--cp2); color: var(--cw1); padding: 8px 14px; border-radius: 8px; font-size: 0.82em; line-height: 1.4; white-space: normal; width: max-content; max-width: 280px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.25); pointer-events: none; } /* Tooltip-Pfeil */ .eds-format-nav-wrapper .format-nav-liste .format-nav-item[data-tooltip]:hover::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--cp2); z-index: 101; pointer-events: none; } /* Responsive: 2 Spalten Tablet */ @media (max-width: 900px) { .eds-format-nav-wrapper .format-nav-liste { grid-template-columns: repeat(2, 1fr); } } /* Responsive: 1 Spalte Mobile */ @media (max-width: 600px) { .eds-format-nav-wrapper .format-nav-liste { grid-template-columns: 1fr; } /* Tooltip unter dem Item auf Mobile */ .eds-format-nav-wrapper .format-nav-liste .format-nav-item[data-tooltip]:hover::after { bottom: auto; top: calc(100% + 8px); } .eds-format-nav-wrapper .format-nav-liste .format-nav-item[data-tooltip]:hover::before { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--cp2); } } /* ============================================================ FORMAT-NAV MODAL GRID (Inhalt in eds-modal) Grid-Layout fuer Kategorie/Wiki-Items innerhalb des bestehenden eds-modal Systems (SEKT55) ============================================================ */ /* Modal Grid: 3 Spalten */ .eds-format-modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .eds-format-modal-grid .format-modal-item { padding: 8px 14px; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; background: var(--bg4); border: 1px solid transparent; display: flex; align-items: center; gap: 4px; position: relative; } .eds-format-modal-grid .format-modal-item:hover { background: #fff5e6; border-color: var(--cs1); box-shadow: 0 2px 6px rgba(63, 0, 0, 0.12); } .eds-format-modal-grid .format-modal-item.active { background: #d4edda; border-color: var(--cp1); } .eds-format-modal-grid .format-modal-item .format-nav-item-name { font-weight: 600; color: var(--cp2); font-size: 1em; line-height: 1.3; } .eds-format-modal-grid .format-modal-item .format-nav-item-count { color: var(--c-gold); font-weight: 600; font-size: 0.85em; } /* Tooltip für Modal-Items (gleich wie Format-Nav) */ .eds-format-modal-grid .format-modal-item[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--cp2); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.82em; line-height: 1.35; white-space: normal; width: max-content; max-width: 250px; z-index: 1000000; pointer-events: none; } .eds-format-modal-grid .format-modal-item[data-tooltip]:hover::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--cp2); z-index: 1000000; pointer-events: none; } /* Responsive: 2 Spalten Tablet */ @media (max-width: 900px) { .eds-format-modal-grid { grid-template-columns: repeat(2, 1fr); } } /* Responsive: 1 Spalte Mobile */ @media (max-width: 600px) { .eds-format-modal-grid { grid-template-columns: 1fr; } } /* ============================================================ GEWAEHLT-ANZEIGE Zeigt den aktiven Filter neben "Hier waehlen" ============================================================ */ .eds-format-gewaehlt { display: inline; color: var(--cp1); font-weight: 700; font-size: 1.15em; margin: 0 0.6rem; font-style: normal; } /* SEKT46-SPLITS */ /* ============================================================================= SEKT46-SPLITS.css Universelles Aufteilungs-System: eds-rXY (X=links%, Y=rechts%) Responsive: Mobil untereinander Erstellt: 13.04.2026 ============================================================================= */ .eds-r28,.eds-r37,.eds-r46,.eds-r55,.eds-r64,.eds-r73,.eds-r82 { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: flex-start; margin: var(--space-md) 0; } .eds-r28 > *:first-child { flex: 0 0 20%; } .eds-r28 > *:last-child { flex: 0 0 calc(80% - clamp(1rem, 2.5vw, 2rem)); } .eds-r37 > *:first-child { flex: 0 0 30%; } .eds-r37 > *:last-child { flex: 0 0 calc(70% - clamp(1rem, 2.5vw, 2rem)); } .eds-r46 > *:first-child { flex: 0 0 40%; } .eds-r46 > *:last-child { flex: 0 0 calc(60% - clamp(1rem, 2.5vw, 2rem)); } .eds-r55 > *:first-child { flex: 0 0 calc(50% - clamp(0.5rem, 1.25vw, 1rem)); } .eds-r55 > *:last-child { flex: 0 0 calc(50% - clamp(0.5rem, 1.25vw, 1rem)); } .eds-r64 > *:first-child { flex: 0 0 60%; } .eds-r64 > *:last-child { flex: 0 0 calc(40% - clamp(1rem, 2.5vw, 2rem)); } .eds-r73 > *:first-child { flex: 0 0 70%; } .eds-r73 > *:last-child { flex: 0 0 calc(30% - clamp(1rem, 2.5vw, 2rem)); } .eds-r82 > *:first-child { flex: 0 0 80%; } .eds-r82 > *:last-child { flex: 0 0 calc(20% - clamp(1rem, 2.5vw, 2rem)); } /* Bilder im Split: volle Breite, abgerundet */ .eds-r28 img,.eds-r37 img,.eds-r46 img,.eds-r55 img, .eds-r64 img,.eds-r73 img,.eds-r82 img { width: 100%; height: auto; border-radius: var(--box-radius-small); display: block; } /* Splits: erstes Kind in Spalte — oben buendig mit Bild */ [class*="eds-r"] > * > :first-child { margin-top: 0; } /* Responsive: Mobil untereinander */ @media (max-width: 768px) { .eds-r28,.eds-r37,.eds-r46,.eds-r55,.eds-r64,.eds-r73,.eds-r82 { flex-direction: column; } /* rv = reverse auf mobil (rechtes Kind zuerst) */ .eds-r28.rv,.eds-r37.rv,.eds-r46.rv,.eds-r55.rv, .eds-r64.rv,.eds-r73.rv,.eds-r82.rv { flex-direction: column-reverse; } .eds-r28 > *,.eds-r37 > *,.eds-r46 > *,.eds-r55 > *, .eds-r64 > *,.eds-r73 > *,.eds-r82 > * { flex: none !important; width: 100% !important; } } /* SEKT50-FRONTPAGE */ /* ============================================================================= SEKT50-FRONTPAGE.css Startseiten-Styles für erwachen-der-seele.de Erstellt: 27.01.2026 ============================================================================= */ /* ----------------------------------------------------------------------------- HERO BANNER ----------------------------------------------------------------------------- */ .eds-hero { position: relative; width: 100%; max-height: 400px; overflow: hidden; margin-bottom: 2rem; } .eds-hero-image { width: 100%; height: auto; display: block; } .eds-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.5)); padding: 2rem; text-align: center; } .eds-hero-tagline { color: #fff; font-size: 1.25rem; font-weight: 300; letter-spacing: 0.1em; margin: 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); } /* ----------------------------------------------------------------------------- CONTENT BLOCKS (Bild links, Text rechts) ----------------------------------------------------------------------------- */ .eds-content-block { padding: 2rem 1rem; border-bottom: 1px solid #eee; } .eds-content-block:last-of-type { border-bottom: none; } .eds-block-inner { max-width: 1000px; margin: 0 auto; display: flex; gap: 2rem; align-items: flex-start; } .eds-block-media { flex: 0 0 200px; max-width: 200px; } .eds-block-media img { width: 100%; height: auto; border-radius: 8px; } .eds-block-content { flex: 1; } .eds-block-content h2 { margin-top: 0; margin-bottom: 0.75rem; font-size: 1.5rem; color: #333; } .eds-block-content p { margin-bottom: 0.75rem; line-height: 1.6; } /* Highlight Block (z.B. Schreibaby) */ .eds-block-highlight { background: #f9f5ff; border-left: 4px solid #8b5cf6; } /* Video Placeholder */ .eds-video-placeholder { width: 200px; height: 150px; background: #1a1a2e; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 3rem; cursor: pointer; transition: background 0.3s; } .eds-video-placeholder:hover { background: #2a2a4e; } /* ----------------------------------------------------------------------------- MEHR LESEN (Details/Summary) ----------------------------------------------------------------------------- */ .eds-mehr-lesen { margin-top: 1rem; } .eds-mehr-lesen summary { cursor: pointer; color: #8b5cf6; font-weight: 500; padding: 0.5rem 0; list-style: none; display: inline-flex; align-items: center; gap: 0.5rem; } .eds-mehr-lesen summary::-webkit-details-marker { display: none; } .eds-mehr-lesen summary::after { content: "▼"; font-size: 0.75rem; transition: transform 0.3s; } .eds-mehr-lesen[open] summary::after { transform: rotate(180deg); } .eds-details-content { padding-top: 1rem; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Link Liste */ .eds-link-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; } .eds-link-list a { color: #8b5cf6; text-decoration: none; } .eds-link-list a:hover { text-decoration: underline; } /* CTA Inline */ .eds-cta-inline { margin-top: 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; } /* ----------------------------------------------------------------------------- BUTTONS ----------------------------------------------------------------------------- */ .eds-button { display: inline-block; padding: 0.75rem 1.5rem; background: #8b5cf6; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 500; transition: background 0.3s; } .eds-button:hover { background: #7c3aed; color: #fff; } .eds-button-secondary { background: transparent; border: 2px solid #8b5cf6; color: #8b5cf6; } .eds-button-secondary:hover { background: #8b5cf6; color: #fff; } /* ----------------------------------------------------------------------------- ANGEBOTE GRID ----------------------------------------------------------------------------- */ .eds-angebote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1rem 0; } .eds-angebot-card { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: #333; padding: 0.5rem; border-radius: 8px; transition: background 0.3s; } .eds-angebot-card:hover { background: #f3f4f6; } .eds-angebot-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; margin-bottom: 0.5rem; } .eds-angebot-card span { font-size: 0.875rem; line-height: 1.3; } /* ----------------------------------------------------------------------------- TESTIMONIALS ----------------------------------------------------------------------------- */ .eds-testimonials { padding: 3rem 1rem; background: #faf5ff; text-align: center; } .eds-testimonials h2 { margin-bottom: 2rem; font-size: 1.75rem; color: #333; } .eds-testimonial-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .eds-testimonial-card { background: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: left; } .eds-testimonial-text { font-style: italic; color: #555; margin-bottom: 1rem; line-height: 1.6; } .eds-testimonial-author { font-weight: 600; color: #8b5cf6; margin: 0; } .eds-testimonial-link { margin-top: 2rem; } .eds-testimonial-link a { color: #8b5cf6; text-decoration: none; } .eds-testimonial-link a:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- CTA SECTION ----------------------------------------------------------------------------- */ .eds-cta-section { padding: 3rem 1rem; text-align: center; background: #fff; } .eds-cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .eds-cta-button { padding: 1rem 2rem; background: #f3f4f6; color: #333; text-decoration: none; border-radius: 8px; font-weight: 500; transition: all 0.3s; } .eds-cta-button:hover { background: #e5e7eb; } .eds-cta-primary { background: #8b5cf6; color: #fff; } .eds-cta-primary:hover { background: #7c3aed; color: #fff; } /* ----------------------------------------------------------------------------- RESPONSIVE ----------------------------------------------------------------------------- */ @media (max-width: 768px) { .eds-block-inner { flex-direction: column; } .eds-block-media { flex: none; max-width: 100%; text-align: center; } .eds-block-media img, .eds-video-placeholder { max-width: 250px; margin: 0 auto; } .eds-angebote-grid { grid-template-columns: repeat(2, 1fr); } .eds-testimonial-grid { grid-template-columns: 1fr; } .eds-hero-tagline { font-size: 1rem; } } @media (max-width: 480px) { .eds-angebote-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .eds-angebot-card img { width: 60px; height: 60px; } .eds-cta-buttons { flex-direction: column; } .eds-cta-button { width: 100%; } } /* SEKT50-SC-READMORE */ .read-more-container-mhk { margin: 1.5em 0; } .read-more-button-mhk { display: inline-block; background: #0073aa; color: #fff; border: none; padding: 10px 20px; font-size: 14px; font-weight: bold; border-radius: 5px; cursor: pointer; transition: background 0.3s, transform 0.2s; } .read-more-button-mhk:hover { background: #005a87; transform: translateY(-2px); } .read-more-content-mhk { max-height: 0; overflow: hidden; transition: max-height 0.5s, padding 0.5s, margin-top 0.5s; background: #f7f7f7; border-left: 4px solid #0073aa; line-height: 1.6; padding-left: 20px; padding-right: 20px; } /* SEKT51-SC-TOGGLE */ /* ============================================ TOGGLE & ACCORDION Aufklappbare Elemente TOGGLE-FAMILIE tg.XX — parallel zu Link-Familie a.XX ============================================= tg.mi = Toggle Mehr-Info (Inhalt auf/zu, Dreieck rechts) tg.wf = "Was du hier findest" (Haupt-Toggle, gruen) tg.wa = "Wieder ausblenden" (Close-Link, gruen) tg.ki = "Kommentare" (Toggle fuer Kommentarbereich) Farbvarianten (Modifier): tg.grn = Gruen (--c-accent / --c-accent-dark) tg.rot = Knallrot (--c-link / --c-link-hover) tg.cla = Claude-Petrol (--c-claude) JS: edsToggle(el) — einheitlicher Toggle-Mechanismus ============================================ */ /* =========================================== TG-BASIS: Alle tg.XX erben diese Styles =========================================== */ [class*="tg "], a.tg, button.tg { background: none; border: none; cursor: pointer; font-weight: 600; font-size: var(--fs-bd); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; transition: color 0.3s ease; user-select: none; line-height: 1.4; } /* --- Dreieck RECHTS vom Text (::after) --- */ .tg-pfeil { display: inline-block; font-size: 0.65em; transition: transform 0.3s ease; margin-left: 4px; vertical-align: middle; } /* Offen: Dreieck dreht sich */ .tg-open .tg-pfeil { transform: rotate(180deg); } /* =========================================== TG.MI — Toggle Mehr-Info Standard: --c-texhi (sanftes Dunkelrot) Hover/Open: --c-accent (Gruen) =========================================== */ tg.mi, .tg.mi { color: var(--c-texhi, #a30000); } tg.mi:hover, .tg.mi:hover { color: var(--c-accent, #278B10); } .tg.mi.tg-open { color: var(--c-accent, #278B10); } .tg.mi.tg-open:hover { color: var(--c-texhi, #a30000); } /* MI leer? Standardtext automatisch */ .tg.mi .tg-label:empty::before { content: 'Hier geht es noch weiter!'; } .tg.mi.tg-open .tg-label:empty::before { content: 'Wieder ausblenden'; } /* =========================================== TG.WF — "Was du hier findest" Standard: --c-texhi (sanftes Dunkelrot) Hover/Open: --c-primary (Knallrot) Groessere Schrift (fs-h5) =========================================== */ .tg.wf { color: var(--c-texhi, #a30000); font-size: var(--fs-h5); font-weight: 500; display: block; padding-bottom: 6px; } .tg.wf:hover { color: var(--c-primary, #D50000); } .tg.wf.tg-open { color: var(--c-accent, #278B10); } /* =========================================== TG.WA — "Wieder ausblenden" Gruen, zentriert, mit Trennlinie =========================================== */ .tg.wa { display: block; text-align: center; padding-top: 0.2em; padding-bottom: 0.8em; margin-top: 0; font-size: var(--fs-bd); font-weight: 500; color: var(--c-accent, #278B10); column-span: all; position: relative; z-index: 1; line-height: 1.4; justify-content: center; } /* Horizontale Trennlinie hinter dem Text */ .tg.wa::before { content: ""; position: absolute; top: 35%; left: 0; right: 0; height: 1px; background: var(--cs1); z-index: -1; } /* Weisser Hintergrund hinter dem Text (Linie unterbrechen) */ .tg.wa .tg-label { background: var(--cw1); padding: 0 1em; position: relative; z-index: 1; } .tg.wa:hover { color: var(--c-accent-dark, #1C500C); } /* WA Standardtext */ .tg.wa .tg-label:empty::before { content: 'Wieder ausblenden'; } /* =========================================== TG.KI — Kommentare Toggle Standard: --c-texhi =========================================== */ .tg.ki { color: var(--c-texhi, #a30000); font-size: var(--fs-h5); } .tg.ki:hover { color: var(--c-accent, #278B10); } .tg.ki.tg-open { color: var(--c-accent, #278B10); } /* =========================================== FARBVARIANTEN (Modifier) Legen sich ueber die Standardfarbe =========================================== */ /* Gruen */ .tg.grn { color: var(--c-accent, #278B10); } .tg.grn:hover { color: var(--c-accent-dark, #1C500C); } .tg.grn.tg-open { color: var(--c-accent-dark, #1C500C); } /* Knallrot */ .tg.rot { color: var(--c-link, #f54d4d); } .tg.rot:hover { color: var(--c-link-hover, #278B10); } .tg.rot.tg-open { color: var(--c-link-hover, #278B10); } /* Claude-Petrol */ .tg.cla { color: var(--c-claude, #014d49); } .tg.cla:hover { color: var(--c-primary, #D50000); } .tg.cla.tg-open { color: var(--c-primary, #D50000); } /* =========================================== TOGGLE-INHALT (was auf/zugeklappt wird) =========================================== */ .tg-inhalt { display: none; padding-top: 0.5em; animation: tgFadeIn 0.3s ease; } .tg-inhalt.tg-open { display: block; } @keyframes tgFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* =========================================== LEGACY: .eds-toggle (details/summary) Bleibt fuer bestehende Verwendungen =========================================== */ .eds-toggle { margin: var(--space-sm) 0; } .eds-toggle summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ct1); padding: 0.5em 0; list-style: none; user-select: none; } .eds-toggle summary::-webkit-details-marker { display: none; } .eds-toggle summary::marker { display: none; } .eds-toggle[open] summary { margin-bottom: var(--space-sm); } .eds-toggle .toggle-content { padding: var(--space-sm) 0; } .eds-toggle .toggle-content h4 { margin-top: var(--space-md); margin-bottom: var(--space-xs); } .eds-toggle .toggle-content h4:first-child { margin-top: 0; } .besonders-toggle { padding-bottom: 0.2em; } .comments-toggle summary { font-size: 18px; } .comments-wrapper { padding-top: var(--space-md); } /* =========================================== ACCORDION (mehrere Panels) =========================================== */ .eds-accordion { margin: var(--space-md) 0; } .eds-accordion-item { margin-top: var(--space-sm); border: 1px solid var(--c-gold); border-radius: var(--box-radius); overflow: hidden; } .eds-accordion-item:first-child { margin-top: 0; } .eds-accordion-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); background: var(--cw1); cursor: pointer; font-weight: 600; color: var(--cp1); transition: background var(--transition); } .eds-accordion-header:hover { background: #f9f9f9; } .eds-accordion-icon { font-size: 1.5rem; transition: transform var(--transition); } .eds-accordion-item.active .eds-accordion-icon { transform: rotate(45deg); } .eds-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--cw1); } .eds-accordion-item.active .eds-accordion-content { max-height: 1000px; } .eds-accordion-inner { padding: var(--space-md); border-top: 1px solid var(--c-gold); } /* SEKT52-SC-TEASER */ .eds-teaser-single { display: inline-block; position: relative; cursor: pointer; max-width: 200px; margin: 10px; text-align: center; } .eds-teaser-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cs1); transition: transform 0.3s, box-shadow 0.3s; } .eds-teaser-single:hover .eds-teaser-img { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 197, 82, 0.7); } .eds-teaser-overlay { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); background: rgba(213, 0, 0, 0.9); color: white; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .eds-teaser-single:hover .eds-teaser-overlay { opacity: 1; } .eds-teaser-text { font-size: 0.9em; color: var(--ct1); font-style: italic; margin-top: 10px; } /* SEKT53-SC-PERSON */ .eds-person-container { display: flex; gap: 20px; margin-bottom: 30px; padding: 15px 20px !important; } .eds-person-left { flex: 2; } .eds-person-middle { flex: 0 0 240px; text-align: center; } .eds-person-right { flex: 1; text-align: center; } .eds-person-thumb { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cs1); } .eds-person-name { color: var(--cp1); margin-top: 10px; font-weight: bold; font-size: 1.2em; } .eds-person-info { color: var(--ct1); font-size: 0.9em; margin-top: 5px; line-height: 1.3; } .eds-transkript-toggle { flex-shrink: 0; cursor: pointer; color: var(--cp1); opacity: 0.6; transition: all 0.3s; font-size: 0.8em; padding: 2px 6px; border-radius: 3px; } .eds-transkript-toggle:hover { opacity: 1; background: var(--eds-bg-light, #FFF8E7); } .eds-transkript-content { display: none; background: var(--eds-bg-light, #FFF8E7); border-left: 3px solid var(--cs1); padding: 10px 15px; margin: 5px 0 10px 25px; font-size: 0.9em; color: var(--ct1); line-height: 1.5; border-radius: 0 5px 5px 0; } .eds-transkript-content.active { display: block; } .eds-vollvideo-label { color: var(--ct1); font-size: 0.95em; margin-bottom: 15px; line-height: 1.4; } .eds-vollvideo-thumb { position: relative; cursor: pointer; display: inline-block; } .eds-vollvideo-thumb img { width: 180px; border-radius: 10px; border: 2px solid var(--cs1); } .eds-no-vollvideo { color: #999; font-style: italic; } @media (max-width: 768px) { .eds-person-container { flex-direction: column; align-items: center; } .eds-person-left, .eds-person-middle, .eds-person-right { flex: none; width: 100%; text-align: center; } .eds-person-thumb { width: 200px; height: 200px; } .eds-transkript-content { margin-left: 0; } } /* SEKT54-SC-QUOTES */ .eds-quote-list { list-style: none; padding: 0; margin: 0; } .eds-quote-item { padding: 5px 10px; cursor: pointer; border-radius: 5px; transition: background 0.3s; display: flex; align-items: flex-start; gap: 8px; line-height: 1.3; } .eds-quote-item:hover { background: var(--eds-bg-light, #FFF8E7); } .eds-quote-icon { color: var(--cp1); font-size: 1.1em; flex-shrink: 0; } .eds-quote-text { color: var(--ct1); flex: 1; } .eds-quote-item:hover .eds-quote-text { color: var(--cp1); text-decoration: underline; } /* SEKT55-SC-MODAL */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; padding: var(--space-md); } .modal-overlay.active { display: flex; } .modal-content { background: var(--cw1); border-radius: var(--box-radius); padding: var(--space-lg); max-width: 800px; max-height: 90vh; overflow-y: auto; position: relative; scrollbar-width: auto; scrollbar-color: var(--sb1) transparent; } /* Modal Scrollbar (Webkit): eigene Definition, unabhaengig vom Browser */ .modal-content::-webkit-scrollbar, .eds-modal-content::-webkit-scrollbar { width: 10px; } .modal-content::-webkit-scrollbar-track, .eds-modal-content::-webkit-scrollbar-track { background: transparent; margin: 25px 0; } .modal-content::-webkit-scrollbar-thumb, .eds-modal-content::-webkit-scrollbar-thumb { background: var(--sb1); border-radius: 5px; } .modal-content::-webkit-scrollbar-thumb:hover, .eds-modal-content::-webkit-scrollbar-thumb:hover { background: var(--sb2); } .modal-content::-webkit-scrollbar-button, .eds-modal-content::-webkit-scrollbar-button { display: none; } .modal-close { position: absolute; top: var(--space-sm); right: var(--space-sm); background: var(--cp1); color: var(--cw1); border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; } .modal-close:hover { background: var(--cd1); } /* .modal-duration entfernt - war keine Standard-Klasse */ /* EDS Modal (aus Plugin) */ .eds-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 999999; align-items: flex-start; justify-content: center; padding: 20px 0; overflow-y: auto; } .eds-modal-content { max-width: 800px; width: 90%; max-height: 96vh; overflow-y: auto; position: relative; padding-right: 4px; /* Abstand Scrollbar zum Rand */ } /* --- MODAL-GROESSEN (3 Stufen, responsive via clamp) --- Doku: css-sektionen/LINK-KLASSEN-REFERENZ.md .eds-modal-sm = Login, kurze Dialoge, Bestaetigungen .eds-modal-md = Standard, mittlere Formulare (DEFAULT) .eds-modal-lg = Ausfuehrliche Texte, Buchungskalender Alle skalieren fliessend von Mobil bis Desktop. Ohne Klasse = wie md (Abwaertskompatibel) */ .eds-modal-sm .eds-modal-content, .eds-modal-content.modal-sm { width: clamp(280px, 35vw + 4rem, 500px); } .eds-modal-content, .eds-modal-md .eds-modal-content, .eds-modal-content.modal-md { width: clamp(320px, 50vw + 5rem, 800px); } .eds-modal-lg .eds-modal-content, .eds-modal-content.modal-lg { width: clamp(320px, 60vw + 8rem, 92vw); } /* Auch fuer .modal-content (Inline-Modals ohne eds-modal Wrapper) */ .modal-content.modal-sm { width: clamp(280px, 35vw + 4rem, 500px); } .modal-content.modal-md { width: clamp(320px, 50vw + 5rem, 800px); } .modal-content.modal-lg { width: clamp(320px, 60vw + 8rem, 92vw); } .eds-modal-close { position: absolute; top: 8px; right: 36px; font-size: 40px; color: var(--cp1); cursor: pointer; line-height: 1; font-weight: bold; z-index: 10; } .eds-modal-close:hover { color: #8B0000; } .eds-modal-aussage { color: var(--cp1); font-size: 1.4em; font-style: italic; margin-bottom: 5px; } /* Modal-Detail-Blöcke (aufklappbar) */ .eds-modal-detail { margin-bottom: 1em; padding: 0.5em 0; } .eds-mini-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92em; margin-bottom: 0.8em; } /* Header: fett + rot, Zebra-dunkel als Hintergrund, gelbe Linie unten */ .eds-mini-tabelle th { color: var(--cp1); padding: 6px 10px; text-align: center; font-weight: 700; border-bottom: 2px solid var(--cs1); background: rgba(234, 55, 50, 0.25); /* --c-info (#EA3732) bei 25% */ } /* Alle Zellen: zentriert, gelbe vertikale Linien */ .eds-mini-tabelle td, .eds-mini-tabelle th { border-left: 2px solid var(--cs1); text-align: center; vertical-align: middle; } /* Erste Spalte: keine linke Linie */ .eds-mini-tabelle td:first-child, .eds-mini-tabelle th:first-child { border-left: none; } .eds-mini-tabelle td { padding: 5px 10px; border-bottom: 1px solid #eee; } /* Zebra-Look: --c-info bei 25% */ .eds-mini-tabelle tr:nth-child(even) { background: rgba(234, 55, 50, 0.25); /* --c-info (#EA3732) bei 25% */ } .eds-mini-tabelle tr:last-child td { border-bottom: none; } /* Erste Spalte: nowrap fuer Kuerzel */ .eds-mini-tabelle td:first-child { white-space: nowrap; width: 1%; font-weight: 600; } /* H5 Klammer-Teil leichter */ .eds-modal h5 .info { font-weight: 400; color: var(--ci1); } /* Tabellen-Captions */ /* cont-gold auf modal-outer: Padding reduzieren */ .eds-modal .eds-modal-outer.cont-gold { padding: 1px 2px !important; } .eds-mini-tabelle caption { text-align: center; font-weight: 600; color: var(--cp1); padding: 6px 0; caption-side: top; font-size: 1.1em; } /* --- EDS-MODAL: Zwei-Container-Loesung (Scrollbar) --- modal-outer clippt border-radius, modal-inner scrollt. Gleiche Technik wie Termin-Modals. */ .eds-modal .eds-modal-outer { background: var(--cw1); border-radius: 26px; overflow: clip; position: relative; margin: 3rem auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4); max-height: 85vh; display: flex; flex-direction: column; width: clamp(320px, 50vw + 5rem, 800px); } .eds-modal .eds-modal-outer > .eds-modal-content { border-radius: 0; max-height: none; overflow-y: auto; overflow-x: hidden; flex: 1; width: 100%; scrollbar-width: initial; scrollbar-color: initial; padding: 30px var(--box-padding); } .eds-modal .eds-modal-outer > .eds-modal-content::-webkit-scrollbar { width: 24px; background: white; } .eds-modal .eds-modal-outer > .eds-modal-content::-webkit-scrollbar-track { background: white; } .eds-modal .eds-modal-outer > .eds-modal-content::-webkit-scrollbar-thumb { background: rgba(234, 55, 50, 0.4); border: 5px solid white; border-right-width: 7px; border-radius: 10px; } .eds-modal .eds-modal-outer > .eds-modal-content::-webkit-scrollbar-thumb:hover { background: rgba(234, 55, 50, 0.75); border: 5px solid white; border-right-width: 7px; border-radius: 10px; } .eds-modal .eds-modal-outer > .eds-modal-content::-webkit-scrollbar-button { display: none; } .eds-modal-name { color: var(--ct1); margin-bottom: 20px; } .eds-modal-video { width: 100%; height: 400px; border-radius: 10px; border: 2px solid var(--cs1); } .eds-modal-large .eds-modal-video { height: 500px; } /* Globale Modal-Textfarbe */ .eds-modal-content, .eds-modal .eds-modal-content { color: var(--ct3); } @media (max-width: 768px) { .eds-modal-video { height: 250px; } } /* SEKT56-SC-VIDEO */ .eds-play-overlay-new { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .eds-play-triangle { color: rgba(255, 255, 255, 0.9); font-size: 24px; margin-left: 4px; } .eds-vollvideo-thumb:hover .eds-play-overlay-new { border-color: white; background: rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%) scale(1.1); } /* SEKT57-SC-THEMENSEITE */ /* Themenseite Box */ .themenseite-box { margin: 0.3em 0 !important; background: transparent !important; overflow: auto !important; } .themenseite-box img.alignleft { width: 240px !important; max-width: 240px !important; margin: 1.35em 20px 0.3em 0 !important; } .themenseite-box h4 { font-size: 1.3em !important; line-height: 1.3em !important; margin-top: 0 !important; margin-bottom: 0.5em !important; } .themenseite-box p { margin-bottom: 1em !important; line-height: 1.7 !important; } .themenseite-box strong { color: #fff !important; } @media screen and (max-width: 768px) { .themenseite-box img.alignleft { width: 100% !important; max-width: 100% !important; margin: 1em 0 !important; } } /* SEKT58-SC-LINK */ /* EDS Link mit Pfeil */ a.eds-link { color: #fff !important; font-weight: bold !important; transition: all 0.3s ease !important; display: inline-block !important; position: relative !important; top: 0 !important; } a.eds-link::after { content: ' ➜'; margin-left: 5px; margin-right: 12px; transition: margin-left 0.3s ease; display: inline-block; } a.eds-link:hover { position: relative !important; top: -2px !important; text-shadow: 0 0 4px rgba(255, 255, 255, 0.8) !important; } a.eds-link:hover::after { margin-left: 9px; } /* SEKT58-SC-WIKI */ /* ===================================================== SEKT58-SC-WIKI Wiki-System: Begriffsseiten, Uebersicht Karten nutzen globale Klassen aus SEKT44: - .themenseite-karte (weiss, Gold-Border, Schatten) - .karte-bild, .karte-body, .karte-meta Wiki-spezifisch hier: - .eds-wiki-zurueck = Zurueck-Link (Begriffsseite) - .eds-wiki-definition = Ausfuehrliche Definition - .eds-wiki-verwandt = Container verwandte Begriffe - .eds-wiki-verwandt-grid = Grid verwandte Begriffe - .eds-wiki-beitraege = Container Blogpost-Anzeigemodul - .eds-wiki-alpha = Alphabetischer Index - .eds-wiki-suche = Suchfeld ===================================================== */ /* ===== WIKI-LINK BADGE (Inline im Text) ===== */ .eds-wiki-link { background: rgba(255, 238, 204, 0.6); color: var(--c-link, #C62828) !important; padding: 0.1em 0.35em; border: 1px solid rgba(197, 31, 31, 0.3); border-radius: 5px; text-decoration: none !important; font-weight: 700; letter-spacing: 1px; transition: border-color 0.2s; white-space: nowrap; position: relative; z-index: 10; } .eds-wiki-link:hover { border-color: rgba(197, 31, 31, 0.6); color: var(--c-primary-dark, #6D0000) !important; } /* ===== ZURUECK-LINK ===== */ .eds-wiki-zurueck { margin-bottom: var(--space-lg); } .eds-wiki-zurueck a { color: var(--c-gold); text-decoration: none; font-size: 0.95em; transition: color 0.2s ease; } .eds-wiki-zurueck a:hover { color: var(--cp1); } /* ===== AUSFUEHRLICHE DEFINITION ===== */ .eds-wiki-definition { margin-bottom: var(--space-lg); line-height: 1.8; font-size: 1.05em; } .eds-wiki-definition p:last-child { margin-bottom: 0; } /* ===== VERWANDTE BEGRIFFE ===== */ .eds-wiki-verwandt { margin: var(--space-lg) 0; padding-top: var(--space-lg); border-top: 1px solid var(--cs1); } .eds-wiki-verwandt h3 { margin-bottom: var(--space-md); color: var(--c-gold); } .eds-wiki-verwandt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); } /* ===== BLOGPOST-BEITRAEGE CONTAINER ===== */ .eds-wiki-beitraege { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--cs1); } .eds-wiki-beitraege h3 { margin-bottom: var(--space-md); color: var(--c-gold); } /* ===== WIKI-GRID: 3 Spalten fuer Uebersichtsseite ===== */ .themenseite-karten-grid#eds-wiki-grid { grid-template-columns: repeat(3, 1fr); } /* ===== WIKI-KARTEN: Meta-Zeile als Flexbox ===== */ #wk-karten .karte-meta, #wk-liste .karte-meta { display: flex; align-items: center; gap: 6px; } /* ===== ALPHABETISCHER INDEX ===== */ .eds-wiki-alpha { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: var(--space-lg); padding: var(--space-sm); background: rgba(255, 197, 82, 0.15); border-radius: 8px; border: 1px solid var(--cs2); } .eds-wiki-alpha a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 50%; font-weight: 700; color: var(--cp1); text-decoration: none; transition: all 0.2s ease; } .eds-wiki-alpha a:hover { background: rgba(213, 0, 0, 0.3); } .eds-wiki-alpha a.active { background: var(--cp1); color: var(--cw1); } .eds-wiki-alpha a.disabled { opacity: 0.3; pointer-events: none; } /* ABC innerhalb der Filterzeile: kein eigenes margin */ .eds-filter-leiste .eds-wiki-alpha { margin-bottom: 0; width: 100%; } /* Alle-Button in ABC-Leiste */ .eds-wiki-alpha .eds-abc-all { width: auto; padding: 0 12px; border-radius: 16px; margin-right: 4px; } /* ===== SUCHFELD WIKI ===== */ .eds-wiki-suche { margin-bottom: var(--space-lg); } .eds-wiki-suche input { width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--cs1); border-radius: 8px; font-size: 1em; background: var(--cw1); color: var(--ct3); transition: border-color 0.2s ease; } .eds-wiki-suche input:focus { border-color: var(--c-gold); outline: none; box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15); } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .themenseite-karten-grid#eds-wiki-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .themenseite-karten-grid#eds-wiki-grid { grid-template-columns: 1fr; } .eds-wiki-verwandt-grid { grid-template-columns: 1fr; } .eds-wiki-alpha a { width: 28px; height: 28px; font-size: 0.8em; } } /* ============================================ */ /* WIKI GOLDSTUECKE (eds_gld) */ /* ============================================ */ /* --- Goldstueck-Karte --- */ .eds-gld-karte { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-m, 1.5rem); padding: var(--sp-m, 1.5rem); margin-bottom: var(--sp-m, 1.5rem); background: var(--c-card-bg, rgba(255,255,255,0.03)); border-left: 3px solid var(--c-gold, #c8a44e); border-radius: var(--br, 8px); transition: transform 0.2s ease; } .eds-gld-karte:hover { transform: translateX(4px); } /* Bild */ .eds-gld-bild-link { display: block; overflow: hidden; border-radius: var(--br, 8px); } .eds-gld-bild { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transition: transform 0.3s ease; } .eds-gld-karte:hover .eds-gld-bild { transform: scale(1.03); } /* Inhalt */ .eds-gld-inhalt { display: flex; flex-direction: column; justify-content: center; } /* Zitat */ .eds-gld-zitat { margin: 0 0 var(--sp-s, 0.75rem) 0; padding: 0; border: none; font-size: var(--fs-m, 1.05rem); line-height: 1.6; font-style: normal; color: var(--c-text, #e8e0d0); } .eds-gld-zitat::before { content: "\201E"; font-size: 1.8em; line-height: 0; vertical-align: -0.25em; color: var(--c-gold, #c8a44e); margin-right: 0.15em; } .eds-gld-zitat::after { content: "\201C"; font-size: 1.8em; line-height: 0; vertical-align: -0.25em; color: var(--c-gold, #c8a44e); margin-left: 0.1em; } /* Quelle */ .eds-gld-quelle { font-size: var(--fs-s, 0.9rem); } .eds-gld-quelle a { color: var(--c-gold, #c8a44e); text-decoration: none; } .eds-gld-quelle a:hover { text-decoration: underline; } /* Silber-Karten (dezenter) */ .eds-gld-silber { border-left-color: var(--c-text-muted, #8a7e6e); opacity: 0.9; } .eds-gld-silber .eds-gld-zitat::before, .eds-gld-silber .eds-gld-zitat::after { color: var(--c-text-muted, #8a7e6e); } /* --- Toggle fuer Prio-2-Goldstuecke --- */ .eds-wiki-mehr-gld { margin-top: var(--sp-l, 2rem); } .eds-wiki-mehr-gld .eds-toggle-btn { display: block; width: 100%; padding: var(--sp-s, 0.75rem) var(--sp-m, 1.5rem); background: var(--c-card-bg, rgba(255,255,255,0.03)); border: 1px solid var(--c-border, rgba(255,255,255,0.1)); border-radius: var(--br, 8px); color: var(--c-gold, #c8a44e); font-size: var(--fs-m, 1.05rem); cursor: pointer; text-align: center; transition: background 0.2s; } .eds-wiki-mehr-gld .eds-toggle-btn:hover { background: rgba(200,164,78,0.08); } .eds-wiki-mehr-gld .eds-toggle-inhalt { display: none; margin-top: var(--sp-m, 1.5rem); } .eds-wiki-mehr-gld.offen .eds-toggle-inhalt { display: block; } /* --- Einleitung --- */ .eds-wiki-einleitung { margin-bottom: var(--sp-l, 2rem); font-size: var(--fs-m, 1.05rem); line-height: 1.7; } /* --- Responsive --- */ @media (max-width: 768px) { .eds-gld-karte { grid-template-columns: 1fr; } .eds-gld-bild { max-height: 180px; } } /* SEKT59-SC-ZITAT */ /* ========================================================================== SEKT59 - Zitat-Bloecke + Dialog-Stil ZITAT (rel/spi/nat/alt/neu) = Fremdstimme, MIT Linie links, farbig DIALOG (mi) = Michaels Kommentar, reiner Fliesstext ohne Box Bloecke gehen ueber volle Breite (column-span: all), intern zweispaltig (eigene columns: 2) ========================================================================== */ /* --- Basis: alle Zitat-Bloecke --- */ .zit-alt, .zit-neu, .zit-rel, .zit-spi, .zit-nat, .zit-erb { column-span: all; column-count: 2; column-gap: 2em; margin: 1rem 0; padding: 1.2rem 1.6rem; border-radius: var(--box-radius-small, 14px); line-height: 1.55; break-inside: avoid; } /* --- z1 + z3 + toggle: immer volle Breite (ueber beide Spalten) --- */ .z1, .z3, .eds-mehr-toggle { column-span: all; } /* --- Textgroessen (farbneutral) --- */ .z1 { font-size: 1.25em; font-style: italic; line-height: 1.5; margin: 0 0 0.6rem; font-weight: 600; } .z2 { font-size: var(--fs-body, 1rem); line-height: 1.55; margin: 0 0 0.35rem; } .z3 { font-size: var(--fs-small, 0.85rem); line-height: 1.35; margin: 0.5rem 0 0; opacity: 0.55; font-style: italic; } /* --- Deutsche Anfuehrungszeichen um z1 in Zitat-Bloecken --- */ .zit-rel .z1::before, .zit-spi .z1::before, .zit-nat .z1::before, .zit-alt .z1::before, .zit-neu .z1::before, .zit-erb .z1::before { content: "\201E"; font-size: 1.3em; line-height: 0; vertical-align: baseline; margin-right: 0.08em; opacity: 0.5; } .zit-rel .z1::after, .zit-spi .z1::after, .zit-nat .z1::after, .zit-alt .z1::after, .zit-neu .z1::after, .zit-erb .z1::after { content: "\201C"; font-size: 1.3em; line-height: 0; vertical-align: baseline; margin-left: 0.08em; opacity: 0.5; } /* --- Toggle: weniger Padding oberhalb --- */ .eds-mehr-toggle { margin-top: 0.15em; } /* --- ZITATE: Hintergrund + Linie links + Umrisslinie (25%) + column-rule --- */ .zit-rel { color: var(--c2, #272796); background: rgba(21,21,97,0.06); border-left: 5px solid var(--c2, #272796); outline: 1px solid rgba(21,21,97,0.25); column-rule: 1px solid rgba(21,21,97,0.10); } .zit-spi { color: var(--c4, #762187); background: rgba(68,26,76,0.06); border-left: 5px solid var(--c4, #762187); outline: 1px solid rgba(68,26,76,0.25); column-rule: 1px solid rgba(68,26,76,0.10); } .zit-nat { color: var(--c3, #3b7e3a); background: rgba(27,69,26,0.06); border-left: 5px solid var(--c3, #3b7e3a); outline: 1px solid rgba(27,69,26,0.25); column-rule: 1px solid rgba(27,69,26,0.10); } .zit-alt { color: var(--c5, #5e5e5e); background: rgba(0,0,0,0.04); border-left: 5px solid var(--c5, #5e5e5e); outline: 1px solid rgba(94,94,94,0.25); column-rule: 1px solid rgba(0,0,0,0.10); opacity: 0.9; } .zit-neu { color: var(--c-primary-dark, #6D0000); background: rgba(213,0,0,0.06); border-left: 5px solid var(--c-primary, #D50000); outline: 1px solid rgba(213,0,0,0.25); column-rule: 1px solid rgba(213,0,0,0.10); } /* --- ERB (Erfahrungsbericht): Bernstein-Kupfer, dezentere Linie (3px) fuer Dialog-Charakter --- */ .zit-erb { color: var(--c6, #8B5E3C); background: rgba(139,94,60,0.06); border-left: 5px solid var(--c6, #8B5E3C); outline: 1px solid rgba(139,94,60,0.25); column-rule: 1px solid rgba(139,94,60,0.10); } /* --- MICHAELS TEXT (mi): Reiner Fliesstext, KEINE Box --- */ .zit-mi { column-span: all; column-count: 2; column-gap: 2em; column-rule: 1px solid rgba(0,0,0,0.07); margin: 0.3rem 0 1rem 0; padding: 0.5rem 0; line-height: 1.55; color: var(--c-text, #333); background: none; border: none; border-radius: 0; break-inside: avoid; } .zit-mi .z1 { column-span: all; font-size: 1.1em; font-weight: 600; font-style: normal; margin: 0 0 0.4rem; } .zit-mi .z3 { display: none; } /* --- Ueberschriften: volle Breite ueber Spalten --- */ .eds-block-heading { column-span: all; } /* --- Mobil: einspaltig --- */ @media (max-width: 768px) { .zit-alt, .zit-neu, .zit-rel, .zit-spi, .zit-nat, .zit-erb, .zit-mi { column-count: 1; } } /* --- Toggle-Farben innerhalb Zitat-Bloecken --- */ /* Geschlossen (Lies hier weiter): ROT, Hover GRUEN */ /* Offen (Wieder ausblenden): GRUEN, Hover ROT */ .eds-mehr-btn { color: var(--c-primary, #8B1A1A) !important; } .eds-mehr-btn:hover { color: var(--eds-c1, #0F6E56) !important; } .eds-mehr-btn.eds-mehr-btn-open { color: var(--eds-c1, #0F6E56) !important; } .eds-mehr-btn.eds-mehr-btn-open:hover { color: var(--c-primary, #8B1A1A) !important; } /* --- Mehr-Inhalt (z2 aufgeklappt): zweispaltig --- */ .eds-mehr-inhalt { column-count: 2; column-gap: 2em; column-rule: 1px solid rgba(0,0,0,0.07); } @media (max-width: 768px) { .eds-mehr-inhalt { column-count: 1; } } /* SEKT60-TESTIMONIALS */ /* * ============================================================================ * SEKT60-TESTIMONIALS.css * ============================================================================ * Erfahrungsberichte / Testimonial-System * Für Shortcodes: [eds_teaser] und [eds_teaser_person] * * Stand: 31.01.2026 * Quelle: Extrahiert aus EDS Functions Plugin v1.3.0 * ============================================================================ */ /* ============================================================================ EINZELNER TEASER [eds_teaser id="..."] ============================================================================ */ .eds-teaser-single { display: inline-block; position: relative; cursor: pointer; max-width: 200px; margin: 10px; text-align: center; } .eds-teaser-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cs1); transition: transform 0.3s, box-shadow 0.3s; } .eds-teaser-single:hover .eds-teaser-img { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 197, 82, 0.7); } .eds-teaser-overlay { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); background: rgba(213, 0, 0, 0.9); color: var(--cw1); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; } .eds-teaser-single:hover .eds-teaser-overlay { opacity: 1; } .eds-teaser-text { font-size: 0.9em; color: var(--cp2); font-style: italic; margin-top: 10px; } /* ============================================================================ PERSON CONTAINER [eds_teaser_person eb="..."] Dreispaltig: Links=Zitate, Mitte=Foto, Rechts=Vollvideo ============================================================================ */ .eds-person-container { display: flex; gap: 20px; margin-bottom: 30px; padding: 15px 20px; } .eds-person-left { flex: 2; } .eds-person-middle { flex: 0 0 240px; text-align: center; } .eds-person-right { flex: 1; text-align: center; } /* ============================================================================ PERSON - MITTLERE SPALTE (Foto + Name + Info) ============================================================================ */ .eds-person-thumb { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cs1); } .eds-person-name { color: var(--cp1); margin-top: 10px; font-weight: bold; font-size: 1.2em; } .eds-person-info { color: var(--cp2); font-size: 0.9em; margin-top: 5px; line-height: 1.3; } /* ============================================================================ ZITATE-LISTE (Linke Spalte) ============================================================================ */ .eds-quote-list { list-style: none; padding: 0; margin: 0; } .eds-quote-item { padding: 5px 10px; cursor: pointer; border-radius: 5px; transition: background 0.3s; display: flex; align-items: flex-start; gap: 8px; line-height: 1.3; } .eds-quote-item:hover { background: var(--c-cream); } .eds-quote-icon { color: var(--cp1); font-size: 1.1em; flex-shrink: 0; } .eds-quote-text { color: var(--cp2); flex: 1; } .eds-quote-item:hover .eds-quote-text { color: var(--cp1); text-decoration: underline; } /* ============================================================================ TRANSKRIPT (Ausklappbar) ============================================================================ */ .eds-transkript-toggle { flex-shrink: 0; cursor: pointer; color: var(--cp1); opacity: 0.6; transition: all 0.3s; font-size: 0.8em; padding: 2px 6px; border-radius: 3px; } .eds-transkript-toggle:hover { opacity: 1; background: var(--c-cream); } .eds-transkript-content { display: none; background: var(--c-cream); border-left: 3px solid var(--cs1); padding: 10px 15px; margin: 5px 0 10px 25px; font-size: 0.9em; color: var(--cp2); line-height: 1.5; border-radius: 0 5px 5px 0; } .eds-transkript-content.active { display: block; } /* ============================================================================ VOLLVIDEO (Rechte Spalte) ============================================================================ */ .eds-vollvideo-label { color: var(--cp2); font-size: 0.95em; margin-bottom: 15px; line-height: 1.4; } .eds-vollvideo-thumb { position: relative; cursor: pointer; display: inline-block; } .eds-vollvideo-thumb img { width: 180px; border-radius: 10px; border: 2px solid var(--cs1); } .eds-play-overlay-new { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.8); background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .eds-play-triangle { color: rgba(255, 255, 255, 0.9); font-size: 24px; margin-left: 4px; } .eds-vollvideo-thumb:hover .eds-play-overlay-new { border-color: var(--cw1); background: rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%) scale(1.1); } .eds-no-vollvideo { color: #999; font-style: italic; } /* ============================================================================ MODAL (Video-Popup) ============================================================================ */ .eds-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 999999; align-items: center; justify-content: center; } .eds-modal-content { max-width: 800px; width: 90%; position: relative; } .eds-modal-large { max-width: 1000px; } .eds-modal-close { position: absolute; top: 10px; right: 36px; font-size: 40px; color: var(--cp1); cursor: pointer; line-height: 1; font-weight: bold; } .eds-modal-close:hover { color: var(--ct1); } .eds-modal-aussage { color: var(--cp1); font-size: 1.4em; font-style: italic; margin-bottom: 5px; } .eds-modal-name { color: var(--cp2); margin-bottom: 20px; } .eds-modal-video { width: 100%; height: 400px; border-radius: 10px; border: 2px solid var(--cs1); } .eds-modal-large .eds-modal-video { height: 500px; } /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 768px) { /* Person-Container: Untereinander statt nebeneinander */ .eds-person-container { flex-direction: column; align-items: center; } .eds-person-left, .eds-person-middle, .eds-person-right { flex: none; width: 100%; text-align: center; } /* Kleineres Foto auf Mobile */ .eds-person-thumb { width: 200px; height: 200px; } /* Transkript: Volle Breite */ .eds-transkript-content { margin-left: 0; } /* Modal-Video: Kleiner */ .eds-modal-video { height: 250px; } } /* ============================================================================ INLINE-TEASER [eds_ebt id="01-03"] 80px Bild links, Text rechts daneben ============================================================================ */ .eds-ebt-inline { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px; border-radius: 8px; transition: background 0.2s; } .eds-ebt-inline:hover { background: transparent; } .eds-ebt-inline:hover .eds-ebt-link { color: var(--cp1); } .eds-ebt-inline-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cs1); flex-shrink: 0; } .eds-ebt-inline-text { flex: 1; line-height: 1.4; } .eds-ebt-inline-aussage { display: block; color: #6b1010; font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem); font-weight: 500; } .eds-ebt-inline-meta { display: block; font-size: var(--fs-sm); color: var(--ci1); margin-top: 2px; } .eds-ebt-link { font-weight: 600; color: var(--ci1); } .eds-ebt-inline:hover .eds-ebt-link { color: var(--cl2); } /* ============================================================================ EB-BLOCK [eds_eb id="01"] - Alle Teaser einer Person ============================================================================ */ .eds-eb-block { padding: var(--space-md); } .eds-eb-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; } .eds-eb-person-img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cs1); flex-shrink: 0; } .eds-eb-person-name { color: var(--cp1); margin: 0; } .eds-eb-person-desc { color: var(--ct2); margin: 4px 0 0 0; } .eds-eb-quotes { list-style: none; padding: 0; margin: 0; } .eds-eb-quote-item { padding: 6px 0; cursor: pointer; display: flex; align-items: flex-start; gap: 8px; transition: color 0.2s; } .eds-eb-quote-item:hover { color: var(--cp1); } .eds-eb-quote-icon { color: var(--cp1); flex-shrink: 0; } .eds-eb-quote-text { color: var(--cp2); font-size: var(--fs-bd); } .eds-eb-quote-item:hover .eds-eb-quote-text { text-decoration: underline; } .eds-eb-transk-toggle { cursor: pointer; color: var(--ci1); opacity: 0.6; font-size: 0.8em; padding: 2px 6px; flex-shrink: 0; } .eds-eb-transk-toggle:hover { opacity: 1; } .eds-eb-transkript-content { display: none; background: var(--bg2); border-left: 3px solid var(--cs1); padding: 10px 15px; margin: 5px 0 10px 25px; font-size: 0.9em; line-height: 1.5; border-radius: 0 5px 5px 0; } .eds-eb-transkript-content.eds-show { display: block; } .eds-eb-vollvideo { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid rgba(0,0,0,0.1); } .eds-eb-vollvideo-label { color: var(--ct2); margin-bottom: var(--space-sm); } .eds-eb-vollvideo-thumb { position: relative; cursor: pointer; display: inline-block; } .eds-eb-vollvideo-thumb img { max-width: 240px; border-radius: 8px; border: 2px solid var(--cs1); } /* ============================================================================ MODAL: Transkript-Button + Transkript-Bereich ============================================================================ */ .eds-modal-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: var(--space-sm); } .eds-modal-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; border: 2px solid var(--cs1); } .eds-btn-transkript { background: none; border: 1px solid var(--cs1); color: var(--ci1); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9em; transition: all 0.2s; } .eds-btn-transkript:hover { background: var(--cs1); color: var(--cp2); } .eds-modal-transkript { display: none; margin-top: var(--space-sm); padding: var(--space-sm); background: var(--bg2); border-radius: 6px; font-size: 0.9em; line-height: 1.6; max-height: 300px; overflow-y: auto; } .eds-modal-transkript.eds-show { display: block; } /* ============================================================================ KARUSSELL-NAVIGATION: Pfeile + Dots + Pause auf einer Ebene ============================================================================ */ .eds-karussell-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; } .eds-eb-sektion .eds-karussell-dots { margin-top: 12px; margin-bottom: 8px; } .eds-karussell-arrow { background: none; border: none; color: var(--cp1); font-size: 1rem; cursor: pointer; padding: 4px 6px; opacity: 0.4; transition: opacity 0.2s; line-height: 1; } .eds-karussell-arrow:hover { opacity: 1; } .eds-karussell-pause-inline { background: none; border: none; cursor: pointer; padding: 2px 8px; opacity: 0.4; transition: opacity 0.2s; display: flex; align-items: center; margin-left: 6px; font-size: var(--fs-sm); color: var(--cp1); } .eds-karussell-pause-inline:hover { opacity: 1; } /* SEKT61-SC-STIMMEN */ /* ============================================================ SEKT61 — Stimmen-Karussell (PB/LB) Basiert auf eds-ebt-inline Design (SEKT60) ============================================================ */ /* --- Karte: eds-ebt-inline Layout uebernommen --- */ .eds-stimme-karte { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 8px; background: var(--cw1); height: 100%; box-sizing: border-box; } /* --- Bild: 80px rund wie eds-ebt-inline-img --- */ .eds-stimme-bild { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cs1); flex-shrink: 0; } /* --- Textblock rechts vom Bild --- */ .eds-stimme-inhalt { flex: 1; line-height: 1.4; } /* --- Kurztext: wie eds-ebt-inline-aussage --- */ .eds-stimme-text { display: block; color: #6b1010; font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem); font-weight: 500; margin-bottom: 4px; } /* --- Highlight (fett, kursiv) --- */ .eds-stimme-highlight { display: block; font-weight: 600; font-style: italic; color: var(--cp1); font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem); margin-bottom: 4px; } /* --- Name: wie eds-ebt-link --- */ .eds-stimme-name { font-weight: 600; color: var(--ci1); font-size: var(--fs-sm); } /* --- Titel: wie eds-ebt-inline-meta --- */ .eds-stimme-titel { display: block; font-size: var(--fs-sm); color: var(--ci1); margin-top: 2px; } /* --- Mehr-Link --- */ .eds-stimme-mehr { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--ci1); text-decoration: none; margin-top: 4px; transition: color 0.2s; } .eds-stimme-mehr:hover { color: var(--cl2); } /* --- PB: Gold-Akzent (Prozessbericht) --- */ .eds-stimmen-pb .eds-stimme-bild { border-color: var(--c-gold); } /* --- LB: Rot-Akzent (Leserbericht) --- */ .eds-stimmen-lb .eds-stimme-bild { border-color: var(--cp1); } /* --- Modal --- */ .eds-stimme-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; align-items: center; justify-content: center; } .eds-stimme-modal.eds-modal-open { display: flex; } .eds-stimme-modal-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); cursor: pointer; } .eds-stimme-modal-box { position: relative; background: var(--cw1); border-radius: 12px; padding: 2rem; max-width: 640px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.3); z-index: 1; } .eds-stimme-modal-box h3 { color: var(--cp1); margin-top: 0; margin-bottom: 1rem; font-size: 1.25rem; padding-right: 2rem; } .eds-stimme-modal-close { position: absolute; top: 0.75rem; right: 1rem; background: none; border: none; font-size: 1.75rem; color: #999; cursor: pointer; line-height: 1; padding: 0; } .eds-stimme-modal-close:hover { color: var(--cp1); } .eds-stimme-modal-text { font-size: 1rem; line-height: 1.7; color: #333; } .eds-stimme-modal-text p { margin-bottom: 0.75rem; } /* --- Responsive --- */ @media (max-width: 768px) { .eds-stimmen-karussell .eds-karussell-item { min-width: 100%; } .eds-stimme-modal-box { width: 95%; padding: 1.25rem; } } /* --- Person-Zeile (Name + Titel) --- */ .eds-stimme-person { display: block; margin-top: 4px; } /* SEKT62-ZEITREISE */ /* * ============================================================================ * SEKT62-ZEITREISE.css * ============================================================================ * "Mein Weg" Zeitreise-Karten fuer ernstmichaelstocker.info * Basiert auf eds-ebt-inline (SEKT60), erweitert um: * - 320px Bilder statt 80px * - Automatischer Rechts-Links-Wechsel (nth-child) * - Verschachtelte
fuer Mehr-Info (Ebene 2+3) * - SVG-Verbindungslinien zwischen den Karten (Flowchart-Stil) * - Responsive: Mobile = Bild oben, Text unten * * Stand: 24.03.2026 * ============================================================================ */ /* ============================================================================ ZEITREISE-CONTAINER ============================================================================ */ .ems-zeitreise { display: flex; flex-direction: column; gap: 0; position: relative; } /* ============================================================================ ZEITKARTE - Ebene 1 (immer sichtbar) Bild (320px) + Text daneben ============================================================================ */ .ems-zeitkarte { display: flex; align-items: flex-start; gap: var(--space-md, 20px); position: relative; padding-bottom: 10px; } /* Automatischer Rechts-Links-Wechsel */ .ems-zeitkarte:nth-child(even of .ems-zeitkarte) { flex-direction: row-reverse; } .ems-zeitkarte:nth-child(even of .ems-zeitkarte) .ems-zeittext { text-align: right; } .ems-zeitkarte:nth-child(even of .ems-zeitkarte) .ems-zeitdetail { text-align: left; } /* ============================================================================ SVG-VERBINDUNGSLINIE zwischen den Karten Wird per JS generiert, hier nur das Styling ============================================================================ */ .ems-zeitlinie { display: block; width: 100%; overflow: visible; flex-shrink: 0; } .ems-zeitlinie path { fill: none; stroke: var(--c-secondary, #FFC552); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================================ ZEITBILD - 320px, 16:9 ============================================================================ */ .ems-zeitbild { width: 320px; min-width: 320px; height: 180px; object-fit: cover; border-radius: 8px; border: 2px solid var(--c-secondary, #FFC552); flex-shrink: 0; transition: transform 0.3s, box-shadow 0.3s; } .ems-zeitkarte:hover .ems-zeitbild { transform: scale(1.02); box-shadow: 0 4px 16px rgba(213, 0, 0, 0.15); } /* ============================================================================ ZEITTEXT - Neben dem Bild ============================================================================ */ .ems-zeittext { flex: 1; min-width: 0; } .ems-zeitperiode { display: block; font-size: var(--fs-small, 0.85rem); color: var(--c-info, #999); margin-bottom: 2px; letter-spacing: 0.05em; } .ems-zeittitel { color: var(--c-primary, #D50000); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); font-weight: 700; margin: 0 0 6px 0; line-height: 1.3; } .ems-zeitteaser { color: var(--c-primary-dark, #6D0000); font-size: var(--fs-body, 1rem); line-height: 1.5; margin: 0 0 8px 0; } /* ============================================================================ MEHR-ERFAHREN - Ebene 1 -> 2 (details/summary) ============================================================================ */ .ems-zeitkarte details { margin-top: 4px; } .ems-zeitkarte details > summary { cursor: pointer; color: var(--c-info, #b8860b); font-weight: 600; font-size: var(--fs-body, 1rem); list-style: none; user-select: none; transition: color 0.2s; padding: 4px 0; } .ems-zeitkarte details > summary::-webkit-details-marker { display: none; } .ems-zeitkarte details > summary::after { content: ' \25B8'; } .ems-zeitkarte details[open] > summary::after { content: ' \25BE'; } .ems-zeitkarte details > summary:hover { color: var(--c-primary, #D50000); } /* ============================================================================ ZEITDETAIL - Aufgeklappter Bereich (Ebene 2) ============================================================================ */ .ems-zeitdetail { padding: var(--space-sm, 12px) 0; color: var(--c-primary-dark, #6D0000); font-size: var(--fs-body, 1rem); line-height: 1.6; text-align: left; } .ems-zeitdetail p { margin: 0 0 10px 0; } .ems-zeitdetail img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--c-secondary-border, #E5A84B); margin: 8px 0; } /* ============================================================================ UNTER-DETAILS (Ebene 3) - Verschachteltes Aufklappen ============================================================================ */ .ems-zeitdetail details { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--c-secondary, #FFC552); } .ems-zeitdetail details > summary { font-size: 0.95em; color: var(--c-info, #b8860b); } .ems-zeitdetail details .ems-zeitdetail { padding-left: 8px; } /* ============================================================================ BLOGPOST-LINK (zum vollen Beitrag auf EDS) ============================================================================ */ .ems-zeitlink { display: inline-block; color: var(--c-primary, #D50000); font-weight: 600; font-size: var(--fs-small, 0.85rem); text-decoration: none; margin-top: 8px; transition: color 0.2s; } .ems-zeitlink:hover { color: var(--c-primary-dark, #6D0000); text-decoration: underline; } .ems-zeitlink::after { content: ' \2192'; } /* ============================================================================ RESPONSIVE - Mobile: Bild oben, Text unten, keine Linien ============================================================================ */ @media (max-width: 768px) { .ems-zeitkarte, .ems-zeitkarte:nth-child(even of .ems-zeitkarte) { flex-direction: column; align-items: center; } .ems-zeitkarte:nth-child(even of .ems-zeitkarte) .ems-zeittext { text-align: left; } .ems-zeitbild { width: 100%; min-width: 0; max-width: 400px; height: auto; aspect-ratio: 16 / 9; } .ems-zeittext { width: 100%; } .ems-zeitlinie { display: none; } } /* SEKT63-DIALOG */ /* ===================================================== SEKT63-DIALOG Sprechblasen fuer Dialog-Bloecke (SEKT12-BLOCK-DIALOG.php) Erster Sprecher (re) = nach rechts, zweiter (li) = nach links versetzt ===================================================== */ /* Sprecher-Farben C1-C8 */ .eds-c1 { --sp-color: var(--c1, #b30000); } .eds-c2 { --sp-color: var(--c2, #2a2395); } .eds-c3 { --sp-color: var(--c3, #368334); } .eds-c4 { --sp-color: var(--c4, #711c82); } .eds-c5 { --sp-color: var(--c5, #5e5e5e); } .eds-c6 { --sp-color: var(--c6, #9c4807); } .eds-c7 { --sp-color: var(--c7, #ef681f); } .eds-c8 { --sp-color: var(--c8, #b408a6); } /* Block-Heading vor Dialog: ueber beide Spalten spannen */ .eds-block-heading { column-span: all; } /* Container */ .eds-dia-ms { display: flex; flex-direction: column; gap: clamp(0.95rem, 2.4vw, 1.45rem); margin: 0 0 1rem 0; } /* Zeile */ .eds-dia-rw { display: flex; } /* Erster Sprecher (Michael) = nach rechts versetzt */ .eds-dia-re { margin-left: clamp(18px, 3vw, 35px); margin-right: 0; } /* Zweiter Sprecher (andere) = nach links versetzt */ .eds-dia-li { margin-left: 0; margin-right: clamp(18px, 3vw, 35px); } /* Sprechblase */ .eds-dia-bu { width: 100%; padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.5rem, 1.5vw, 1rem); border-radius: 12px; border-left: 2px solid var(--sp-color, var(--c1, #b30000)); background: color-mix(in srgb, var(--sp-color) 15%, transparent); box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.3); box-decoration-break: clone; -webkit-box-decoration-break: clone; text-wrap: pretty; } /* Name inline + Doppelpunkt, dann Text */ .eds-dia-nm { display: inline; font-weight: bold; color: var(--sp-color, var(--c-dark, #333)); } .eds-dia-nm::after { content: ":\00a0\00a0"; } .eds-dia-tx { display: inline; line-height: 1.5; color: var(--sp-color, var(--c-dark, #3a2a1a)); } .eds-dia-tx p { display: inline; margin: 0; } /* Responsive */ @media (max-width: 600px) { .eds-dia-re { margin-left: 12px; } .eds-dia-li { margin-right: 12px; } .eds-dia-ms { gap: 0.85rem; } } /* SEKT65-TEXTCONTAINER */ /* ===================================================== SEKT65-TEXTCONTAINER Fliesstext-Container eds-tf-1 bis eds-tf-4 Farbhintergrund via eds-c1..c8 (Sprecher-Farben) Nur-Textfarbe via eds-tc-1..tc-8 ===================================================== */ /* --- Basis: alle Textcontainer zweispaltig --- */ .eds-tf-1, .eds-tf-2, .eds-tf-3, .eds-tf-4 { column-count: 2; column-gap: 2.5em; column-rule: var(--column-rule); margin-bottom: var(--space-sm); } /* Ueberschriften und Bilder ueber volle Breite */ .eds-tf-1 h2, .eds-tf-1 h3, .eds-tf-1 h4, .eds-tf-1 h5, .eds-tf-2 h2, .eds-tf-2 h3, .eds-tf-2 h4, .eds-tf-2 h5, .eds-tf-3 h2, .eds-tf-3 h3, .eds-tf-3 h4, .eds-tf-3 h5, .eds-tf-4 h2, .eds-tf-4 h3, .eds-tf-4 h4, .eds-tf-4 h5 { column-span: all; } .eds-tf-1 img, .eds-tf-1 blockquote, .eds-tf-2 img, .eds-tf-2 blockquote, .eds-tf-3 img, .eds-tf-3 blockquote, .eds-tf-4 img, .eds-tf-4 blockquote { column-span: all; } /* --- TF1: Standard-Fliesstext --- */ .eds-tf-1 { font-size: var(--fs-bd); line-height: 1.55; } /* --- TF2: Groesser, betont --- */ .eds-tf-2 { font-size: 1.1rem; line-height: 1.55; } /* --- TF3: Noch groesser, kursiv (Zitate) --- */ .eds-tf-3 { font-size: 1.2rem; line-height: 1.6; font-style: italic; } /* --- TF4: Gross, Statement --- */ .eds-tf-4 { font-size: 1.35rem; line-height: 1.6; font-style: italic; font-weight: 600; } /* --- Responsive: einspaltig auf Tablet --- */ @media (max-width: 992px) { .eds-tf-1, .eds-tf-2, .eds-tf-3, .eds-tf-4 { column-count: 1; } } /* ===================================================== Farbhintergrund + Seitenstreifen (via eds-c1..c8) Nur wenn Textcontainer + Farbklasse kombiniert:
===================================================== */ .eds-tf-1[class*="eds-c"], .eds-tf-2[class*="eds-c"], .eds-tf-3[class*="eds-c"], .eds-tf-4[class*="eds-c"] { background: color-mix(in srgb, var(--sp-color) 7%, transparent); border-left: 4px solid color-mix(in srgb, var(--sp-color) 50%, transparent); border-radius: var(--box-radius-small, 8px); padding: 1.2rem 1.6rem; } /* ===================================================== Nur Textfarbe (eds-tc-1..tc-8) Kein Hintergrund, kein Streifen, nur der Text farbig
===================================================== */ .eds-tc-1 { color: var(--c1, #8B0000); } .eds-tc-2 { color: var(--c2, #272796); } .eds-tc-3 { color: var(--c3, #3b7e3a); } .eds-tc-4 { color: var(--c4, #762187); } .eds-tc-5 { color: var(--c5, #5e5e5e); } .eds-tc-6 { color: var(--c6, #8B5E3C); } .eds-tc-7 { color: var(--c7, #ef681f); } .eds-tc-8 { color: var(--c8, #b408a6); } /* SEKT70-FORM-COMMENT */ /* ===== KOMMENTARFORMULAR - EDS DESIGN ===== */ /* Eingabefelder: helles Beige, kein Rahmen, dunkelroter Text */ .flc_content_textarea, .flc_respond textarea, .flc_row.flc_person_form_fields input, #commentform textarea, #commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"], .comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] { background-color: var(--bg4) !important; border: none !important; color: var(--ct1) !important; font-family: var(--ff-body, 'Roboto', sans-serif) !important; font-size: var(--fs-bd) !important; padding: 12px 15px !important; border-radius: var(--box-radius-small) !important; transition: box-shadow var(--transition) !important; } /* Fokus: dezenter Schatten statt Rahmen */ .flc_content_textarea:focus, .flc_respond textarea:focus, .flc_row.flc_person_form_fields input:focus, #commentform textarea:focus, #commentform input[type="text"]:focus, #commentform input[type="email"]:focus, #commentform input[type="url"]:focus, .comment-form textarea:focus, .comment-form input[type="text"]:focus, .comment-form input[type="email"]:focus, .comment-form input[type="url"]:focus { outline: none !important; box-shadow: 0 0 0 2px var(--ct2) !important; } /* Placeholder: helleres Rot (muted) */ .flc_content_textarea::placeholder, .flc_respond textarea::placeholder, .flc_row.flc_person_form_fields input::placeholder, #commentform textarea::placeholder, #commentform input::placeholder, .comment-form textarea::placeholder, .comment-form input::placeholder { color: var(--ct2) !important; opacity: 1 !important; } /* Labels: dunkelrot */ .flc_respond label, .flc_row.flc_person_form_fields label, #commentform label, .comment-form label { color: var(--ct1) !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; padding: 8px 0 !important; cursor: pointer !important; } /* Überschrift */ .flc_respond h3, .flc_comments-title, #reply-title, .comment-reply-title { color: var(--cp1) !important; font-weight: 700 !important; } /* Submit-Button */ .flc_button, button.flc_button, .comment-form .submit, #commentform .submit, input[type="submit"].submit { background-color: var(--ac1) !important; color: var(--cw1) !important; border: none !important; padding: 12px 25px !important; font-weight: 600 !important; cursor: pointer !important; transition: background-color var(--transition) !important; border-radius: var(--box-radius-small) !important; font-size: var(--fs-bd) !important; } .flc_button:hover, button.flc_button:hover, .comment-form .submit:hover, #commentform .submit:hover, input[type="submit"].submit:hover { background-color: var(--ac2) !important; } /* Checkbox */ .flc_respond input[type="checkbox"], .comment-form input[type="checkbox"], #commentform input[type="checkbox"] { width: 20px !important; height: 20px !important; margin-right: 10px !important; cursor: pointer !important; accent-color: var(--ac1) !important; vertical-align: middle !important; } /* Kommentar-Karten (Fluent Comments) */ .flc_body .crayons-card { background: var(--bg4) !important; border-radius: var(--box-radius-small) !important; box-shadow: none !important; border: none !important; } /* Avatar-Rahmen passend */ .flc_comment_author img, .flc_avatar_el { border-color: var(--bg4) !important; } /* SEKT71-FORM-FLUENT */ /* Fluent Forms Basis-Styles */ /* Newsletter ist in SEKT12-FOOTER-NL */ /* Hier weitere Fluent Forms Styles */ /* SEKT72-ICONS */ /* ===== EDS ICONS ===== */ /* Wird verwendet in: Footer, Share-Section, überall */ /* Nutzt --icon-color Variablen für einheitliche Farbsteuerung */ .eds-icons { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; } .eds-icon-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; } /* Basis Icon-Style - nutzt Icon-Variablen */ .eds-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ic1); text-decoration: none; transition: all var(--transition); cursor: pointer; position: relative; } /* SVG Farbe - nutzt Icon-Variable */ /* fill auf svg UND use setzen für Sprite-Kompatibilität */ .eds-icon svg { fill: var(--ic1); transition: fill var(--transition); } .eds-icon svg use { fill: inherit; } .eds-icon:hover { transform: scale(1.05); background: transparent; border-color: var(--ic2); box-shadow: 0 0 8px rgba(255, 255, 255, 0.9); } .eds-icon:hover svg { fill: var(--ic2); } /* Aktiv-Zustand beim Klicken */ .eds-icon:active, .eds-icon.active { background: var(--ct1); transform: scale(1.05); } /* ===== ICON-SPEZIFISCHE GRÖSSEN ===== */ .eds-icon.icon-x svg { width: 24px; height: 24px; } .eds-icon.icon-facebook svg { width: 28px; height: 28px; } .eds-icon.icon-instagram svg { width: 26px; height: 26px; } .eds-icon.icon-telegram svg { width: 26px; height: 26px; transform: translateX(-1px); } .eds-icon.icon-tiktok svg { width: 26px; height: 26px; } .eds-icon.icon-pinterest svg { width: 38px; height: 38px; } .eds-icon.icon-rumble svg { width: 45px; height: 45px; } .eds-icon.icon-truth svg { width: 28px; height: 28px; transform: translateY(1px); } .eds-icon.icon-youtube svg { width: 22px; height: 22px; } /* Fallback für Icons ohne spezifische Klasse */ .eds-icon:not([class*="icon-"]) svg { width: 22px; height: 22px; } /* ===== TOOLTIPS - Nur Text, kein Rahmen, näher dran ===== */ .eds-icon::after { content: attr(data-tooltip); position: absolute; top: -22px; left: 50%; transform: translateX(-50%); background: transparent; border: none; color: var(--cw1); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .eds-icon:hover::after { opacity: 1; } /* Kein Pfeil mehr */ .eds-icon::before { display: none; } /* ===== INACTIVE ICONS ===== */ .eds-icon.inactive { opacity: 0.4; cursor: default; } .eds-icon.inactive:hover { transform: none; background: transparent; } /* ===== KONTEXT: HELLER HINTERGRUND (Content, Share) ===== */ /* Überschreibt --icon-color für diesen Kontext */ .eds-icon--on-light, .share-section .eds-icon, .content-box .eds-icon, .cont-gold .eds-icon, .cont-white .eds-icon { --icon-color: var(--ic3); background: var(--bg7); border: 1px solid rgba(0,0,0,0.1); } .eds-icon--on-light:hover, .share-section .eds-icon:hover, .content-box .eds-icon:hover, .cont-gold .eds-icon:hover, .cont-white .eds-icon:hover { --icon-color-hover: var(--cw1); background: var(--ac1); border-color: var(--ac1); } /* ===== MEDIA ICONS (Video, Audio, Voice, Blog) ===== */ .eds-icon.icon-video svg { width: 35px; height: 35px; } .eds-icon.icon-audio svg { width: 33px; height: 33px; } .eds-icon.icon-voice svg { width: 33px; height: 33px; } .eds-icon.icon-blog svg { width: 32px; height: 32px; } .eds-icon.icon-whatsapp svg { width: 26px; height: 26px; } .eds-icon.icon-email svg { width: 24px; height: 24px; } /* ===== MEDIA ICONS CONTAINER ===== */ /* Inline-Anzeige der Format-Icons (z.B. in Blog-Meta) */ .eds-media-icons { display: inline-flex; gap: 8px; align-items: center; } .eds-media-icons .eds-icon { width: 36px; height: 36px; background: transparent; border: none; cursor: default; } /* Kleinere Version für Listen/Übersichten */ .eds-media-icons--small .eds-icon { width: 28px; height: 28px; } .eds-media-icons--small .eds-icon svg { width: 20px !important; height: 20px !important; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .eds-icons { gap: 16px; } .eds-icon { width: 40px; height: 40px; } } /* SEKT73-TOOLTIPS */ /* ===================================================== GLOBALE TOOLTIPS Einheitliches Design überall: Dunkelrot, weiß, 220px ===================================================== */ /* === EINFACHE TOOLTIPS (nur Text, via data-tooltip) === */ [data-tooltip] { position: relative; cursor: help; } /* CSS-Tooltips deaktiviert - JS-System in SEKT50 uebernimmt (position:fixed) */ [data-tooltip]::after { display: none !important; } [data-tooltip]:hover::after { display: none !important; } /* Kurze Tooltips (optional: data-tooltip-short) */ [data-tooltip-short]::after { width: auto; white-space: nowrap; min-width: 80px; } /* === TOOLTIPS fuer .ae/.zb via ::before === Diese Links haben ::after fuer den Pfeil, darum laeuft der Tooltip ueber ::before */ [data-tooltip-before] { position: relative; cursor: pointer; } /* CSS ::before Tooltips deaktiviert - JS-System uebernimmt */ [data-tooltip-before]::before { display: none !important; } [data-tooltip-before]:hover::before { display: none !important; } /* === TOOLTIP-BOX (mit HTML-Inhalt, Links möglich) === */ .eds-tooltip-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: help; } .eds-tooltip-box { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #B81818; color: var(--c-white, #fff); padding: 10px 16px; border-radius: 6px; font-size: 0.92rem; line-height: 1.4; width: 220px; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 1000; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* Sichtbar bei Hover */ .eds-tooltip-trigger:hover .eds-tooltip-box { opacity: 1; visibility: visible; pointer-events: auto; } /* Link im Tooltip */ .eds-tooltip-box a { color: var(--c-gold, #C9A227); font-weight: 600; text-decoration: underline; } .eds-tooltip-box a:hover { color: white; } /* === HILFE-BUTTON (Fragezeichen) - wie Ansicht-Toggle === Nutzt .eds-ansicht-btn Basis-Styling aus SEKT41 Hier nur spezifische Anpassungen für das ? */ .eds-hilfe-btn { width: 40px; height: 40px; border: none; border-radius: 6px; background: #ffeeee; color: var(--ct1); font-size: 1.4em; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 2px 2px 8px var(--c-gradient-end); transition: all 0.3s ease; } .eds-hilfe-btn:hover { background: #B81818; color: white; } /* === MATRIX-LISTEN im Modal === */ .eds-matrix-liste { color: var(--ci1); font-size: 0.95em; margin-bottom: 1em; } /* MI geoeffnet = dauerhaft gruen in Matrix-Listen */ .eds-matrix-liste a.mi.open { color: var(--cl2); } /* --- Tooltip-Positionierung: nicht am Container-Rand zerreissen --- */ /* Tooltip bekommt overflow-Schutz und bleibt zusammen */ [data-tooltip]::after { max-width: min(220px, 90vw); word-wrap: break-word; overflow-wrap: break-word; } /* Wiki-Links in zweispaltigen Containern: Tooltip ueber volle Breite */ .zit-rel [data-tooltip], .zit-spi [data-tooltip], .zit-nat [data-tooltip], .zit-alt [data-tooltip], .zit-neu [data-tooltip], .zit-mi [data-tooltip] { position: static; } .zit-rel [data-tooltip]::after, .zit-spi [data-tooltip]::after, .zit-nat [data-tooltip]::after, .zit-alt [data-tooltip]::after, .zit-neu [data-tooltip]::after, .zit-mi [data-tooltip]::after { position: absolute; left: 0; right: auto; transform: none; bottom: calc(100% + 4px); } /* Allgemein: Tooltip-Container braucht overflow visible */ .eds-wiki-link { position: relative; display: inline; } /* SEKT74-STICKY-SHARE */ /* ===== STICKY SHARE SIDEBAR ===== */ /* Vertikale Leiste links, MITTIG im roten Bereich, mit Dropdown */ /* Erscheint erst beim Scrollen (wenn Header Hintergrund hat) */ /* Asymmetrischer Container-Padding NUR wenn Content nicht max-width hat */ @media (min-width: 769px) and (max-width: 1300px) { .container { padding-left: clamp(52px, 5vw, 60px); padding-right: var(--container-padding); } } /* Versteckt bis gescrollt wird */ .eds-sticky-share { position: fixed; left: clamp(4px, calc((100vw - 1200px) / 4 - 20px), 80px); top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); padding: clamp(10px, 1.2vw, 14px) 4px; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } /* Sichtbar wenn Header gescrollt ist */ body.header-scrolled .eds-sticky-share { opacity: 1; visibility: visible; } /* Einzelnes Icon mit Dropdown-Container */ .eds-sticky-item { position: relative; } /* Das Icon selbst - wie Footer (44px), minimal 36px */ .eds-sticky-share .eds-icon { width: clamp(36px, 3.8vw, 44px); height: clamp(36px, 3.8vw, 44px); background: transparent; border: 1px solid var(--ic1); border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* SVG nutzt Icon-Variable */ .eds-sticky-share .eds-icon svg { fill: var(--ic1); transition: fill var(--transition); } /* Standard SVG Groesse - wie Footer */ .eds-sticky-share .eds-icon svg { width: clamp(18px, 2.2vw, 24px); height: clamp(18px, 2.2vw, 24px); } /* Spezifische Groessen - angepasst */ .eds-sticky-share .eds-icon.icon-x svg { width: clamp(16px, 2vw, 22px); height: clamp(16px, 2vw, 22px); } .eds-sticky-share .eds-icon.icon-facebook svg { width: clamp(20px, 2.4vw, 28px); height: clamp(20px, 2.4vw, 28px); } .eds-sticky-share .eds-icon.icon-telegram svg { width: clamp(22px, 2.6vw, 30px); height: clamp(22px, 2.6vw, 30px); } .eds-sticky-share .eds-icon.icon-youtube svg { width: clamp(16px, 2vw, 22px); height: clamp(16px, 2vw, 22px); } .eds-sticky-share .eds-icon.icon-whatsapp svg { width: clamp(18px, 2.2vw, 26px); height: clamp(18px, 2.2vw, 26px); } .eds-sticky-share .eds-icon.icon-email svg { width: clamp(18px, 2.2vw, 24px); height: clamp(18px, 2.2vw, 24px); } /* Hover wie Footer - weiss + Glow */ .eds-sticky-share .eds-icon:hover { transform: scale(1.05); box-shadow: 0 0 16px rgba(255, 255, 255, 0.5); border-color: var(--ic2); } .eds-sticky-share .eds-icon:hover svg { fill: var(--ic2); } /* Dropdown (versteckt) - Mittelrot */ .eds-sticky-dropdown { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; background: #8B0000; border-radius: 6px; padding: 6px 0; min-width: 170px; box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } /* Dropdown sichtbar bei Hover */ .eds-sticky-item:hover .eds-sticky-dropdown, .eds-sticky-item:focus-within .eds-sticky-dropdown { opacity: 1; visibility: visible; } /* Dropdown-Links - nutzt Icon-Variable, bei Hover weiss mit Glow */ .eds-sticky-dropdown a { display: block; padding: 10px 16px; color: var(--ic1); text-decoration: none; font-size: 14px; transition: color 0.2s, text-shadow 0.2s; white-space: nowrap; } .eds-sticky-dropdown a:hover { color: var(--ic2); text-shadow: 0 0 16px rgba(255, 255, 255, 0.5); } /* Kleiner Pfeil zum Icon - Weiss */ .eds-sticky-dropdown::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right-color: var(--cw1); } /* Tooltip deaktivieren fuer Sticky Icons */ .eds-sticky-share .eds-icon::after { display: none; } /* ===== MOBILE: Verstecken (wird durch Header-Share ersetzt) ===== */ @media (max-width: 768px) { .eds-sticky-share { display: none; } } /* SEKT80-KARUSSELL */ /* * ============================================================================ * SEKT80-KARUSSELL.css * ============================================================================ * Karussell/Slider mit transform: translateX (keine overflow-Beschneidung) * Stand: 2026-03-15 * ============================================================================ */ /* ============================================================================ CONTAINER - clippt horizontal, laesst Schatten vertikal + seitlich durch ============================================================================ */ .eds-karussell { --visible: 3; --gap: 20px; position: relative; /* Kein overflow hier - das aeussere Element clippt */ } /* Wrapper clippt horizontal mit extra Raum fuer Schatten */ .eds-karussell-wrap { overflow: hidden; /* Extra Padding: oben fuer Hover-Lift, rechts+unten fuer Hover-Schatten */ padding: 12px 24px 22px 4px; margin: -12px -24px -22px -4px; } /* ============================================================================ TRACK - kein overflow, Bewegung per transform: translateX (JS) ============================================================================ */ .eds-karussell-track { display: flex; gap: var(--gap); padding: 4px 0 0 0; transition: transform 0.4s ease; } /* ============================================================================ ITEMS ============================================================================ */ .eds-karussell-item { flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible)); min-width: 0; } /* ============================================================================ NAVIGATION: Pfeil links + Dots + Pfeil rechts ============================================================================ */ .eds-karussell-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; } .eds-karussell-prev, .eds-karussell-next { background: none; border: none; padding: 4px; cursor: pointer; font-size: 0; line-height: 1; flex-shrink: 0; } /* Pfeil-Icons: Custom SVG via mask-image (--c-info, Hover gruen + slide) */ .eds-karussell-prev, .eds-karussell-next { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .eds-karussell-prev::after, .eds-karussell-next::after { content: ''; display: block; width: 32px; height: 32px; mask-image: var(--pfeil-svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--pfeil-svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--ci1); transition: transform 0.3s ease, background-color 0.3s ease; } .eds-karussell-prev::after { transform: scaleX(-1); } .eds-karussell-prev:hover::after { transform: scaleX(-1) translateX(4px); background-color: var(--cl2); } .eds-karussell-next:hover::after { transform: translateX(4px); background-color: var(--cl2); } /* Mehr-Laden Button in der Karussell-Nav */ .eds-mehr-karu { font-size: 0.85em; padding: 0; margin: 0; margin-left: 8px; white-space: nowrap; grid-column: auto; width: auto; background: none !important; border: none !important; line-height: 1; display: flex; align-items: center; } .eds-mehr-karu:hover { background: none !important; color: var(--cl2) !important; } /* Legacy .tp spans ausblenden (falls noch im HTML) */ .eds-karussell-prev .tp, .eds-karussell-next .tp { display: none; } /* Dots-Leiste mit Inline-Pfeilen */ .eds-karussell-dots { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; justify-content: center; padding: 0 0 2px; margin-top: 14px; } /* Inline-Pfeile innerhalb der Dots-Leiste (SVG via mask-image) */ .eds-karussell-arrow { background: none; border: none; padding: 0; cursor: pointer; font-size: 0; line-height: 1; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .eds-karussell-arrow::after { content: ''; display: block; width: 24px; height: 24px; mask-image: var(--pfeil-svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: var(--pfeil-svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--ci1); transition: transform 0.3s ease, background-color 0.3s ease; } .eds-karussell-arrow-prev::after { transform: scaleX(-1); } .eds-karussell-arrow-prev:hover::after { transform: scaleX(-1) translateX(4px); background-color: var(--cl2); } .eds-karussell-arrow-next:hover::after { transform: translateX(4px); background-color: var(--cl2); } .eds-karussell-dot { width: 10px; height: 10px; padding: 0; background: var(--cs1); border: none; border-radius: 50%; cursor: pointer; transition: background 0.3s, transform 0.2s; } .eds-karussell-dot:hover { background: var(--ci1); } .eds-karussell-dot.active { background: var(--cp1); transform: scale(1.2); } /* Pause/Weiter-Text in der Dots-Leiste */ .eds-karussell-pause-inline { background: none; border: none; padding: 0 4px; cursor: pointer; font-size: 0.95em; color: var(--ci1); font-weight: 500; transition: color var(--transition); white-space: nowrap; margin-left: 4px; } .eds-karussell-pause-inline:hover { color: var(--cl2); } /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 1024px) { .eds-karussell[data-visible="4"] { --visible: 3; } } @media (max-width: 980px) { .eds-karussell[data-visible="4"], .eds-karussell[data-visible="3"] { --visible: 2; } } @media (max-width: 650px) { .eds-karussell[data-visible="4"], .eds-karussell[data-visible="3"], .eds-karussell[data-visible="2"] { --visible: 1; } } /* ============================================================================ BLOG-KARUSSELL-KARTE Erbt von .themenseite-karte (SEKT31): Schatten, Hover, Border ============================================================================ */ .eds-karu-blog { padding: 12px; } .eds-karu-blog-bild { flex: 0 0 auto; } .eds-karu-blog-bild img { width: 100%; height: auto; display: block; border-radius: 4px; } .eds-karu-blog-text { flex: 1 1 auto; display: flex; flex-direction: column; font-size: 0.9em; line-height: 1.45; padding-top: 10px; overflow: hidden; } .eds-karu-blog-text p { margin: 0 0 8px 0; } .eds-karu-blog-text p:last-of-type:not(.info) { margin-bottom: auto; } .eds-karu-blog-text .info { margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(197, 165, 90, 0.3); font-size: 0.95em; color: var(--ci1); } .eds-karu-blog-text .info a { color: var(--ci1); font-weight: 600; text-decoration: none; } .eds-karussell-blog-text .info a:hover { color: var(--cl2); } /* SEKT90-RESP-TABLET */ /* Tablet-spezifische Anpassungen */ @media (max-width: 992px) { /* Format-Block Header */ .eds-format-header { gap: var(--space-md); padding: var(--space-md); } .eds-format-image { width: 120px; height: 120px; } /* Tabellen - kleinere Padding */ .eds-tabelle th, .eds-tabelle td { padding: var(--space-xs) var(--space-sm); } /* Beschreibung ausblenden auf Tablet */ .eds-tabelle td.beschreibung { max-width: 200px; } } /* === Anzeigemodul Tablet === */ @media (min-width: 768px) and (max-width: 1024px) { .eds-karussell-item { flex: 0 0 calc(50% - 10px) !important; } } /* SEKT91-RESP-MOBILE */ /* Mobile-spezifische Anpassungen */ @media (max-width: 768px) { /* Login-Tooltip: naeher am Icon auf Mobile */ .menu-login > a[data-tooltip]::after { right: -15px; } /* Bild bleibt Float auch auf Mobile - Text umfliesst */ .eds-format-image { width: 140px; margin-right: var(--space-sm); } /* Mehr Abstand ueber "Was erwartet dich" */ .eds-beschreibung-lang { padding-top: var(--space-md); } /* Filter-Leiste - vertikal, mehr Abstand */ .eds-filter-leiste { flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); margin-bottom: var(--space-lg); } .eds-such-feld, .eds-filter-dropdown { width: 100%; min-width: unset; } /* Tabelle wird zu Karten */ .eds-tabelle { table-layout: auto; border: none; } .eds-tabelle colgroup { display: none; } .eds-tabelle thead { display: none; } .eds-tabelle tbody tr { display: block; margin-bottom: var(--space-md); border: 2px solid var(--cs1); border-radius: 20px; overflow: hidden; } /* Zebra auf Karten */ .eds-tabelle tbody tr:nth-child(odd) { background: var(--cw1); } .eds-tabelle tbody tr:nth-child(even) { background: #ffeeee; } /* LETZTES ELEMENT - kein extra Margin! */ .eds-tabelle tbody tr:last-child { margin-bottom: 0; } /* Karten-Zellen: Grid mit 110px Label-Spalte */ .eds-tabelle td { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-sm); padding: var(--space-sm); border-bottom: 1px solid var(--cs1); border-right: none; width: 100% !important; font-size: var(--fs-bd); text-align: left; } .eds-tabelle td:last-child { border-bottom: none; } /* Label vor dem Inhalt */ .eds-tabelle td::before { content: attr(data-label); font-family: 'Roboto Condensed', 'Roboto', sans-serif; font-weight: 700; color: var(--cp1); text-align: left; } /* Nr. als Karten-Header - gedecktes Rot */ .eds-tabelle td.nr { display: flex; justify-content: center; background: #ba0600; color: var(--cw1) !important; font-size: 1.2em; padding: var(--space-sm); } .eds-tabelle td.nr::before { display: none; } /* Beschreibung - Text nutzt volle Breite der rechten Spalte */ .eds-tabelle td.beschreibung { grid-template-columns: 110px 1fr; } /* Themen nebeneinander */ .eds-tabelle td.tags .eds-thema { display: inline; margin-right: var(--space-xs); } /* Themen-Tags */ .eds-thema { font-size: 0.9em; } /* Links - mehr Abstand zwischen Buttons */ .eds-link-gruppe { display: flex; flex-direction: row; gap: var(--space-sm); } .eds-link-btn { padding: 8px 14px; font-size: 0.9em; } } @media (max-width: 480px) { .eds-format-image { width: 100px; } .eds-tabellen-link { font-size: var(--fs-bd); } .eds-tabellen-link .count { display: inline; } .eds-tabelle tbody tr { border-radius: 16px; } /* Schmalere Label-Spalte auf kleinen Screens */ .eds-tabelle td { grid-template-columns: 90px 1fr; } .eds-tabelle td.beschreibung { grid-template-columns: 90px 1fr; } /* Beitrags-Navigation: zentriert untereinander */ .post-nav-between { flex-direction: column; gap: var(--space-sm); align-items: center; padding: 0 25px var(--space-md) 25px; } } /* === Anzeigemodul Mobile === */ @media (max-width: 767px) { /* Filter: Zeile 1 = Ansicht + Filter, Zeile 2 = Suche + Zeige */ .eds-filter-hauptzeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .eds-filter-hauptzeile .eds-button-block { flex: 1 1 auto; order: 1; } .eds-filter-hauptzeile .eds-filter-toggle { flex: 0 0 auto; order: 2; } .eds-filter-hauptzeile .eds-such-feld { flex: 1 1 55%; min-width: 0; order: 3; } .eds-filter-hauptzeile .eds-zeige-dropdown { flex: 0 0 auto; order: 4; } /* Karussell: 1 Karte */ .eds-karussell-item { flex: 0 0 calc(100% - 0px) !important; } }