/* Theme Name: KjG Ober-Erlenbach Responsive Author: KjG Ober-Erlenbach Description: Modernes, mobil-optimiertes Redesign des KjG-Themes. Markenfarben (Orange/Blau) und das Kirchen-Motiv bleiben als Wiedererkennung erhalten, Layout und Typografie sind komplett neu. Version: 2.0 */ :root { --color-primary: #FF8C00; --color-primary-dark: #d97600; --color-accent: #3E8FD0; --color-bg: #F5F8FC; --color-bg-tint: #E7F1FC; --color-surface: #ffffff; --color-text: #22262b; --color-text-muted: #5b6570; --color-dark: #17212b; --radius-lg: 18px; --radius-md: 12px; --radius-sm: 8px; --shadow-sm: 0 2px 10px rgba(23, 33, 43, 0.06); --shadow-md: 0 12px 30px -10px rgba(23, 33, 43, 0.18); --max-width: 1140px; --font-heading: "Poppins", "Segoe UI", sans-serif; --font-body: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Sicherheitsnetz: verhindert horizontales Wischen/Scrollen der ganzen Seite, falls einzelne Inhalte (alte Blogpost-Bilder, Tabellen, etc.) trotz der Regeln unten mal breiter als der Bildschirm sind. Bewusst nur auf , nicht auf : overflow auf body würde den "nächsten scrollbaren Vorfahren" für position:sticky im Header verändern und dessen Sticky-Verhalten kaputt machen. */ overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, iframe, video, input[type="image"] { max-width: 100%; height: auto; display: block; } table { max-width: 100%; display: block; overflow-x: auto; } a { color: var(--color-primary); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--color-primary-dark); } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 600; line-height: 1.25; margin: 0 0 0.6em; color: var(--color-text); } h1 { text-align: center; } h2 { font-size: 1.4rem; color: var(--color-primary-dark); } h3 { font-size: 1.1rem; color: var(--color-accent); font-style: normal; } h4 { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } h5 { font-size: 1rem; color: var(--color-primary-dark); } p { font-size: 1rem; line-height: 1.65; color: var(--color-text); } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } /* ---------- Sticky Navigation ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(10px); box-shadow: var(--shadow-sm); } .nav-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: flex; align-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-primary); white-space: nowrap; } .brand:hover { color: var(--color-primary-dark); } .social-icons { display: flex; align-items: center; gap: 0.5rem; } .social-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-bg-tint); color: var(--color-accent); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .social-btn svg { width: 18px; height: 18px; fill: currentColor; } .social-btn--instagram svg { fill: none; } .icon-mask { display: block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .icon-mask--seelenbohrer { -webkit-mask-image: url(images/seelenbohrer.png); mask-image: url(images/seelenbohrer.png); } .social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .social-btn--facebook:hover { background: #1877f2; color: #fff; } .social-btn--instagram:hover { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; } .social-btn--kjg:hover { background: var(--color-primary); color: #fff; } .desktop-nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; } .desktop-nav a { position: relative; font-weight: 600; font-size: 0.95rem; color: var(--color-text); padding: 0.25rem 0; } .desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--color-primary); transition: width 0.2s ease; } .desktop-nav a:hover { color: var(--color-primary); } .desktop-nav a:hover::after { width: 100%; } .nav-right { display: flex; align-items: center; gap: 1.5rem; } .nav-toggle { position: absolute; left: -9999px; } .nav-toggle-label { display: none; width: 26px; height: 20px; position: relative; cursor: pointer; z-index: 200; } .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { content: ""; position: absolute; left: 0; width: 100%; height: 3px; border-radius: 2px; background: var(--color-text); transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease; } .nav-toggle-label span { top: 9px; } .nav-toggle-label span::before { top: -8px; } .nav-toggle-label span::after { top: 8px; } /* * Das Menü-Overlay (.mobile-nav) liegt im HTML ausserhalb von

, * damit backdrop-filter auf .site-header keinen eigenen containing block * erzeugt, der das fixierte Overlay auf die Höhe der Nav-Leiste * einklemmen würde. Deshalb hier :has() statt Geschwister-Selektor (~), * das funktioniert unabhängig von der Verschachtelungstiefe. */ body:has(#nav-toggle:checked) .nav-toggle-label span { background: transparent; } body:has(#nav-toggle:checked) .nav-toggle-label span::before { transform: translateY(8px) rotate(45deg); } body:has(#nav-toggle:checked) .nav-toggle-label span::after { transform: translateY(-8px) rotate(-45deg); } body:has(#nav-toggle:checked) { overflow: hidden; } .mobile-nav { display: none; } @media (max-width: 820px) { .desktop-nav { display: none; } .nav-toggle-label { display: block; } .mobile-nav { display: block; position: fixed; inset: 0; background: var(--color-surface); padding: 6rem 2rem 2rem; transform: translateX(100%); transition: transform 0.28s ease; z-index: 150; overflow-y: auto; } body:has(#nav-toggle:checked) .mobile-nav { transform: translateX(0); } .mobile-nav ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .mobile-nav ul a { display: block; padding: 0.9rem 0.25rem; font-size: 1.3rem; font-weight: 600; color: var(--color-text); border-bottom: 1px solid #eef1f4; } .site-header .social-icons { display: none; } .mobile-nav .social-icons { gap: 0.9rem; } .mobile-nav .social-btn { width: 44px; height: 44px; } .mobile-nav .social-btn svg, .mobile-nav .social-btn .icon-mask { width: 22px; height: 22px; } } /* ---------- Hero / Banner ---------- */ .hero { width: 100%; overflow: hidden; position: relative; background: var(--color-bg); } .hero-track { width: 100%; /* Die Banner sind alle 1465x180px (sehr breit/flach) - das Seitenverhältnis sorgt dafür, dass das komplette Bild sichtbar ist, statt hineinzuzoomen. */ aspect-ratio: 1465 / 180; position: relative; } .hero-slide { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; } .hero-slide.active { opacity: 1; } /* ---------- Layout ---------- */ .main { max-width: var(--max-width); margin: 2rem auto; padding: 0 1.25rem; } /* * Info-Leiste zwischen dem 3. und 4. Artikel (Newsletter, Termine, Spenden). * Farblich abgesetzt vom weissen Feed, damit sie klar als eigener Block * erkennbar ist. */ .info-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; background: linear-gradient(135deg, var(--color-bg-tint), #fdf1e2); border-radius: var(--radius-lg); padding: 1.5rem; } @media (max-width: 800px) { .info-bar { grid-template-columns: 1fr; } } .info-bar__item { padding: 1.5rem; } .info-bar__item h2 { font-size: 1.1rem; margin-bottom: 0.75rem; } .info-bar__fineprint { font-size: 0.75rem; color: var(--color-text-muted); } .card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; transition: box-shadow 0.2s ease, transform 0.2s ease; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ---------- Blog ---------- */ .blog-list { display: flex; flex-direction: column; gap: 1.5rem; } .post-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-wrap: break-word; padding: 1.5rem; transition: box-shadow 0.2s ease, transform 0.2s ease; } .post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .post-meta-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .post-card h2 { margin-bottom: 0.5rem; font-size: 1.3rem; } .post-card h2 a { color: var(--color-text); } .post-card h2 a:hover { color: var(--color-primary); } .entry-summary p { margin: 0; } .continueReading { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); } .continueReading:hover { color: var(--color-primary-dark); } /* * Bilder im vollständigen Beitrag: WordPress gibt jedes Bild als eigenen * Block (

) hintereinander aus. Damit das nicht wie eine lange * Blätter-Strecke aus riesigen Einzelbildern wirkt, werden Absätze weiter * untereinander angezeigt (100% Breite), aber aufeinanderfolgende Bilder * fliessen als kompaktes Foto-Raster nebeneinander (fixe Höhe, Breite nach * Seitenverhältnis) - ähnlich einer Foto-Leiste statt einzelner Riesenbilder. */ .entry-content { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; } .entry-content > p { flex: 1 1 100%; margin: 0 0 1rem; } .entry-content figure { flex: 0 0 auto; margin: 0 0 0.6rem; } .entry-content img { height: 190px !important; width: auto !important; max-width: 100% !important; object-fit: cover; display: block; border-radius: var(--radius-md); } /* * WordPress lädt für Beiträge automatisch sein eigenes Block-CSS mit, das * Galerie-Blöcke ("wp:gallery") als eigenständiges Flex-Layout mit fixen * Breiten pro Bild rendert - das sprengt sonst unsere Kartenbreite (Bilder * liefen über den Seitenrand). Hier wird das gezielt überschrieben, damit * Galerie-Bilder sich genauso wie einzelne Bilder ins Foto-Raster einfügen. */ .entry-content .wp-block-gallery { display: flex !important; flex-wrap: wrap !important; gap: 0.6rem !important; /* Als Flex-Kind von .entry-content muss die Galerie die volle Zeile für sich beanspruchen (flex-shrink:0 würde sonst dazu führen, dass der Browser ihre "natürliche" Breite berechnet, als stünden alle Bilder unverpackt in einer Reihe - das lief dann über den Kartenrand). */ flex: 1 1 100% !important; width: 100% !important; } /* * Höhere Spezifität nötig (Klassen doppelt notiert): WordPress belegt bei * zugeschnittenen Galerien ("is-cropped") die Bildgrösse ebenfalls mit * !important UND einer spezifischeren Selektorkette - sonst gewinnt WP. */ .entry-content .wp-block-gallery.wp-block-gallery .wp-block-image.wp-block-image { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; } .entry-content .wp-block-gallery.wp-block-gallery .wp-block-image.wp-block-image img { height: 190px !important; width: auto !important; max-width: 100% !important; object-fit: cover !important; } @media (max-width: 600px) { .entry-content img { height: 140px !important; } .entry-content .wp-block-gallery.wp-block-gallery .wp-block-image.wp-block-image img { height: 140px !important; } } .pagination { text-align: center; font-weight: 600; } .info-bar__item input[type="text"], .info-bar__item input[type="email"] { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid #dbe3ea; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem; margin-bottom: 0.6rem; } .info-bar__item input[type="submit"], .info-bar__item button { background: var(--color-primary); color: #fff; border: none; padding: 0.7rem 1.2rem; border-radius: 999px; font-family: var(--font-body); font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .info-bar__item input[type="submit"]:hover, .info-bar__item button:hover { background: var(--color-primary-dark); } .event-item { padding: 0.75rem 0 0.75rem 0.9rem; border-left: 3px solid var(--color-primary); margin-bottom: 0.75rem; } .event-item h3 { margin-bottom: 0.15rem; font-size: 1rem; } .event-item h4 { margin-bottom: 0.35rem; } /* ---------- Einzelseiten / statische Seiten ---------- */ .textblock { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.75rem; line-height: 1.65; overflow-wrap: break-word; } /* Abstand zwischen mehreren Kacheln auf derselben Seite (z.B. Kinderfreizeit, Über uns) - automatisch, ohne dass jede Seite das selbst regeln muss. */ .textblock + .textblock { margin-top: 1.5rem; } .textblock .author-avatar { float: right; margin-left: 1rem; } .center { margin-left: auto; margin-right: auto; max-width: 80%; } @media (max-width: 700px) { .center { max-width: 100%; } } .flexible { height: auto; max-width: 100%; border-radius: var(--radius-sm); } /* ---------- Team / Über uns ---------- */ .team-hero-photo { width: 100%; border-radius: var(--radius-lg); margin: 1.5rem 0; } .team-section__heading { margin-top: 2rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-bg-tint); } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin: 1.5rem 0 2.5rem; } .team-card { background: var(--color-bg); border-radius: var(--radius-lg); padding: 1.25rem; text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease; } .team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .team-card__photo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 auto 1rem; } .team-card__name { margin-bottom: 0.75rem; color: var(--color-primary-dark); } .team-card__facts { margin: 0; text-align: left; font-size: 0.85rem; } .team-card__facts dt { font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.7rem; margin-top: 0.75rem; } .team-card__facts dt:first-child { margin-top: 0; } .team-card__facts dd { margin: 0.15rem 0 0; line-height: 1.4; } /* ---------- Kinderfreizeit / Tagesablauf ---------- */ .day-timeline { margin-top: 1.5rem; } .day-step { display: flex; align-items: center; gap: 2.5rem; padding: 2rem 0; border-bottom: 1px solid var(--color-bg-tint); } .day-step:last-child { border-bottom: none; padding-bottom: 0; } .day-step:first-child { padding-top: 0; } .day-step:nth-child(even) { flex-direction: row-reverse; } .day-step__content { flex: 1 1 320px; } .day-step__time { display: inline-block; background: var(--color-primary); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.85rem; border-radius: 999px; margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: 0.03em; } .day-step__photos { flex: 1 1 320px; display: grid; gap: 0.6rem; } .day-step__photos--count-2 { grid-template-columns: 1fr 1fr; } .day-step__photos img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-lg); } @media (max-width: 700px) { .day-step, .day-step:nth-child(even) { flex-direction: column; align-items: stretch; gap: 1.25rem; } /* flex-basis:320px war für die Breite im Desktop-Zeilenlayout gedacht; im gestapelten Mobile-Layout gilt sie sonst als Höhe und reißt eine große Lücke unter dem kleineren Bild auf. */ .day-step__content, .day-step__photos { flex: 1 1 auto; } .day-step__photos img { height: 180px; } } .checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .checklist li { position: relative; padding-left: 1.9rem; line-height: 1.5; } .checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0.1rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ---------- Footer ---------- */ .site-footer { position: relative; margin-top: 3rem; background: var(--color-bg-tint); overflow: hidden; } .site-footer::before { content: ""; position: absolute; inset: 0; background-image: url("images/2_edit.jpg"); background-repeat: no-repeat; background-position: bottom right; background-size: cover; opacity: 0.35; } .footer-inner { position: relative; max-width: var(--max-width); margin: 0 auto; padding: 2rem 1.25rem 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; } .footerlinks { color: var(--color-text); font-weight: 600; font-size: 0.9rem; } .footerlinks:hover { color: var(--color-primary-dark); } .footer-copy { font-size: 0.8rem; color: var(--color-text-muted); text-align: right; } @media (max-width: 600px) { .footer-inner { flex-direction: column; align-items: flex-start; } .footer-copy { text-align: left; } } /* ---------- Lightbox (Bildvorschau) ---------- */ body.kjg-lightbox-open { overflow: hidden; } .entry-content figure a, .textblock figure a, .entry-content figure img, .textblock figure img { cursor: zoom-in; } .kjg-lightbox { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(15, 20, 26, 0.9); align-items: center; justify-content: center; padding: 2rem; } .kjg-lightbox.is-open { display: flex; } .kjg-lightbox__img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .kjg-lightbox__close { position: absolute; top: 1.25rem; right: 1.5rem; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .kjg-lightbox__close:hover { background: rgba(255, 255, 255, 0.3); }