/* ============================================================ Plathosys Theme Aktiv über Alle Regeln sind unter .theme-plathosys gescopet, damit das Standard-Horst-Platz-Layout unberührt bleibt. Modul-Basis-Styles (P-01…P-06) liegen in assets/modules/pl-modules.css und werden in BEIDEN Head-Templates geladen, damit die Module auch ohne Plathosys-Skin korrekt rendern. Diese Datei hier liefert nur die theme-spezifische Optik (Hero, Wellen-BG, Headline-Ornamente, Pille, Footer). ============================================================ */ .theme-plathosys { --pl-primary: #1B5BA5; --pl-primary-dark: #0E4592; --pl-light: #E8F0F8; --pl-light-2: #D6E4F0; --pl-text: #333333; --pl-text-muted: #707070; --pl-white: #FFFFFF; } /* ============================================================ Plathosys Main · Hintergrund-Schmuckelement (Schallwellen) ------------------------------------------------------------ Übergroßes, halbtransparentes Schallwellen-Wasserzeichen, das ruhig hinter dem Content liegt. Branding-Element aus dem Plathosys-Logo (konzentrische Wellen). Rein dekorativ. ============================================================ */ .theme-plathosys .plathosys-main { position: relative; } /* Body trägt das übergroße Schallwellen-Wasserzeichen. overflow-x: clip fängt das seitlich weit überstehende Element ab, ohne horizontalen Scroll; clip statt hidden, damit die Y-Achse visible bleibt (Hero-Produktshot ragt raus). Das clip muss auch aufs – body-Overflow wird sonst zum Viewport propagiert und greift nicht zuverlässig. */ html:has(body.theme-plathosys) { overflow-x: clip; } body.theme-plathosys { position: relative; overflow-x: clip; } /* Wrapper füllt exakt die Body-Höhe und clippt das übergroße Wellen-Element – so scrollt es mit, bläht aber weder die Dokumenthöhe noch die Breite auf. */ .theme-plathosys .plathosys-bg-wrap { position: absolute; inset: 0; overflow: clip; z-index: -1; pointer-events: none; } .theme-plathosys .plathosys-bg-waves { position: absolute; /* startet 30vh unter dem Seitenanfang, horizontal zentriert, übergroß – nur ein sanfter Ausschnitt der Wellen ist sichtbar */ top: 30vh; left: 50%; transform: translateX(-50%); width: 5500px; aspect-ratio: 1 / 1; background: url('../images/waves_bg.svg') no-repeat center top / contain; opacity: 0.07; } @media (max-width: 575px) { .theme-plathosys .plathosys-bg-waves { display: none; } } /* ============================================================ Plathosys Hero (unter der HP-Navigation) ============================================================ */ .theme-plathosys .plathosys-hero { position: relative; width: 100%; background-color: var(--pl-primary-dark); background-size: cover; background-position: center; overflow: hidden; margin-bottom: 2rem; } .theme-plathosys .plathosys-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 69, 146, 0.15) 0%, rgba(14, 69, 146, 0.05) 100%); z-index: 1; } .theme-plathosys .plathosys-hero__logo { position: absolute; z-index: 2; } .theme-plathosys .plathosys-hero__tagline { position: absolute; z-index: 2; color: var(--pl-white); font-weight: 300; } .theme-plathosys .plathosys-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; display: block; z-index: 3; } /* Schwebender Produktshot oben rechts (art_hero_product). Hero erlaubt overflow:visible nur wenn das Feld gesetzt ist, damit das Bild halb in den Content-Bereich ragen kann. */ .theme-plathosys .plathosys-hero--with-product { overflow: visible; } .theme-plathosys .plathosys-hero__product { position: absolute; width: auto; height: auto; object-fit: contain; z-index: 4; pointer-events: none; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28)); } /* Hero 1: groß rechts unten, ragt in Content */ .theme-plathosys .plathosys-hero--1 .plathosys-hero__product { right: 4%; bottom: -30%; max-width: 30%; max-height: 135%; } /* Hero 2: kleiner, sitzt rechts mittig, ragt weniger raus */ .theme-plathosys .plathosys-hero--2 .plathosys-hero__product { right: 5%; bottom: -15%; max-width: 24%; max-height: 110%; } /* Hero 3: Produktshot wird im Template gar nicht erst gerendert (vgl. template.php). Das Produkt erscheint stattdessen unterhalb im Freisteller-Slider. */ .theme-plathosys .plathosys-hero--3 .plathosys-hero__product { display: none; } @media (max-width: 767px) { .theme-plathosys .plathosys-hero--1 .plathosys-hero__product, .theme-plathosys .plathosys-hero--2 .plathosys-hero__product { max-width: 38%; max-height: 105%; bottom: -15%; right: 3%; } .theme-plathosys .plathosys-hero--3 .plathosys-hero__product { display: none; } } /* ---- Hero 1: groß (Übersichts-/Startseite) ---- */ .theme-plathosys .plathosys-hero--1 { min-height: 420px; } .theme-plathosys .plathosys-hero--1 .plathosys-hero__logo { left: 5%; top: 55%; transform: translateY(-50%); width: clamp(200px, 30vw, 380px); filter: brightness(0) invert(1); } .theme-plathosys .plathosys-hero--1 .plathosys-hero__tagline { left: 5%; top: 2rem; font-size: clamp(1rem, 1.6vw, 1.5rem); max-width: 50%; } /* ---- Hero 2: mittel (Download-Seite) ---- */ .theme-plathosys .plathosys-hero--2 { min-height: 320px; background-position: right center; } .theme-plathosys .plathosys-hero--2 .plathosys-hero__logo { left: 6%; top: 55%; transform: translateY(-50%); width: clamp(180px, 22vw, 280px); filter: brightness(0) invert(1); } .theme-plathosys .plathosys-hero--2 .plathosys-hero__tagline { left: 6%; top: 1.5rem; font-size: clamp(0.95rem, 1.4vw, 1.25rem); max-width: 45%; } /* ---- Hero 3: klein (Produkt-Detailseite) ---- */ .theme-plathosys .plathosys-hero--3 { min-height: 280px; background-color: var(--pl-light); } .theme-plathosys .plathosys-hero--3 .plathosys-hero__overlay { display: none; } .theme-plathosys .plathosys-hero--3 .plathosys-hero__logo { right: 6%; bottom: 4rem; top: auto; width: clamp(160px, 18vw, 240px); } .theme-plathosys .plathosys-hero--3 .plathosys-hero__tagline { display: none; } /* ============================================================ Headline Decoration · Plathosys ------------------------------------------------------------ Vier Headline-Typen laut Layout (_layout/briefing-headlines.md): A .pl-headline--hero Hero-/Seiten-H1 — Ring-Ornament VOR dem ersten Wort + Schwung-Bogen unter der Zeile. Links. Markup: erstes Wort in . B .pl-headline--section Section-H2 — nur Schwung-Bogen unter der Zeile. Zentriert. C (keine Klasse) Section-H2 ohne Ornament. Zentriert per Modul-CSS (z. B. .pl-cards__headline). D .pl-headline--card Karten-H3 — Ring-Ornament mittig ÜBER dem Text (nur obere Bögen). Zentriert. / bleibt ein separater Marker: Farbakzent im Fließtext einer Headline, unabhängig von den Typen. ============================================================ */ /* / = Farbakzent, kein Schrägdruck */ .theme-plathosys :is(h1, h2, h3, h4) :is(em, i) { font-style: normal; color: var(--pl-primary); } /* ---- Typ A — Hero-Headline (Ring vor Wort + Schwung-Bogen) ---- */ .theme-plathosys .pl-headline--hero { position: relative; display: block; width: fit-content; max-width: 100%; isolation: isolate; padding-left: 0.5em; /* Raum für Ring links vorm Wort */ padding-bottom: 0.55em; /* Raum für Schwung-Bogen */ } .theme-plathosys .pl-headline--hero .pl-headline__lead { position: relative; display: inline-block; } /* Ring sitzt VOR dem ersten Buchstaben, halbtransparent dahinter */ .theme-plathosys .pl-headline--hero .pl-headline__lead::before { content: ''; position: absolute; left: -0.08em; top: 50%; transform: translate(-50%, -50%); width: 1.5em; height: 1.5em; background: url('../images/waves_around.svg?v=6') no-repeat center / contain; opacity: 0.55; z-index: -1; pointer-events: none; } /* Schwung-Bogen unter der Zeile, linksbündig, ~60 % Breite */ .theme-plathosys .pl-headline--hero::after { content: ''; position: absolute; left: 0.5em; bottom: 0; width: 60%; height: 0.4em; background: url('../images/wave_underline.svg?v=1') no-repeat left center / contain; pointer-events: none; } /* ---- Typ B — Section-Headline mit Schwung-Bogen (zentriert) ---- */ .theme-plathosys .pl-headline--section { position: relative; display: block; width: fit-content; /* schrumpft auf Textbreite → Bogen koppelbar */ max-width: 100%; margin-inline: auto; text-align: center; padding-bottom: 0.5em; } .theme-plathosys .pl-headline--section::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 85%; height: 0.4em; background: url('../images/wave_underline.svg?v=1') no-repeat center / contain; pointer-events: none; } /* ---- Typ D — Karten-Titel mit Ring oben mittig (zentriert) ---- Ring oben (::before) ist statisch. Der Schwung-Bogen unter dem Titel (::after) ist per Default unsichtbar und erscheint beim Hover/Fokus der Karte — Signal, dass die Karte klickbar/aktiv ist. */ .theme-plathosys .pl-headline--card { position: relative; display: block; width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; padding-top: 1.15em; /* Raum für Ring oben (statisch) */ padding-bottom: 1.15em; /* Raum für gespiegelten Ring unten (Hover) */ } .theme-plathosys .pl-headline--card::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2.1em; height: 0.95em; background: url('../images/waves_top.svg?v=1') no-repeat center / contain; opacity: 0.6; pointer-events: none; } /* Schallwellen-Ring unter dem Karten-Titel — Gegenstück zum Ring darüber, nur nach unten gewölbt. Wir spiegeln dieselbe SVG (waves_top.svg) per scaleY(-1), damit Ober- und Unter-Ring exakt symmetrisch sind. Standardmäßig unsichtbar, faded beim Hover/Fokus der Karte ein. */ .theme-plathosys .pl-headline--card::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) scaleY(-1); width: 2.1em; height: 0.95em; background: url('../images/waves_top.svg?v=1') no-repeat center / contain; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .theme-plathosys .pl-cards__card:hover .pl-headline--card::after, .theme-plathosys .pl-cards__card:focus-within .pl-headline--card::after { opacity: 0.6; /* gleiche Deckkraft wie der Ring oben */ } @media (max-width: 767px) { .theme-plathosys .pl-headline--hero .pl-headline__lead::before { width: 1.3em; height: 1.3em; } .theme-plathosys .pl-headline--card { padding-top: 1em; padding-bottom: 1em; } .theme-plathosys .pl-headline--card::before, .theme-plathosys .pl-headline--card::after { width: 1.8em; height: 0.8em; } } /* ============================================================ Soft-Wave Section (hellblauer Wellen-Hintergrund zwischen Sections) ============================================================ */ .theme-plathosys .pl-wave-section { position: relative; background-color: var(--pl-light); padding: 4rem 0; margin: 3rem 0; } .theme-plathosys .pl-wave-section::before, .theme-plathosys .pl-wave-section::after { content: ''; position: absolute; left: 0; right: 0; height: 40px; background-color: var(--pl-light); } .theme-plathosys .pl-wave-section::before { top: -40px; clip-path: ellipse(80% 100% at 50% 100%); } .theme-plathosys .pl-wave-section::after { bottom: -40px; clip-path: ellipse(80% 100% at 50% 0%); } /* ============================================================ Pill Button (genutzt in Footer-Nav, Variant-Switch, etc.) ============================================================ */ .theme-plathosys .pl-pill { display: inline-block; padding: 0.55rem 1.6rem; border: 1px solid var(--pl-primary); border-radius: 999px; color: var(--pl-primary); background-color: transparent; text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease; } .theme-plathosys .pl-pill:hover, .theme-plathosys .pl-pill.active { background-color: var(--pl-primary); color: var(--pl-white); } /* ============================================================ Plathosys Footer (Pillen-Nav + Kontakt + Bottom-Bar) ============================================================ */ .theme-plathosys .pl-footer { background-color: var(--pl-white); color: var(--pl-text); padding-top: 3rem; border-top: 1px solid var(--pl-light-2); } .theme-plathosys .pl-footer-nav { margin-bottom: 3rem; } .theme-plathosys .pl-footer-nav ul { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .theme-plathosys .pl-footer-nav li { flex: 0 0 auto; } .theme-plathosys .pl-footer-contact { color: var(--pl-text); padding-bottom: 2rem; } .theme-plathosys .pl-footer-contact a { color: var(--pl-primary); text-decoration: none; } .theme-plathosys .pl-footer-contact a:hover { text-decoration: underline; } .theme-plathosys .pl-footer-social img { width: 28px; height: auto; margin-right: 0.75rem; } .theme-plathosys .pl-footer-bottom { border-top: 1px solid var(--pl-light-2); padding: 0.75rem 0; margin-top: 1rem; } .theme-plathosys .pl-footer-bottom ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; } .theme-plathosys .pl-footer-bottom a { color: var(--pl-text-muted); text-decoration: none; font-size: 0.875rem; } .theme-plathosys .pl-footer-bottom a:hover { color: var(--pl-primary); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 767px) { .theme-plathosys .plathosys-hero--1 { min-height: 300px; } .theme-plathosys .plathosys-hero--2 { min-height: 240px; } .theme-plathosys .plathosys-hero--3 { min-height: 220px; } .theme-plathosys .plathosys-hero__tagline { max-width: 90%; font-size: 1rem; } .theme-plathosys .plathosys-hero--1 .plathosys-hero__logo, .theme-plathosys .plathosys-hero--2 .plathosys-hero__logo { left: 50%; transform: translate(-50%, -50%); } .theme-plathosys .plathosys-hero--3 .plathosys-hero__logo { right: 50%; transform: translate(50%, -50%); } }