/* Theme Name: Grundschule Horn Theme URI: https://grundschule-horn.de Author: Grundschule Horn Description: Massgeschneidertes Theme fuer die Grundschule Horn in Hamburg. Regenbogen-Farbidentitaet, lokal eingebundene Schriften, ohne externe Dienste. Version: 1.6.1 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: grundschule-horn Tags: education, custom-colors, custom-menu, custom-logo, accessibility-ready, block-patterns */ /* ========================================================================== Schriften - lokal eingebunden, keine Verbindung zu Google ========================================================================== */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); } /* ---------- 1. Design-Tokens ---------- */ :root { /* Regenbogen-Identität */ --rb-rot: #E4563F; --rb-orange: #EF8C3A; --rb-gelb: #F0BC2E; --rb-gruen: #3FA372; --rb-blau: #2F7DC4; --rb-violett: #7C5CC4; /* Neutrale Basis */ --ink: #1E2430; --ink-soft: #4A5262; --ink-mute: #6E7686; --line: #E6E1D8; --paper: #FFFCF7; --paper-2: #FFFFFF; --paper-3: #F6F1E8; /* Aktueller Bereichsakzent – wird pro Seite überschrieben */ --accent: var(--rb-blau); --accent-soft: #EAF2FA; --accent-deep: #1F5B92; /* Form */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(30, 36, 48, .06), 0 2px 8px rgba(30, 36, 48, .05); --shadow-md: 0 2px 4px rgba(30, 36, 48, .05), 0 12px 28px rgba(30, 36, 48, .08); --shadow-lg: 0 4px 8px rgba(30, 36, 48, .05), 0 24px 56px rgba(30, 36, 48, .11); --wrap: 1140px; --wrap-narrow: 780px; --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif; } /* Bereichsakzente – gesetzt über data-bereich am */ body[data-bereich="ueber-uns"] { --accent: var(--rb-rot); --accent-soft: #FBEDEA; --accent-deep: #A83421; } body[data-bereich="schulleben"] { --accent: var(--rb-orange); --accent-soft: #FDF1E5; --accent-deep: #B2621D; } body[data-bereich="ganztag"] { --accent: var(--rb-gruen); --accent-soft: #E8F4EE; --accent-deep: #276F4B; } body[data-bereich="eltern-service"] { --accent: var(--rb-blau); --accent-soft: #E9F1FA; --accent-deep: #1F5B92; } body[data-bereich="kontakt"] { --accent: var(--rb-violett); --accent-soft: #F0EBFA; --accent-deep: #56399A; } body[data-bereich="start"] { --accent: var(--rb-blau); --accent-soft: #E9F1FA; --accent-deep: #1F5B92; } body[data-bereich="recht"] { --accent: #5B6474; --accent-soft: #EEEFF2; --accent-deep: #3A414E; } /* Rechtsseiten: schmaler Lesetext */ .legal { max-width: 760px; } .legal h2 { margin-top: 1.6em; } .legal h3 { margin-top: 1.4em; } .legal ul { padding-left: 20px; color: var(--ink-soft); } .legal li { margin-bottom: .5em; } /* ---------- 2. Reset & Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 128px; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-deep); text-underline-offset: 3px; } a:hover { color: var(--accent); } h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; letter-spacing: -0.022em; margin: 0 0 .5em; color: var(--ink); } h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; } h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; } .wrap-narrow { max-width: var(--wrap-narrow); } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; transition: top .18s; } .skip-link:focus { top: 12px; color: #fff; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- 3. Regenbogen-Motiv ---------- */ .rainbow-bar { height: 6px; display: flex; width: 100%; } .rainbow-bar span { flex: 1; } .rainbow-bar span:nth-child(1) { background: var(--rb-rot); } .rainbow-bar span:nth-child(2) { background: var(--rb-orange); } .rainbow-bar span:nth-child(3) { background: var(--rb-gelb); } .rainbow-bar span:nth-child(4) { background: var(--rb-gruen); } .rainbow-bar span:nth-child(5) { background: var(--rb-blau); } .rainbow-bar span:nth-child(6) { background: var(--rb-violett); } /* ---------- 4. Logoband, Kopfbereich & Navigation ---------- */ /* Das Logoband steht ganz oben und scrollt mit; klebrig ist nur die Navigation. */ .masthead { background: var(--paper); } .masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 20px 18px; } .brand { display: block; flex: none; line-height: 0; } .brand-logo { width: 250px; max-width: 62vw; height: auto; } .brand:focus-visible { outline-offset: 6px; } .masthead-meta { text-align: right; font-size: .92rem; color: var(--ink-soft); } .masthead-meta p { margin: 0; line-height: 1.5; } .masthead-meta strong { color: var(--ink); } @media (max-width: 720px) { .masthead-meta { display: none; } } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 252, 247, .94); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; gap: 20px; min-height: 60px; } .nav-toggle { margin-right: auto; display: none; align-items: center; gap: 9px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 16px; font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink); cursor: pointer; } .nav-toggle-bars { display: grid; gap: 3.5px; } .nav-toggle-bars i { display: block; width: 17px; height: 2.5px; border-radius: 2px; background: var(--ink); } .site-nav { width: 100%; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; } .site-nav .nav-cta-item { margin-left: auto; } .site-nav a { display: block; padding: 9px 15px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-soft); font-weight: 650; font-size: .955rem; white-space: nowrap; transition: background .16s, color .16s; } .site-nav a:hover { background: var(--paper-3); color: var(--ink); } .site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-deep); } .nav-cta { flex: none; background: var(--ink) !important; color: #fff !important; padding: 11px 20px !important; font-weight: 700 !important; } .nav-cta:hover { background: var(--accent-deep) !important; color: #fff !important; } /* Krankmeldung bleibt auf schmalen Geraeten sichtbar, auch bei geschlossenem Menue */ .nav-cta-mobil { display: none; flex: none; background: var(--ink); color: #fff; text-decoration: none; border-radius: var(--r-pill); padding: 10px 18px; font-weight: 700; font-size: .92rem; white-space: nowrap; } .nav-cta-mobil:hover { background: var(--accent-deep); color: #fff; } @media (max-width: 1030px) { .nav-toggle { display: inline-flex; flex: none; } .nav-cta-mobil { display: inline-block; } .site-nav .nav-cta-item { display: none; } .header-inner { gap: 12px; min-height: 58px; flex-wrap: wrap; } .site-nav { display: none; width: 100%; margin: 0 0 14px; padding-top: 6px; border-top: 1px solid var(--line); } .site-nav.is-open { display: block; } .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; padding-top: 12px; } .site-nav a { padding: 13px 16px; border-radius: var(--r-md); font-size: 1.02rem; } .site-nav .nav-cta-item { margin-left: 0; } .nav-cta { text-align: center; margin-top: 8px; } } @media (max-width: 720px) { .masthead-inner { padding-block: 16px 14px; justify-content: center; } .brand-logo { width: 210px; } } @media (max-width: 420px) { .brand-logo { width: 180px; } .nav-toggle { padding: 9px 13px; font-size: .88rem; } } /* Fussbereich-Logo */ .footer-brand { display: block; margin-bottom: 18px; line-height: 0; } .brand-logo-footer { width: 210px; } /* ---------- 5. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: var(--r-pill); font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .14s, background .16s, border-color .16s, color .16s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-deep); color: #fff; } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: var(--accent-deep); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--paper-2); } .btn-sm { padding: 10px 18px; font-size: .92rem; } /* ---------- 6. Abschnitte ---------- */ .section { padding: clamp(52px, 7vw, 96px) 0; } .section-tight { padding: clamp(38px, 5vw, 64px) 0; } .section-alt { background: var(--paper-3); } .section-accent { background: var(--accent-soft); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft); padding: 7px 15px; border-radius: var(--r-pill); margin-bottom: 18px; } .section-alt .eyebrow, .section-accent .eyebrow { background: var(--paper-2); } .lead { font-size: clamp(1.08rem, 1.9vw, 1.28rem); color: var(--ink-soft); line-height: 1.6; } .section-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 48px); } .section-head.center { margin-inline: auto; text-align: center; } /* ---------- 7. Seitenkopf (Unterseiten) ---------- */ .page-hero { background: var(--accent-soft); padding: clamp(44px, 6vw, 80px) 0 clamp(48px, 6vw, 76px); border-bottom: 1px solid rgba(30, 36, 48, .06); position: relative; overflow: hidden; } .page-hero::after { content: ""; position: absolute; right: -110px; top: -130px; width: 380px; height: 380px; border-radius: 50%; background: var(--accent); opacity: .10; } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { margin-bottom: .35em; } .page-hero .lead { max-width: 660px; } .breadcrumb { font-size: .88rem; color: var(--ink-mute); margin-bottom: 16px; font-weight: 600; } .breadcrumb a { color: var(--ink-mute); text-decoration: none; } .breadcrumb a:hover { color: var(--accent-deep); text-decoration: underline; } .breadcrumb span { margin: 0 7px; opacity: .55; } /* Sprungmarken-Leiste */ .jumpnav { position: sticky; top: 60px; z-index: 40; background: rgba(255, 252, 247, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; } @media (max-width: 1030px) { html { scroll-padding-top: 120px; } .jumpnav { top: 58px; } } .jumpnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; min-height: 58px; align-items: center; } .jumpnav a { display: block; white-space: nowrap; padding: 8px 15px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-soft); font-weight: 650; font-size: .93rem; } .jumpnav a:hover { background: var(--accent-soft); color: var(--accent-deep); } /* ---------- 8. Startseite: Hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 460px at 88% -14%, #FDF2DC 0%, rgba(253, 242, 220, 0) 62%), radial-gradient(760px 420px at 4% 106%, #E6F1F9 0%, rgba(230, 241, 249, 0) 60%), var(--paper); padding: clamp(46px, 6.5vw, 86px) 0 clamp(52px, 7vw, 92px); } .hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(30px, 5vw, 64px); align-items: center; } .hero h1 { margin-bottom: .38em; } .hero h1 .accent-word { background: linear-gradient(transparent 62%, #FCE39B 62%); padding: 0 .07em; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 14px 34px; justify-content: start; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } @media (max-width: 420px) { .hero-facts { grid-template-columns: repeat(2, auto); } } .hero-fact strong { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } .hero-fact span { font-size: .87rem; color: var(--ink-mute); font-weight: 600; } .hero-visual { position: relative; } .hero-photo { aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--paper-3); } .hero-badge { position: absolute; left: -18px; bottom: 26px; background: var(--paper-2); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 16px 20px; display: flex; align-items: center; gap: 13px; max-width: 270px; } .hero-badge .dot { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--rb-gruen); display: grid; place-items: center; color: #fff; font-weight: 800; } .hero-badge p { font-size: .88rem; line-height: 1.4; color: var(--ink-soft); margin: 0; } .hero-badge strong { display: block; color: var(--ink); font-size: .95rem; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; } /* Auf schmalen Geraeten steht der Hinweis unter dem Bild statt darauf */ .hero-badge { position: static; max-width: none; margin-top: 14px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .hero { padding-bottom: 46px; } } /* ---------- Fotos ---------- */ /* Fuellt seinen Rahmen vollstaendig, ohne zu verzerren. */ picture { display: block; width: 100%; height: 100%; } .cover { width: 100%; height: 100%; object-fit: cover; display: block; } figure { margin: 0; } figcaption { font-size: .85rem; color: var(--ink-mute); padding: 10px 2px 0; line-height: 1.45; } /* Bildplatzhalter */ .photo-ph { width: 100%; height: 100%; display: grid; place-content: center; place-items: center; gap: 10px; text-align: center; padding: 24px; background: repeating-linear-gradient(135deg, #F2ECE1 0 14px, #EDE6D9 14px 28px); color: var(--ink-mute); } .photo-ph svg { opacity: .5; } .photo-ph span { font-size: .84rem; font-weight: 700; max-width: 240px; line-height: 1.4; } /* ---------- 9. Karten & Raster ---------- */ /* Grid-Elemente duerfen schrumpfen - sonst sprengen breite Tabellen die Spalte */ .grid > *, .split > *, .team-grid > *, .quick > *, .footer-grid > * { min-width: 0; } .grid { display: grid; gap: 22px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); } .card h3 { margin-bottom: .45em; } .card p { color: var(--ink-soft); font-size: .97rem; } .card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .16s, box-shadow .16s, border-color .16s; } .card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); color: inherit; } .card-link .more { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: .93rem; color: var(--accent-deep); } .card-link .more::after { content: " →"; } .card-icon { width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 18px; font-size: 1.5rem; background: var(--accent-soft); color: var(--accent-deep); } .c-rot { background: #FBEDEA !important; color: #A83421 !important; } .c-orange { background: #FDF1E5 !important; color: #B2621D !important; } .c-gelb { background: #FDF6E0 !important; color: #8A6A0B !important; } .c-gruen { background: #E8F4EE !important; color: #276F4B !important; } .c-blau { background: #E9F1FA !important; color: #1F5B92 !important; } .c-violett { background: #F0EBFA !important; color: #56399A !important; } /* Farbig markierte Karte */ .card-top-rot { border-top: 5px solid var(--rb-rot); } .card-top-orange { border-top: 5px solid var(--rb-orange); } .card-top-gelb { border-top: 5px solid var(--rb-gelb); } .card-top-gruen { border-top: 5px solid var(--rb-gruen); } .card-top-blau { border-top: 5px solid var(--rb-blau); } .card-top-violett { border-top: 5px solid var(--rb-violett); } /* ---------- 10. Schnellzugriff (Startseite) ---------- */ .quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -46px; position: relative; z-index: 5; } .quick a { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 22px 20px; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; transition: transform .16s, box-shadow .16s; } .quick a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; } .quick .q-ico { font-size: 1.6rem; line-height: 1; } .quick strong { font-size: 1.02rem; letter-spacing: -0.01em; } .quick span { font-size: .88rem; color: var(--ink-mute); } @media (max-width: 940px) { .quick { grid-template-columns: repeat(2, 1fr); margin-top: 30px; } } @media (max-width: 520px) { .quick { grid-template-columns: 1fr; } } /* ---------- 11. Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 940px) { .team-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } .person { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .person-photo { aspect-ratio: 1 / 1; background: var(--paper-3); } .person-body { padding: 16px 18px 20px; } .person-body h4 { margin-bottom: 2px; } .person-role { font-size: .87rem; color: var(--accent-deep); font-weight: 700; margin-bottom: 7px; } .person-note { font-size: .85rem; color: var(--ink-mute); line-height: 1.45; margin: 0; } /* ---------- 12. Listen ---------- */ .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .ticks li { position: relative; padding-left: 32px; color: var(--ink-soft); } .ticks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-size: .74rem; font-weight: 900; } .ticks strong { color: var(--ink); } .plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .plainlist li { padding-left: 20px; position: relative; color: var(--ink-soft); } .plainlist li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* ---------- 13. Tabellen ---------- */ .table-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper-2); } table.tbl { width: 100%; border-collapse: collapse; min-width: 520px; font-size: .96rem; } table.tbl th, table.tbl td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); } table.tbl thead th { background: var(--accent-soft); color: var(--accent-deep); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl tbody tr:hover { background: var(--paper); } table.tbl td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; } /* ---------- 14. Zeitleiste (Tagesablauf) ---------- */ .timeline { position: relative; display: grid; gap: 0; padding-left: 8px; } .timeline::before { content: ""; position: absolute; left: 98px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--rb-gelb), var(--rb-gruen), var(--rb-blau)); border-radius: 2px; } .tl-item { display: grid; grid-template-columns: 92px 1fr; gap: 26px; padding: 14px 0; position: relative; } .tl-time { font-weight: 800; font-size: .93rem; color: var(--ink); text-align: right; padding-top: 2px; line-height: 1.25; } .tl-body { position: relative; } .tl-body::before { content: ""; position: absolute; left: -33px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 3px solid var(--accent); } .tl-body h4 { margin-bottom: 3px; } .tl-body p { font-size: .93rem; color: var(--ink-soft); margin: 0; } @media (max-width: 520px) { .timeline::before { left: 76px; } .tl-item { grid-template-columns: 70px 1fr; gap: 22px; } .tl-time { font-size: .85rem; } .tl-body::before { left: -29px; } } /* ---------- 15. Akkordeon (FAQ) ---------- */ .acc { display: grid; gap: 12px; } .acc details { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .acc summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 22px; position: relative; font-weight: 700; font-size: 1.02rem; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-size: 1.1rem; font-weight: 800; } .acc details[open] summary::after { content: "–"; } .acc .acc-body { padding: 0 22px 20px; color: var(--ink-soft); font-size: .97rem; } /* ---------- 16. Download-Liste ---------- */ .downloads { display: grid; gap: 12px; } .dl { display: flex; align-items: center; gap: 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 20px; text-decoration: none; color: inherit; transition: border-color .16s, transform .16s, box-shadow .16s; } .dl:hover { border-color: var(--accent); transform: translateX(3px); box-shadow: var(--shadow-sm); color: inherit; } .dl-ico { width: 42px; height: 42px; flex: none; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-size: .72rem; font-weight: 900; letter-spacing: .03em; } .dl-txt { flex: 1; min-width: 0; } .dl-txt strong { display: block; font-size: 1rem; letter-spacing: -0.01em; } .dl-txt span { font-size: .85rem; color: var(--ink-mute); } .dl-arrow { color: var(--accent-deep); font-weight: 800; flex: none; } /* ---------- 17. Termine ---------- */ .dates { display: grid; gap: 12px; } .date-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 18px; align-items: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 20px; } .date-chip { background: var(--accent-soft); color: var(--accent-deep); border-radius: var(--r-sm); text-align: center; padding: 8px 6px; line-height: 1.05; } .date-chip b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; } .date-chip span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; } .date-info strong { display: block; font-size: 1.02rem; } .date-info span { font-size: .88rem; color: var(--ink-mute); } .date-tag { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: var(--r-pill); background: var(--paper-3); color: var(--ink-soft); } @media (max-width: 620px) { .date-row { grid-template-columns: 62px 1fr; } .date-tag { grid-column: 2; justify-self: start; } } /* ---------- 18. Hinweisboxen ---------- */ .note { border-radius: var(--r-lg); padding: 22px 24px; background: var(--accent-soft); border-left: 5px solid var(--accent); } .note h4 { margin-bottom: .4em; color: var(--accent-deep); } .note p { color: var(--ink-soft); font-size: .97rem; } .note-warn { background: #FDF6E0; border-left-color: var(--rb-gelb); } .note-warn h4 { color: #8A6A0B; } /* ---------- 19. Split-Layout ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; } .split-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; background: var(--paper-3); } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } /* ---------- 20. CTA-Band ---------- */ .cta-band { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: clamp(32px, 5vw, 54px); display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; } .cta-band h2 { color: #fff; margin-bottom: .3em; } .cta-band p { color: rgba(255,255,255,.78); margin: 0; } .cta-band .btn-primary { background: #fff; color: var(--ink); } .cta-band .btn-primary:hover { background: var(--rb-gelb); color: var(--ink); } @media (max-width: 780px) { .cta-band { grid-template-columns: 1fr; } } /* ---------- 21. Fußbereich ---------- */ .site-footer { background: #171C26; color: rgba(255,255,255,.72); margin-top: 0; } .footer-main { padding: clamp(44px, 6vw, 68px) 0 40px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; } .site-footer a { color: rgba(255,255,255,.72); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .94rem; } .footer-about p { font-size: .93rem; line-height: 1.6; max-width: 320px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.11); padding: 20px 0; font-size: .87rem; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; } .footer-bottom nav { display: flex; gap: 20px; margin-left: auto; } @media (max-width: 560px) { .footer-bottom nav { margin-left: 0; } } /* ---------- 22. Platzhalter-System (nur im Prototyp) ---------- */ .ph { background: linear-gradient(transparent 0%, transparent 100%); border-bottom: 2px dotted transparent; transition: background .2s, border-color .2s; } body.show-ph .ph { background: #FFF3BF; border-bottom-color: #D9A400; border-radius: 3px; padding: 0 2px; } body.show-ph .photo-ph { outline: 2px dashed #D9A400; outline-offset: -6px; } .ph-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: #fff; border: 0; border-radius: var(--r-pill); padding: 12px 20px; font: inherit; font-weight: 700; font-size: .9rem; box-shadow: var(--shadow-md); cursor: pointer; } .ph-toggle:hover { background: var(--accent-deep); } .ph-toggle .led { width: 9px; height: 9px; border-radius: 50%; background: #6B7280; } body.show-ph .ph-toggle .led { background: var(--rb-gelb); box-shadow: 0 0 0 4px rgba(240,188,46,.25); } /* ---------- 23. Hilfsklassen ---------- */ .mt-0 { margin-top: 0; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: 38px; } .mb-0 { margin-bottom: 0; } .text-center { text-align: center; } .stack { display: grid; gap: 22px; } .stack-sm { display: grid; gap: 12px; } .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { font-size: .87rem; font-weight: 700; background: var(--paper-2); border: 1px solid var(--line); padding: 7px 15px; border-radius: var(--r-pill); color: var(--ink-soft); } @media print { .site-header, .jumpnav, .ph-toggle, .cta-band { display: none !important; } body { background: #fff; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================================== WordPress-spezifische Ergaenzungen ========================================================================== */ /* Adminleiste nicht ueber die klebende Navigation legen */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } .admin-bar .jumpnav { top: 92px; } @media (max-width: 1030px) { .admin-bar .jumpnav { top: 104px; } } /* Blockeditor-Gruppen sollen unsere Raster nicht stoeren */ .grid > .wp-block-group, .split > .wp-block-group, .team-grid > .wp-block-group { margin-block: 0; } .wp-block-group.grid > *, .wp-block-group.split > * { margin-block: 0; } .wp-block-group.card > :first-child { margin-top: 0; } .wp-block-group.card > :last-child { margin-bottom: 0; } .wp-block-group.note > :first-child { margin-top: 0; } .wp-block-group.note > :last-child { margin-bottom: 0; } /* Menue-Ausgabe von WordPress an unsere Navigation anpassen */ .site-nav ul.menu, .site-nav ul { list-style: none; margin: 0; padding: 0; } .site-nav li { margin: 0; } .site-nav .current-menu-item > a, .site-nav .current_page_item > a { background: var(--accent-soft); color: var(--accent-deep); } .site-footer ul.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .94rem; } .footer-bottom nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; } /* Tabellen aus dem Blockeditor */ .wp-block-table.tbl { margin: 0; overflow-x: auto; } .wp-block-table.tbl table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: .96rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .wp-block-table.tbl th, .wp-block-table.tbl td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); border-right: 0; } .wp-block-table.tbl thead th { background: var(--accent-soft); color: var(--accent-deep); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; } .wp-block-table.tbl tbody tr:last-child td { border-bottom: 0; } .wp-block-table.tbl td:first-child { font-weight: 700; color: var(--ink); } /* Download-Liste als normale Liste */ ul.downloads-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } ul.downloads-liste li { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 20px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; transition: border-color .16s; } ul.downloads-liste li:hover { border-color: var(--accent); } ul.downloads-liste li::before { content: "PDF"; font-size: .7rem; font-weight: 900; letter-spacing: .04em; background: var(--accent-soft); color: var(--accent-deep); padding: 5px 9px; border-radius: var(--r-sm); } ul.downloads-liste a { font-weight: 700; text-decoration: none; } ul.downloads-liste a:hover { text-decoration: underline; } .dl-info { font-size: .85rem; color: var(--ink-mute); } /* Personenkarte aus Bloecken */ .person-karte { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); padding: 0 0 20px; } .person-karte .person-bild { margin: 0 0 16px; } .person-karte .person-bild img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .person-karte h4 { margin: 0 18px 2px; } .person-karte .person-role { margin: 0 18px 7px; font-size: .87rem; color: var(--accent-deep); font-weight: 700; } .person-karte .person-note { margin: 0 18px; font-size: .85rem; color: var(--ink-mute); line-height: 1.45; } /* Bild im Zweispalter */ .wp-block-image.split-media { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); } .wp-block-image.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } /* Schaltflaechen des Blockeditors */ .wp-block-button__link { border-radius: var(--r-pill); padding: 14px 26px; font-weight: 700; background: var(--accent); color: #fff; } .cta-band .wp-block-button__link { background: #fff; color: var(--ink); } .cta-band .wp-block-button__link:hover { background: var(--rb-gelb); color: var(--ink); } /* Beitraege */ .meta-zeile { font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .5em; } .beitragsbild { margin: 0 0 28px; border-radius: var(--r-xl); overflow: hidden; } .beitragsbild img { width: 100%; height: auto; display: block; } .beitrag-inhalt > * { margin-bottom: 1.1em; } .beitrag-inhalt img { border-radius: var(--r-lg); } /* Blaettern */ .wp-block-query-pagination, .navigation.pagination { display: flex; gap: 10px; flex-wrap: wrap; } .navigation.pagination .page-numbers { display: inline-block; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--line); text-decoration: none; background: var(--paper-2); } .navigation.pagination .page-numbers.current { background: var(--accent); color: #fff; border-color: var(--accent); } /* Suchformular */ .suchform { display: flex; gap: 10px; } .suchform input[type="search"] { flex: 1; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); font: inherit; background: var(--paper-2); } /* Ausrichtungen */ .alignwide { max-width: var(--wrap); margin-inline: auto; } .alignfull { max-width: none; } .aligncenter { margin-inline: auto; } /* ---------- Termine ---------- */ .termine-aktionen { display: flex; flex-wrap: wrap; gap: 12px; } .termin-monat { margin: 30px 0 14px; font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); } .termin-monat:first-of-type { margin-top: 0; } .dates:empty { display: none; } .date-row .date-info span { display: block; } .single-gsh_termin .beitrag-inhalt { margin-top: 22px; } .termin-kopf { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 8px; } .termin-kopf .date-tag { background: var(--accent-soft); color: var(--accent-deep); }