/* Theme Name: VS Höflein Description: Maßgeschneidertes, schlankes Theme für die Volksschule Höflein. Kein Pagebuilder, keine externen Ressourcen. Author: Valentin Szankovich Version: 1.0 */ :root { /* Farbwerte übernommen von der bisherigen Website vshoeflein.at */ --blau: #3f6da7; /* Menü-Blau der alten Seite */ --blau-dunkel: #1f497d; /* dunkles Blau (alter Hintergrund) */ --hellblau: #3faee8; /* Verlaufston der alten Menübuttons */ --rot: #cd4f4d; /* „Volksschule"-Rot */ --gruen: #00b050; /* „Höflein"-Grün */ --tinte: #22313f; --grau: #5b6b7a; --linie: #e3e9ef; --fond: #f5f8fb; --weiss: #ffffff; --radius: 14px; --schatten: 0 2px 10px rgba(31, 73, 125, 0.10); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--tinte); background: var(--fond); line-height: 1.65; font-size: 17px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--blau); } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ---------- Dreifarben-Element (Logo-Farben) ---------- */ .farbband { height: 5px; background: linear-gradient(90deg, var(--blau) 0 33.4%, var(--rot) 33.4% 66.7%, var(--gruen) 66.7% 100%); } .farbband:has(+ .site-footer) { margin-top: 60px; } /* ---------- Header ---------- */ .site-header { background: var(--weiss); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; max-width: 1100px; margin: 0 auto; } .site-logo { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--tinte); } .site-logo img { width: auto; height: 54px; flex-shrink: 0; } .site-logo .logo-text { line-height: 1.2; } .site-logo .logo-text strong { display: block; font-size: 19px; } .site-logo .logo-text strong .wm-rot { color: var(--rot); } .site-logo .logo-text strong .wm-gruen { color: var(--gruen); } .site-logo .logo-text span { font-size: 12.5px; color: var(--grau); } .nav-toggle { display: none; background: none; border: 2px solid var(--linie); border-radius: 8px; padding: 8px 12px; font-size: 15px; cursor: pointer; color: var(--tinte); } .main-nav > ul { list-style: none; display: flex; gap: 4px; } .main-nav ul { list-style: none; } .main-nav li { position: relative; } .main-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 8px 22px rgba(29,95,168,.14); padding: 6px; z-index: 60; } .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: block; } .main-nav .sub-menu a { border-radius: 7px; } .main-nav a { display: block; padding: 9px 13px; border-radius: 9px; text-decoration: none; color: var(--tinte); font-weight: 600; font-size: 15.5px; } .main-nav a:hover { background: var(--fond); color: var(--blau); } .main-nav .current-menu-item > a, .main-nav .current_page_item > a, .main-nav .current-menu-ancestor > a { background: var(--blau); color: #fff; } @media (max-width: 880px) { .nav-toggle { display: block; } .main-nav { display: none; width: 100%; } .main-nav.open { display: block; } .main-nav > ul { flex-direction: column; padding: 8px 0 14px; } .main-nav .sub-menu { display: block; position: static; border: none; box-shadow: none; padding: 0 0 0 18px; } .header-inner { flex-wrap: wrap; } } /* ---------- Hero (Startseite) ---------- */ .hero { position: relative; } .hero img.hero-bild { width: 100%; height: 420px; object-fit: cover; } .hero-platzhalter { width: 100%; height: 340px; background: linear-gradient(120deg, var(--blau-dunkel) 0%, var(--blau) 55%, var(--hellblau) 100%); display: flex; align-items: center; justify-content: center; } .hero-karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 34px 32px 28px; max-width: 720px; margin: -70px auto 0; position: relative; text-align: center; } .hero-blumen { position: absolute; top: -46px; right: 26px; width: 132px; pointer-events: none; } .hero-sonne { position: absolute; top: -34px; left: 30px; width: 76px; pointer-events: none; transform: rotate(-10deg); } @media (max-width: 620px) { .hero-blumen { width: 96px; top: -34px; right: 14px; } .hero-sonne { width: 54px; top: -24px; left: 16px; } } .hero-karte h1 { font-size: 30px; margin-bottom: 10px; color: var(--blau-dunkel); } .hero-karte p { color: var(--grau); font-size: 17px; } /* ---------- Abschnitte ---------- */ .abschnitt { padding: 46px 0 8px; } .abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .abschnitt-kopf h2 { font-size: 24px; color: var(--blau-dunkel); display: flex; align-items: center; gap: 10px; } .abschnitt-kopf h2::before { content: ""; width: 26px; height: 26px; flex-shrink: 0; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiMzZjZkYTciIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDAgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjM2Y2ZGE3IiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA1MCA1MCkiLz48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiMzZjZkYTciIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDkwIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTM1IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMjI1IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMjcwIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMzE1IDUwIDUwKSIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjE1LjUiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIzIi8+PGNpcmNsZSBjeD0iNDQuNSIgY3k9IjQ3IiByPSIyLjMiIGZpbGw9IiMyYTJhMmEiLz48Y2lyY2xlIGN4PSI1NS41IiBjeT0iNDciIHI9IjIuMyIgZmlsbD0iIzJhMmEyYSIvPjxwYXRoIGQ9Ik00Mi41IDUzIFE1MCA2MC41IDU3LjUgNTMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==') no-repeat center / contain; transform: rotate(-8deg); } .abschnitt:nth-of-type(2) .abschnitt-kopf h2::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiNjZDRmNGQiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDggNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjY2Q0ZjRkIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSg1MyA1MCA1MCkiLz48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiNjZDRmNGQiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDk4IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTQzIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTg4IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMjMzIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMjc4IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMzIzIDUwIDUwKSIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjE1LjUiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIzIi8+PGNpcmNsZSBjeD0iNDQuNSIgY3k9IjQ3IiByPSIyLjMiIGZpbGw9IiMyYTJhMmEiLz48Y2lyY2xlIGN4PSI1NS41IiBjeT0iNDciIHI9IjIuMyIgZmlsbD0iIzJhMmEyYSIvPjxwYXRoIGQ9Ik00Mi41IDUzIFE1MCA2MC41IDU3LjUgNTMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg=='); transform: rotate(6deg); } .abschnitt:nth-of-type(3) .abschnitt-kopf h2::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiMwMGIwNTAiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDE3IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzAwYjA1MCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoNjIgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgxMDcgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTIgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgxOTcgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgyNDIgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgyODcgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgzMzIgNTAgNTApIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMTUuNSIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjMiLz48Y2lyY2xlIGN4PSI0NC41IiBjeT0iNDciIHI9IjIuMyIgZmlsbD0iIzJhMmEyYSIvPjxjaXJjbGUgY3g9IjU1LjUiIGN5PSI0NyIgcj0iMi4zIiBmaWxsPSIjMmEyYTJhIi8+PHBhdGggZD0iTTQyLjUgNTMgUTUwIDYwLjUgNTcuNSA1MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+'); transform: rotate(-5deg); } .seite-kopf h1 { position: relative; display: inline-block; } .seite-kopf h1::after { content: ""; display: block; height: 11px; margin-top: 4px; width: 112px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIiPgo8cGF0aCBkPSJNMyA2LjUgUSAxMyAzLjUsIDIzIDYuNSBUIDQxIDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNmRhNyIgc3Ryb2tlLXdpZHRoPSI0LjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNNDMgNiBRIDUzIDguNSwgNjMgNS41IFQgODAgNi41IiBmaWxsPSJub25lIiBzdHJva2U9IiNjZDRmNGQiIHN0cm9rZS13aWR0aD0iNC4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTgyIDYuNSBRIDkyIDMuOCwgMTAyIDcgVCAxMTcgNS44IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMGIwNTAiIHN0cm9rZS13aWR0aD0iNC4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+') no-repeat left center / contain; } .hero-karte h1 { display: inline-block; } .hero-karte h1::after { content: ""; display: block; height: 11px; margin: 6px auto 0; width: 112px; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIiPgo8cGF0aCBkPSJNMyA2LjUgUSAxMyAzLjUsIDIzIDYuNSBUIDQxIDYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzNmNmRhNyIgc3Ryb2tlLXdpZHRoPSI0LjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8cGF0aCBkPSJNNDMgNiBRIDUzIDguNSwgNjMgNS41IFQgODAgNi41IiBmaWxsPSJub25lIiBzdHJva2U9IiNjZDRmNGQiIHN0cm9rZS13aWR0aD0iNC4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPHBhdGggZD0iTTgyIDYuNSBRIDkyIDMuOCwgMTAyIDcgVCAxMTcgNS44IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMGIwNTAiIHN0cm9rZS13aWR0aD0iNC4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+') no-repeat center / contain; } .mehr-link { font-weight: 600; text-decoration: none; font-size: 15px; } /* ---------- Karten ---------- */ .karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; border-top: 4px solid var(--blau); } .karten > .karte:nth-child(3n+2) { border-top-color: var(--rot); } .karten > .karte:nth-child(3n) { border-top-color: var(--gruen); } a.karte:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(29,95,168,.14); } .karte img { width: 100%; height: 190px; object-fit: cover; } .karte .karte-bildersatz { width: 100%; height: 130px; display:flex; align-items:center; justify-content:center; background: linear-gradient(120deg, #e8f1fa, #eef8f2); font-size: 40px; } .karte-inhalt { padding: 16px 18px 18px; } .karte-inhalt .datum { font-size: 13.5px; font-weight: 700; color: var(--gruen); text-transform: uppercase; letter-spacing: .03em; } .karte-inhalt h3 { font-size: 18px; margin: 4px 0 6px; color: var(--tinte); } .karte-inhalt p { font-size: 15px; color: var(--grau); } /* ---------- Terminliste ---------- */ .terminliste { list-style: none; display: grid; gap: 12px; } .termin-zeile { display: flex; gap: 18px; align-items: flex-start; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px 20px; border-left: 4px solid var(--blau); } .terminliste > .termin-zeile:nth-child(3n+2) { border-left-color: var(--rot); } .terminliste > .termin-zeile:nth-child(3n) { border-left-color: var(--gruen); } .termin-datum { flex-shrink: 0; width: 64px; text-align: center; background: var(--fond); border: 2px solid var(--linie); border-radius: 10px; padding: 6px 4px; } .termin-datum .tag { display: block; font-size: 22px; font-weight: 800; color: var(--blau); line-height: 1.1; } .termin-datum .monat { display: block; font-size: 12px; font-weight: 700; color: var(--grau); text-transform: uppercase; } .termin-info h3 { font-size: 17.5px; margin-bottom: 2px; } .termin-info .meta { font-size: 14.5px; color: var(--gruen); font-weight: 600; } .termin-info p { font-size: 15px; color: var(--grau); margin-top: 4px; } /* ---------- Schnelllinks ---------- */ .schnelllinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 6px; } .schnelllink { display: flex; align-items: center; gap: 12px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--tinte); font-weight: 700; box-shadow: var(--schatten); } .schnelllink:hover { border-color: var(--blau); color: var(--blau); } .schnelllink::before { content: ""; width: 28px; height: 28px; flex-shrink: 0; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiMzZjZkYTciIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDAgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjM2Y2ZGE3IiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA1MCA1MCkiLz48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiMzZjZkYTciIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDkwIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTM1IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMjI1IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMjcwIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzNmNmRhNyIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMzE1IDUwIDUwKSIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjE1LjUiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIzIi8+PGNpcmNsZSBjeD0iNDQuNSIgY3k9IjQ3IiByPSIyLjMiIGZpbGw9IiMyYTJhMmEiLz48Y2lyY2xlIGN4PSI1NS41IiBjeT0iNDciIHI9IjIuMyIgZmlsbD0iIzJhMmEyYSIvPjxwYXRoIGQ9Ik00Mi41IDUzIFE1MCA2MC41IDU3LjUgNTMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==') no-repeat center / contain; transform: rotate(-8deg); } .schnelllinks > .schnelllink:nth-child(3n+2)::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiNjZDRmNGQiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDggNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjY2Q0ZjRkIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSg1MyA1MCA1MCkiLz48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiNjZDRmNGQiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDk4IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTQzIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTg4IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMjMzIDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMjc4IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iI2NkNGY0ZCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoMzIzIDUwIDUwKSIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjE1LjUiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIzIi8+PGNpcmNsZSBjeD0iNDQuNSIgY3k9IjQ3IiByPSIyLjMiIGZpbGw9IiMyYTJhMmEiLz48Y2lyY2xlIGN4PSI1NS41IiBjeT0iNDciIHI9IjIuMyIgZmlsbD0iIzJhMmEyYSIvPjxwYXRoIGQ9Ik00Mi41IDUzIFE1MCA2MC41IDU3LjUgNTMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg=='); transform: rotate(7deg); } .schnelllinks > .schnelllink:nth-child(3n)::before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSIyNCIgcng9IjExIiByeT0iMjAiIGZpbGw9IiMwMGIwNTAiIHN0cm9rZT0iIzJhMmEyYSIgc3Ryb2tlLXdpZHRoPSIyLjUiIHRyYW5zZm9ybT0icm90YXRlKDE3IDUwIDUwKSIvPjxlbGxpcHNlIGN4PSI1MCIgY3k9IjI0IiByeD0iMTEiIHJ5PSIyMCIgZmlsbD0iIzAwYjA1MCIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNSIgdHJhbnNmb3JtPSJyb3RhdGUoNjIgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgxMDcgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTIgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgxOTcgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgyNDIgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgyODcgNTAgNTApIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iMjQiIHJ4PSIxMSIgcnk9IjIwIiBmaWxsPSIjMDBiMDUwIiBzdHJva2U9IiMyYTJhMmEiIHN0cm9rZS13aWR0aD0iMi41IiB0cmFuc2Zvcm09InJvdGF0ZSgzMzIgNTAgNTApIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iMTUuNSIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjMiLz48Y2lyY2xlIGN4PSI0NC41IiBjeT0iNDciIHI9IjIuMyIgZmlsbD0iIzJhMmEyYSIvPjxjaXJjbGUgY3g9IjU1LjUiIGN5PSI0NyIgcj0iMi4zIiBmaWxsPSIjMmEyYTJhIi8+PHBhdGggZD0iTTQyLjUgNTMgUTUwIDYwLjUgNTcuNSA1MyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmEyYTJhIiBzdHJva2Utd2lkdGg9IjIuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+'); transform: rotate(-4deg); } /* ---------- Inhaltsseiten ---------- */ .seite { padding: 40px 20px 60px; } .seite-kopf { margin-bottom: 24px; } .seite-kopf h1 { font-size: 30px; color: var(--blau-dunkel); } .inhalt { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 30px 34px; } .inhalt > * + * { margin-top: 14px; } .inhalt h2 { color: var(--blau-dunkel); font-size: 22px; margin-top: 26px; } .inhalt ul, .inhalt ol { padding-left: 24px; } /* ---------- Galerie ---------- */ .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; } .galerie a { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--schatten); } .galerie img { width: 100%; height: 180px; object-fit: cover; transition: transform .2s ease; } .galerie a:hover img { transform: scale(1.04); } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(15,25,35,.92); display: none; align-items: center; justify-content: center; z-index: 200; padding: 30px; } .lightbox.offen { display: flex; } .lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; } .lightbox .schliessen { position: absolute; top: 18px; right: 24px; background: none; border: none; color: #fff; font-size: 34px; cursor: pointer; line-height: 1; } /* ---------- Team / Tabellen ---------- */ .team-tabelle, .zeiten-tabelle { width: 100%; border-collapse: collapse; margin-top: 14px; } .team-tabelle td, .team-tabelle th, .zeiten-tabelle td, .zeiten-tabelle th { padding: 10px 14px; border-bottom: 1px solid var(--linie); text-align: left; font-size: 16px; } .team-tabelle th, .zeiten-tabelle th { color: var(--blau-dunkel); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; } /* ---------- Footer ---------- */ .site-footer { margin-top: 0; background: var(--blau-dunkel); color: #cfe0f0; padding: 34px 0 30px; font-size: 14.5px; position: relative; overflow: hidden; } .footer-flieger { position: absolute; right: 24%; top: 2px; width: 230px; opacity: .85; pointer-events: none; } @media (max-width: 760px) { .footer-flieger { display: none; } } .abschnitt-deko { display: flex; align-items: center; } .abschnitt-deko img { width: 130px; } @media (max-width: 620px) { .abschnitt-deko img { width: 96px; } } .footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .site-footer a { color: #fff; text-decoration: none; font-weight: 600; margin-left: 18px; } .site-footer a:first-child { margin-left: 0; } .site-footer a:hover { text-decoration: underline; } @media (max-width: 620px) { .hero img.hero-bild { height: 260px; } .hero-karte { margin: -40px 14px 0; padding: 20px; } .hero-karte h1 { font-size: 23px; } .inhalt { padding: 22px 20px; } }