/* ========================================================================== tpl_sonnenteller – Template für die Grund- und Mittelschule „Am Sonnenteller" Dittelbrunn ========================================================================== */ /* ------------------------------------------------------------------------- 1. Design-Tokens Die Farben werden zusätzlich inline im gesetzt, damit sie über die Template-Einstellungen (templateDetails.xml) angepasst werden können. Die Werte hier sind der Fallback, falls kein Parameter gesetzt ist. ---------------------------------------------------------------------- */ :root { --color-primary: #2B4C7E; /* Kornblau – Header, Nav, Footer */ --color-primary-dark: #1D3557; /* dunkleres Kornblau */ --color-accent: #F4A623; /* Sonnengelb – Akzente, Buttons */ --color-accent-dark: #C87F0A; /* dunkleres Sonnengelb (Hover) */ --color-green: #3C6E47; /* Waldgrün – zweiter Akzent */ --color-green-dark: #2A4E33; --color-bg: #FDFBF6; /* Kreideweiß – Seitenhintergrund */ --color-bg-alt: #F3ECDD; /* Sandbeige – Wechselflächen */ --color-surface: #FFFFFF; /* Karten, Flächen */ --color-text: #2E2B26; /* Graphit – Fließtext */ --color-text-muted: #5B5850; --color-border: #E5DFD0; --font-display: 'Fredoka', 'Arial Rounded MT Bold', 'Segoe UI', sans-serif; --font-body: 'Karla', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --container-width: 1180px; --radius-md: 10px; --radius-lg: 18px; --shadow-card: 0 2px 14px rgba(43, 76, 126, 0.10); --transition: 180ms ease; } /* ------------------------------------------------------------------------- 2. Reset & Basiselemente ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--transition), color var(--transition); } a:hover { color: var(--color-accent-dark); text-decoration-color: currentColor; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--color-primary-dark); margin: 0 0 0.6em; } h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1.1em; max-width: 72ch; } ul, ol { padding-left: 1.3em; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -3.5rem; background: var(--color-primary-dark); color: #fff; padding: 0.7em 1.2em; border-radius: 0 0 var(--radius-md) var(--radius-md); z-index: 1000; transition: top var(--transition); } .skip-link:focus { top: 0; } .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: 1.25rem; } /* ------------------------------------------------------------------------- 3. Kontaktleiste (oben) ---------------------------------------------------------------------- */ .topbar { background: var(--color-primary-dark); color: #EAF0FA; font-size: 0.86rem; } .topbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1.2rem; padding-block: 0.5rem; } .topbar-claim { opacity: 0.9; } .topbar-links { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .topbar-links a { color: #EAF0FA; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; } .topbar-links a:hover { color: var(--color-accent); } .topbar-links svg { width: 15px; height: 15px; flex: none; } /* ------------------------------------------------------------------------- 4. Kopfbereich & Hauptnavigation ---------------------------------------------------------------------- */ .site-header { background: var(--color-surface); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; } .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--color-primary-dark); min-width: 0; } .brand-emblem { width: 46px; height: 46px; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--color-primary-dark); } .brand-sub { font-size: 0.78rem; color: var(--color-text-muted); } .nav-toggle { display: none; align-items: center; gap: 0.5em; background: var(--color-primary); color: #fff; border: 0; border-radius: var(--radius-md); padding: 0.55em 0.9em; font-family: var(--font-body); font-size: 0.95rem; cursor: pointer; } .nav-toggle:hover { background: var(--color-primary-dark); } .nav-toggle-icon { width: 20px; height: 2px; background: #fff; position: relative; flex: none; } .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; } .nav-toggle-icon::before { top: -6px; } .nav-toggle-icon::after { top: 6px; } /* Hauptmenü: Joomla gibt die genaue Markup-Struktur des Menü-Moduls aus (mod_menu). Die Selektoren unten sind bewusst allgemein gehalten (ul/li-Verschachtelung), damit sie robust gegenüber Joomla-Updates sind. */ #mainnav { } #mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem; } #mainnav > ul { align-items: center; } #mainnav li { position: relative; } #mainnav a, #mainnav span.separator { display: block; padding: 0.85em 0.8em; color: var(--color-primary-dark); text-decoration: none; font-weight: 600; font-size: 0.98rem; border-radius: var(--radius-md); white-space: nowrap; } #mainnav > ul > li > a:hover, #mainnav > ul > li > a:focus-visible, #mainnav > ul > li.active > a, #mainnav > ul > li.current > a { background: var(--color-bg-alt); color: var(--color-primary-dark); } #mainnav > ul > li.active > a { box-shadow: inset 0 -3px 0 var(--color-accent); } /* Untermenüs als Dropdown (Desktop) */ #mainnav li ul { display: none; position: absolute; left: 0; top: 100%; min-width: 240px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 0.4rem; flex-direction: column; gap: 0; z-index: 50; } #mainnav li ul li { width: 100%; } #mainnav li ul a { padding: 0.6em 0.7em; font-weight: 500; border-radius: 6px; } #mainnav li ul a:hover { background: var(--color-bg-alt); } #mainnav li:hover > ul, #mainnav li:focus-within > ul { display: flex; } /* ------------------------------------------------------------------------- 5. Breadcrumbs ---------------------------------------------------------------------- */ .breadcrumbs-wrap { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); } .breadcrumbs-wrap .container { padding-block: 0.55rem; } .breadcrumbs-wrap nav, .breadcrumbs-wrap ol, .breadcrumbs-wrap ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--color-text-muted); } .breadcrumbs-wrap li::after { content: "›"; margin-left: 0.5rem; opacity: 0.6; } .breadcrumbs-wrap li:last-child::after { content: ""; } .breadcrumbs-wrap a { color: var(--color-text-muted); text-decoration: underline; } /* ------------------------------------------------------------------------- 6. Hero ---------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--color-border); } .hero-inner { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; align-items: center; gap: 2.5rem; padding-block: clamp(2.4rem, 2rem + 2vw, 4rem); } .hero-emblem-wrap { display: flex; justify-content: center; } .hero-emblem { width: min(280px, 100%); height: auto; } .hero-emblem-spin { display: inline-block; animation: sonnenteller-spin 90s linear infinite; transform-origin: 50% 50%; } @keyframes sonnenteller-spin { to { transform: rotate(360deg); } } .hero-text { text-align: left; } .hero-text h1 { margin-bottom: 0.4em; } .hero-text .lede { font-size: 1.1rem; color: var(--color-text-muted); max-width: 52ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.3rem; } .btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.4em; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); font-size: 0.98rem; } .btn-primary { background: var(--color-accent); color: var(--color-primary-dark); } .btn-primary:hover { background: var(--color-accent-dark); color: #fff; } .btn-outline { background: transparent; color: var(--color-primary-dark); border-color: var(--color-primary-dark); } .btn-outline:hover { background: var(--color-primary-dark); color: #fff; } /* Zusätzliche Module in der Hero-Position (z. B. Elternbriefe-Hinweis) */ .hero .custom, .hero .moduletable { margin-top: 1rem; } /* ------------------------------------------------------------------------- 7. Startseiten-Kacheln (Grundschule / Mittelschule / Schulleben) ---------------------------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; padding-block: clamp(2rem, 1.6rem + 1.5vw, 3rem); } .feature-col { } .feature-col .moduletable, .feature-col .custom { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 5px solid var(--color-primary); border-radius: var(--radius-md); padding: 1.4rem 1.5rem; height: 100%; box-shadow: var(--shadow-card); } .feature-col:nth-child(1) .moduletable, .feature-col:nth-child(1) .custom { border-left-color: var(--color-green); } .feature-col:nth-child(2) .moduletable, .feature-col:nth-child(2) .custom { border-left-color: var(--color-primary); } .feature-col:nth-child(3) .moduletable, .feature-col:nth-child(3) .custom { border-left-color: var(--color-accent); } .feature-col h3 { margin-bottom: 0.4em; font-size: 1.15rem; } .feature-col img { border-radius: 8px; margin-bottom: 0.8rem; } .feature-col p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- 8. Hauptbereich / Sidebar ---------------------------------------------------------------------- */ .main-wrap { padding-block: clamp(1.6rem, 1.3rem + 1vw, 2.6rem); } .main-grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; } .main-grid.has-sidebar { grid-template-columns: 2.2fr 1fr; } .main-content { min-width: 0; } .sidebar .moduletable, .sidebar .custom { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.2rem 1.3rem; margin-bottom: 1.4rem; box-shadow: var(--shadow-card); } .sidebar h3 { font-size: 1.05rem; border-bottom: 2px solid var(--color-bg-alt); padding-bottom: 0.4em; } /* ------------------------------------------------------------------------- 9. Allgemeine Formatierung von Joomla-Komponenteninhalten (Artikel, Kategorielisten, Formulare, Paginierung …) ---------------------------------------------------------------------- */ .main-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; } .main-content table th, .main-content table td { padding: 0.55em 0.7em; border: 1px solid var(--color-border); text-align: left; } .main-content table th { background: var(--color-bg-alt); } .main-content .btn, .main-content button:not(.nav-toggle), .main-content input[type="submit"] { background: var(--color-primary); color: #fff; border-radius: var(--radius-md); padding: 0.6em 1.2em; border: 0; font-weight: 700; cursor: pointer; } .main-content .btn:hover, .main-content button:not(.nav-toggle):hover { background: var(--color-primary-dark); } .main-content input[type="text"], .main-content input[type="search"], .main-content input[type="email"], .main-content input[type="tel"], .main-content textarea, .main-content select { width: 100%; padding: 0.6em 0.8em; border: 1px solid var(--color-border); border-radius: 8px; font-family: var(--font-body); font-size: 1rem; background: var(--color-surface); color: var(--color-text); } .main-content .alert { border-radius: var(--radius-md); padding: 0.9em 1.1em; border: 1px solid var(--color-border); background: var(--color-bg-alt); margin-bottom: 1.2rem; } .pagination, .pagination-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 1.6rem 0 0; } .pagination a, .pagination span, .pagination-list a, .pagination-list span { display: inline-block; padding: 0.45em 0.85em; border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none; color: var(--color-primary-dark); } .pagination .active a, .pagination-list .active span { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .category-list, .blog, .items-row { list-style: none; padding: 0; } .item-title { margin-bottom: 0.2em; } .item-title a { color: var(--color-primary-dark); text-decoration: none; } .item-title a:hover { text-decoration: underline; } article + article, .items-row > *:not(:last-child) { margin-bottom: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--color-border); } /* ------------------------------------------------------------------------- 10. Banner unterhalb des Inhalts ---------------------------------------------------------------------- */ .banner-bottom-wrap { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); } .banner-bottom-wrap .container { padding-block: 1.6rem; } /* ------------------------------------------------------------------------- 11. Fußbereich ---------------------------------------------------------------------- */ .site-footer { background: var(--color-primary-dark); color: #DCE6F5; } .footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; padding-block: clamp(2rem, 1.7rem + 1vw, 3rem); } .footer-col h2 { color: #fff; font-size: 1rem; text-transform: none; letter-spacing: 0.02em; margin-bottom: 0.8em; border-bottom: 2px solid rgba(244, 166, 35, 0.5); padding-bottom: 0.4em; display: inline-block; } .footer-col p, .footer-col address { margin: 0 0 0.5em; font-style: normal; color: #DCE6F5; } .footer-col a { color: #DCE6F5; text-decoration: underline; text-decoration-color: rgba(220,230,245,0.35); } .footer-col a:hover { color: var(--color-accent); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 0.5em; } .footer-social { display: inline-flex; gap: 0.7rem; margin-top: 0.6rem; } .footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .footer-social a:hover { background: var(--color-accent); } .footer-social svg { width: 17px; height: 17px; fill: #fff; } .footer-bottom { border-top: 1px solid rgba(220,230,245,0.18); } .footer-bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; padding-block: 1rem; font-size: 0.85rem; color: #B9C7E0; } .footer-bottom a { color: #B9C7E0; } .footer-bottom a:hover { color: var(--color-accent); } /* ------------------------------------------------------------------------- 12. Responsive ---------------------------------------------------------------------- */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-text { text-align: center; } .hero-text .lede { margin-inline: auto; } .hero-cta { justify-content: center; } .hero-emblem { width: 190px; } .feature-grid { grid-template-columns: 1fr; } .main-grid.has-sidebar { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } #mainnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-card); max-height: calc(100vh - 100%); overflow-y: auto; } #mainnav.is-open { display: block; } #mainnav > ul { flex-direction: column; padding: 0.6rem; gap: 0; } #mainnav li ul { position: static; display: none; box-shadow: none; border: 0; padding-left: 1rem; min-width: 0; } #mainnav li.is-expanded > ul { display: flex; } #mainnav a { padding: 0.75em 0.6em; } } @media (max-width: 620px) { .footer-inner { grid-template-columns: 1fr; } .topbar .container { justify-content: center; text-align: center; } } /* ------------------------------------------------------------------------- 13. Druckansicht ---------------------------------------------------------------------- */ @media print { .topbar, .site-header, .hero, .feature-grid, .sidebar, .site-footer, .nav-toggle { display: none !important; } body { background: #fff; } }