/* ICT.Schule — Website ict.schule Gemeinsames Stylesheet aller Seiten. Farbwelt = App (config.js). Alle Pfade relativ → Site ist von /new nach / verschiebbar. */ :root { --bg: #0d1b2a; --bg2: #132236; --bg3: #1a2e45; --card: #162032; --border: #1e3a52; --border2: #254d6b; --text: #e8f4f8; --text2: #8bafc4; --text3: #4d7a96; --accent: #00b4d8; --accent2: #0096c7; --purple: #6a5acd; --gold: #f0c040; --rot: #ff6b6b; --gruen: #2dd4a7; --radius: 14px; --maxw: 1080px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ── Header ─────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(13, 27, 42, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; gap: 18px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand-rabe { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; } /* ── Wortmarke, theme-abhängig ──────────────────────────── Die Variante folgt dem HEADER-Hintergrund, nicht dem OS-Hell-Modus: der Header ist heute fix dunkel (.site-header background). Darum ist die Umschaltung an ein explizites data-theme="light" auf gekoppelt — das setzt Christians kommendes Hell-Theme, wenn es den Header hell macht. (prefers-color-scheme allein wäre falsch: heller OS-Modus + dunkler Header → dunkles ICT auf Dunkel = unsichtbar.) Dateien (beide transparent freigestellt, 832×200, gleiche Höhe → kein Sprung): wortmarke-ict-schule-dark.png — weisses ICT, für dunklen Header wortmarke-ict-schule-light.png — dunkles ICT, für hellen Header Höhe fix, Breite proportional. Skaliert mobil (~380px) mit. */ .brand-wortmarke { height: clamp(22px, 5.6vw, 27px); width: auto; display: block; } /* Default (dunkler Header): weisse Wortmarke sichtbar, Hell-Variante aus. */ .wm-light { display: none; } /* Hell-Theme (data-theme="light"): dunkle Wortmarke aus, Hell-Variante an. Reine CSS-Umschaltung → kein Flackern; beide transparent → kein Kasten. */ :root[data-theme="light"] .wm-dark { display: none; } :root[data-theme="light"] .wm-light { display: block; } .nav { display: flex; gap: 4px; margin-left: auto; align-items: center; } .nav a { color: var(--text2); padding: 8px 12px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; } .nav a:hover { color: var(--text); background: var(--bg3); text-decoration: none; } .nav a.aktiv { color: var(--accent); } .nav .btn { margin-left: 8px; } .burger { display: none; margin-left: auto; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 1.1rem; } /* Die volle horizontale Nav (8 Links + Anmelden + „Zur App") braucht ~1162px (Brand 214 + Nav 890 + Abstände). Darunter → Burger, sonst läuft die Nav in die Wortmarke bzw. über den rechten Rand hinaus. */ @media (max-width: 1180px) { .burger { display: block; } .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 10px 16px 16px; } .nav.offen { display: flex; } .nav a { padding: 12px; } .nav .btn { margin-left: 0; margin-top: 8px; text-align: center; } } /* ── Buttons ────────────────────────────────────────── */ .btn { display: inline-block; padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 0.95rem; cursor: pointer; border: none; transition: all 0.15s; } .btn-primar { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #04222e; } .btn-primar:hover { filter: brightness(1.12); text-decoration: none; transform: translateY(-1px); } .btn-sekundar { background: var(--bg3); color: var(--text); border: 1px solid var(--border2); } .btn-sekundar:hover { border-color: var(--accent); text-decoration: none; } /* ── News-Rich-Text-Editor (Superadmin, news.html) ─────────────────────────── */ .news-rt-leiste { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .news-rt-leiste .rt-b { background: var(--bg3); border: 1px solid var(--border2); color: var(--text); border-radius: 6px; padding: 5px 9px; font-size: 0.85rem; line-height: 1.1; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .news-rt-leiste .rt-b:hover { border-color: var(--accent); } .news-rt-leiste .rt-farbe { padding: 5px 6px; } .news-rt { min-height: 220px; max-height: 60vh; overflow-y: auto; border: 1px solid var(--border2); border-radius: 8px; padding: 12px 14px; background: var(--bg); color: var(--text); line-height: 1.6; } .news-rt:focus { outline: none; border-color: var(--accent); } .news-rt:empty::before { content: attr(data-platzhalter); color: var(--text3); } .news-rt > :first-child { margin-top: 0; } .news-rt img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; display: block; } .news-rt h2 { font-size: 1.3rem; margin: 14px 0 6px; } .news-rt h3 { font-size: 1.1rem; margin: 12px 0 6px; } .news-rt a { color: var(--accent); } .news-rt ul, .news-rt ol { margin: 8px 0 8px 1.4em; } /* Öffentliche News-Bilder responsiv (falls im Beitrags-HTML enthalten) */ .news-body img { max-width: 100%; height: auto; border-radius: 8px; } .news-body figure { margin: 12px 0; } /* Nav-Primär-Button („Zur App"): die generischen .nav a-Farben (heller --text2, grauer Hover-Grund) überschrieben sonst die Button-Optik → heller Text auf hellem Cyan, kaum lesbar. Hier die Primär-Optik wiederherstellen (dunkler Text auf Cyan-Verlauf), inkl. lesbarem Hover — konsistent mit allen .btn-primar. */ .nav a.btn-primar { color: #04222e; } .nav a.btn-primar:hover { color: #04222e; background: linear-gradient(135deg, var(--accent), var(--accent2)); } .btn-klein { padding: 7px 14px; font-size: 0.85rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Hero ───────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 80px 0 70px; background: radial-gradient(ellipse 60% 50% at 70% 10%, rgba(0, 180, 216, 0.13), transparent), radial-gradient(ellipse 50% 60% at 15% 90%, rgba(106, 90, 205, 0.12), transparent); } .hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.2; font-weight: 800; max-width: 720px; letter-spacing: -0.02em; } .hero h1 em { font-style: normal; color: var(--accent); } .hero p { margin-top: 18px; max-width: 620px; color: var(--text2); font-size: 1.1rem; } .hero .cta-reihe { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; } .hero-hexbg { position: absolute; right: -60px; top: 20px; width: 420px; opacity: 0.5; pointer-events: none; } @media (max-width: 900px) { .hero-hexbg { display: none; } .hero { padding: 56px 0 48px; } } /* ── Sektionen / Karten ─────────────────────────────── */ .sektion { padding: 60px 0; } .sektion.abgesetzt { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .sektion h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 750; letter-spacing: -0.01em; } .sektion .untertitel { color: var(--text2); margin-top: 10px; max-width: 640px; } /* In Block-Sektionen soll die gewählte BLOCK-BREITE gelten (die .wrap-Breite via mb-breite-*). Die feste 640px-Kappung des Untertitels würde „volle Breite" sonst ignorieren — hier aufheben, damit der Text der Blockbreite folgt. */ .mb-sektion .untertitel { max-width: none; } .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 32px; } .karte { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; transition: border-color 0.15s, transform 0.15s; /* Flex-Spalte: der Button (margin-top:auto) sitzt am Kachel-Ende, so liegen die Buttons einer Reihe bündig auf gleicher Höhe. .karten (Grid) streckt die Kacheln ohnehin auf gleiche Reihenhöhe (align-items:stretch). */ display: flex; flex-direction: column; } .karte:hover { border-color: var(--border2); transform: translateY(-2px); } .karte .ico { color: var(--accent); display: inline-flex; } /* In der Flex-Spalten-Kachel ist das Icon ein Flex-Item und reagiert nicht auf text-align — daher folgt es der Block-Ausrichtung explizit per align-self, so dass es (wie Titel/Text/Button) mittig bzw. links/rechts sitzt. Bei Block- Kacheln (z.B. Modul-Teaser mit display:block) ist align-self wirkungslos, dort zentriert weiterhin text-align — keine Regression. */ .mb-align-center .karte .ico { align-self: center; } .mb-align-right .karte .ico { align-self: flex-end; } .mb-align-left .karte .ico { align-self: flex-start; } /* Titel-Ausrichtung getrennt vom Inhalt: `.mb-titel` allein ist wirkungslos (Überschrift folgt weiter dem Wrap = heutiges Verhalten). Erst die Wahl Links/Zentriert setzt eine eigene Ausrichtung NUR auf die Überschrift. */ .mb-titel-align-left { text-align: left; } .mb-titel-align-center { text-align: center; } .karte h3 { margin-top: 10px; font-size: 1.05rem; } .karte p { margin-top: 6px; color: var(--text2); font-size: 0.92rem; } .stats { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 36px; align-items: flex-start; } .stat b { display: block; font-size: 1.6rem; color: var(--accent); } .stat span { color: var(--text3); font-size: 0.88rem; } /* Kennzahlen-Blöcke: „Abstand klein" (−90px) überlappte die Sektionen so stark, dass der Kasten des nächsten Blocks in die Labels des vorherigen ragte — überlappende transparente Sektionen erzeugen dabei auf manchen Displays eine feine 1px-Naht (sieht aus wie ein Rahmen). Für Kennzahlen die Überlappung so kappen, dass KEIN Inhalt mehr überlappt (entspricht „mittel", bleibt eng). Nur Kennzahlen-Blöcke; Inhalt bleibt sichtbar (kein deckender Hintergrund). */ .mb-kennzahlen.mb-abstand-klein { margin-bottom: -48px; } /* Verschachtelte Kennzahl (z.B. Ressourcen → Lehrmittel/Multimedia/Bücher/Artikel) */ .stat-gruppe .stat-kinder { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; } .stat-gruppe .stat-kinder li { display: flex; align-items: baseline; gap: 8px; } .stat-gruppe .stat-kinder li b { display: inline; font-size: 1rem; min-width: 3.6em; text-align: right; } .stat-gruppe .stat-kinder li span { font-size: 0.82rem; } /* Kennzahlen-Editor (Reihenfolge/Auswahl/Titel) */ .mb-kz-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .mb-kz-eintrag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; } .mb-kz-name { min-width: 150px; font-size: 0.85rem; color: var(--text2); } .mb-kz-name em { color: var(--text3); font-size: 0.78rem; } .mb-kz-titel { flex: 1 1 160px; } .mb-kz-akt { display: inline-flex; gap: 3px; margin-left: auto; } .mb-kz-akt .mb-move, .mb-kz-akt .mb-del { cursor: pointer; background: none; border: none; color: var(--text2); font-size: 0.9rem; padding: 2px 5px; border-radius: 6px; } .mb-kz-akt .mb-move:hover { background: var(--border); color: var(--text); } .mb-kz-akt .mb-del:hover { background: rgba(255, 107, 107, 0.15); color: var(--rot); } .mb-kz-add { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; } .mb-kz-leer { color: var(--text3); font-size: 0.85rem; padding: 6px 0; } /* Freie Kachel im Kennzahlen-Editor */ .mb-kz-frei { background: var(--bg2); border-style: dashed; } .mb-kz-frei .mb-kz-name { min-width: 42px; color: var(--text3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .mb-kz-frei-bild { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; } .mb-kz-frei-bild img { max-height: 28px; max-width: 70px; object-fit: contain; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 1px 3px; } .mb-kz-frei .mb-kz-wert { width: 130px; } .mb-kz-frei .mb-kz-klein { flex: 1 1 140px; } /* ── Partner-Block (öffentlich): Raster ODER Tabelle ─────────────────────── */ .mb-partner.partner-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin-top: 26px; } .partner-karte { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .partner-karte .pk-logo { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; } .partner-karte .pk-logo img { max-width: 100%; max-height: 60px; object-fit: contain; } .partner-karte .pk-name { font-weight: 650; color: var(--text); } .partner-karte .pk-info { color: var(--text2); font-size: 0.88rem; line-height: 1.5; } /* Verlinkte Partner-Kachel (URL gesetzt) */ a.partner-karte { text-decoration: none; color: inherit; } a.partner-karte:hover { border-color: var(--accent); transform: translateY(-2px); } .partner-tabelle .pt-url a { white-space: nowrap; } .partner-tabelle-wrap { overflow-x: auto; margin-top: 26px; } .partner-tabelle { width: 100%; border-collapse: collapse; } .partner-tabelle th, .partner-tabelle td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: middle; } .partner-tabelle thead th { color: var(--text3); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; border-top: none; border-bottom: 1px solid var(--border2); } .partner-tabelle .pt-logo img { max-height: 44px; max-width: 120px; object-fit: contain; display: block; } .partner-tabelle .pt-name { font-weight: 650; color: var(--text); } .partner-tabelle .pt-info { color: var(--text2); font-size: 0.9rem; } /* Partner-Verwaltung (admin.html) */ .partner-ez { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; } .pe-logo-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pe-logo-box img { max-height: 34px; max-width: 90px; object-fit: contain; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 4px; } .pe-logo-leer { color: var(--text3); font-size: 0.8rem; } .pe-felder { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; } .pe-akt { display: inline-flex; gap: 3px; margin-left: auto; } .pe-akt .mb-move, .pe-akt .mb-del { cursor: pointer; background: none; border: none; color: var(--text2); font-size: 0.9rem; padding: 2px 6px; border-radius: 6px; } .pe-akt .mb-move:hover { background: var(--border); color: var(--text); } .pe-akt .mb-del:hover { background: rgba(255, 107, 107, 0.15); color: var(--rot); } .partner-ez.partner-verborgen { opacity: 0.5; } .pe-sichtbar { white-space: nowrap; margin-right: 4px; } /* ── Merkmal-Badges (Block „merkmale") ───────────────────────────────────── */ .stat-bild { height: 2.2rem; width: auto; max-width: 130px; object-fit: contain; display: block; } .mb-badge-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .mb-badge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; } .mb-badge-bild { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .mb-badge-bild img { max-height: 30px; max-width: 80px; object-fit: contain; background: rgba(255,255,255,0.85); border-radius: 4px; padding: 2px 3px; } .mb-badge-leer { color: var(--text3); font-size: 0.78rem; } .mb-badge-felder { flex: 1 1 240px; display: flex; flex-direction: column; gap: 5px; } .mb-badge-akt { display: inline-flex; gap: 3px; margin-left: auto; } .mb-badge-akt .mb-move, .mb-badge-akt .mb-del { cursor: pointer; background: none; border: none; color: var(--text2); font-size: 0.9rem; padding: 2px 5px; border-radius: 6px; } .mb-badge-akt .mb-move:hover { background: var(--border); color: var(--text); } .mb-badge-akt .mb-del:hover { background: rgba(255, 107, 107, 0.15); color: var(--rot); } /* ── Honeycomb (Module-Seite) ───────────────────────── */ .honey-bereich { margin-top: 40px; } .honey-reihe { display: flex; justify-content: center; } .hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(160deg, var(--bg3), var(--card) 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; position: relative; transition: transform 0.15s, filter 0.15s; padding: 5% 18%; } .hex-aussen { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); padding: 2px; flex-shrink: 0; background: var(--border2); transition: background 0.15s; } .hex-aussen:hover { background: var(--accent); z-index: 5; } .hex-aussen:hover .hex { transform: scale(1.03); } /* ── Modul-Typ: Ring UND leichte Grundfüllung ──────────── Zwei Bedeutungen, zwei Farben: grün = im Grundangebot, violett = lizenziert. Hybrid ist kein drittes Ding, sondern beides gleichzeitig — darum trägt es beide Farben (Streifen oder Verlauf, umschaltbar im Website-Admin über .hybrid-*). Die Füllung liegt als dünne Lasur ÜBER dem Basis-Verlauf der Wabe, damit Icon und Titel lesbar bleiben. */ .hex-aussen.typ-gratis { background: rgba(45, 212, 167, 0.5); } .hex-aussen.typ-lizenziert { background: rgba(106, 90, 205, 0.6); } .hex-aussen.typ-gratis:hover { background: var(--gruen); } .hex-aussen.typ-lizenziert:hover { background: var(--purple); } .hex-aussen.typ-gratis .hex { background: linear-gradient(0deg, rgba(45, 212, 167, 0.12), rgba(45, 212, 167, 0.12)), linear-gradient(160deg, var(--bg3), var(--card) 70%); } .hex-aussen.typ-lizenziert .hex { background: linear-gradient(0deg, rgba(106, 90, 205, 0.17), rgba(106, 90, 205, 0.17)), linear-gradient(160deg, var(--bg3), var(--card) 70%); } /* Hybrid A — 45°-Schraffur, grün/violett abwechselnd */ .hybrid-streifen .hex-aussen.typ-hybrid { background: repeating-linear-gradient(45deg, rgba(45, 212, 167, 0.5) 0 7px, rgba(106, 90, 205, 0.6) 7px 14px); } .hybrid-streifen .hex-aussen.typ-hybrid:hover { background: repeating-linear-gradient(45deg, var(--gruen) 0 7px, var(--purple) 7px 14px); } .hybrid-streifen .hex-aussen.typ-hybrid .hex { background: repeating-linear-gradient(45deg, rgba(45, 212, 167, 0.13) 0 9px, rgba(106, 90, 205, 0.2) 9px 18px), linear-gradient(160deg, var(--bg3), var(--card) 70%); } /* Hybrid B — diagonaler Verlauf grün → violett */ .hybrid-verlauf .hex-aussen.typ-hybrid { background: linear-gradient(135deg, rgba(45, 212, 167, 0.5), rgba(106, 90, 205, 0.6)); } .hybrid-verlauf .hex-aussen.typ-hybrid:hover { background: linear-gradient(135deg, var(--gruen), var(--purple)); } .hybrid-verlauf .hex-aussen.typ-hybrid .hex { background: linear-gradient(135deg, rgba(45, 212, 167, 0.15), rgba(106, 90, 205, 0.22)), linear-gradient(160deg, var(--bg3), var(--card) 70%); } .hex-aussen.hervorgehoben { background: var(--accent); box-shadow: 0 0 24px rgba(0, 180, 216, 0.35); } .hex .ico { color: var(--accent); display: inline-flex; line-height: 1; } .hex-aussen.typ-gratis .hex .ico { color: var(--gruen); } .hex-aussen.typ-lizenziert .hex .ico { color: #a99df1; } /* Hybrid: neutrales Icon — die Fläche trägt die Doppel-Aussage bereits, eine dritte Icon-Farbe würde wieder ein «drittes Ding» suggerieren. */ .hex-aussen.typ-hybrid .hex .ico { color: #d5e7ee; } .hex-spacer { visibility: hidden; pointer-events: none; } .hex .lbl { font-weight: 650; font-size: 0.8rem; line-height: 1.2; margin-top: 5px; max-width: 100%; overflow-wrap: break-word; hyphens: auto; } .hex .prs { font-size: 0.68rem; color: var(--text2); margin-top: 4px; } .hex .prs.gratis { color: var(--gruen); font-weight: 600; } /* Legende — die Muster sind dieselben wie auf den Waben, damit die Zuordnung ohne Erklärtext funktioniert. */ .legende { display: flex; gap: 12px 24px; flex-wrap: wrap; justify-content: center; margin-top: 28px; color: var(--text2); font-size: 0.85rem; } .legende span { display: inline-flex; align-items: center; gap: 8px; } /* Verkleinerte Kopien der grossen Modul-Waben: GLEICHER clip-path UND dasselbe Seitenverhältnis H = 0.866·B (flat-top, regulär, breiter als hoch). Vorher war die Legende 24×27 (höher als breit) und wirkte dadurch „spitz-oben" statt flach-oben wie die Modul-Waben. 30×26 ≈ 0.866-Ratio. */ .legende i { width: 30px; height: 26px; flex-shrink: 0; font-style: normal; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } .legende .lg-gratis i { background: rgba(45, 212, 167, 0.7); } .legende .lg-lizenz i { background: rgba(106, 90, 205, 0.85); } /* Hybrid-Legendenwabe: dasselbe 45°-Streifenmuster wie die grossen Hybrid-Modul- Waben (.hybrid-streifen .hex-aussen.typ-hybrid: repeating-linear-gradient 45°, 7px/14px), in denselben zwei Farben — nur in den etwas kräftigeren Legenden- Deckkräften, damit die Farben bei der kleinen Grösse nicht zu Grau verschmelzen und zu den einfarbigen Nachbarn passen. So sind Legende und Waben konsistent. */ .legende .lg-hybrid i { background: repeating-linear-gradient(45deg, rgba(45, 212, 167, 0.7) 0 7px, rgba(106, 90, 205, 0.85) 7px 14px); } /* Modul-Detail (Bottom-Sheet / Modal) */ .modal-hintergrund { position: fixed; inset: 0; background: rgba(4, 10, 18, 0.7); z-index: 200; display: none; align-items: flex-end; justify-content: center; } .modal-hintergrund.offen { display: flex; } .modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 18px 18px 0 0; width: 100%; max-width: 560px; padding: 26px 24px 34px; max-height: 85vh; overflow-y: auto; } @media (min-width: 640px) { .modal-hintergrund { align-items: center; } .modal { border-radius: 18px; padding-bottom: 26px; } } .modal .m-kopf { display: flex; align-items: center; gap: 12px; } .modal .m-kopf .ico { font-size: 1.9rem; } .modal h3 { font-size: 1.25rem; } .modal .schliessen { margin-left: auto; background: none; border: none; color: var(--text3); font-size: 1.4rem; cursor: pointer; padding: 4px; } .badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.03em; } .badge-gratis { background: rgba(45, 212, 167, 0.15); color: var(--gruen); } .badge-hybrid { background: linear-gradient(100deg, rgba(45, 212, 167, 0.18), rgba(106, 90, 205, 0.3)); color: #d5e7ee; } .badge-lizenziert { background: rgba(106, 90, 205, 0.2); color: #a99df1; } .modal .m-tagline { color: var(--accent); font-weight: 600; margin-top: 12px; } .modal .m-text { color: var(--text2); margin-top: 8px; font-size: 0.95rem; } .preis-tabelle { margin-top: 18px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .preis-zeile { display: flex; justify-content: space-between; padding: 10px 14px; font-size: 0.92rem; } .preis-zeile + .preis-zeile { border-top: 1px solid var(--border); } .preis-zeile b { color: var(--text); } .preis-zeile span { color: var(--text2); } .modal .m-aktionen { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; } /* ── Formulare ──────────────────────────────────────── */ .feld { margin-top: 16px; } .feld label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text2); margin-bottom: 6px; } .feld input, .feld textarea, .feld select { width: 100%; background: var(--bg); border: 1px solid var(--border2); color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 0.95rem; font-family: inherit; } .feld input:focus, .feld textarea:focus { outline: none; border-color: var(--accent); } .feld textarea { min-height: 120px; resize: vertical; } .hinweis-ok { margin-top: 14px; color: var(--gruen); font-weight: 600; display: none; } .hinweis-err { margin-top: 14px; color: var(--rot); font-weight: 600; display: none; } .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; max-width: 640px; } /* ── Kontakt-Seite: Angaben neben Formular ───────────── */ .kontakt-raster { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 30px; align-items: start; } @media (min-width: 860px) { .kontakt-raster { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; } } .kontakt-raster .panel { max-width: none; } .kontakt-raster .k-h { font-size: 1.05rem; margin-bottom: 4px; } .k-zeile { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; font-size: 0.95rem; line-height: 1.5; } .k-zeile .ico { color: var(--accent); flex-shrink: 0; margin-top: 2px; display: inline-flex; } .k-zeile a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border2); } .k-zeile a:hover { color: var(--accent); border-bottom-color: var(--accent); } .k-neben { color: var(--text2); font-size: 0.88rem; margin-top: 2px; } .k-profile { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; } .k-profil { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border2); color: var(--text); text-decoration: none; font-size: 0.87rem; font-weight: 600; transition: border-color 0.15s, color 0.15s; } .k-profil:hover { border-color: var(--accent); color: var(--accent); } /* ── Admin ──────────────────────────────────────────── */ .admin-balken { position: fixed; bottom: 18px; right: 18px; z-index: 150; display: none; gap: 10px; } .admin-balken.sichtbar { display: flex; } .admin-gruppe { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 22px; overflow: hidden; } .admin-gruppe > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; background: var(--bg3); list-style: none; } .admin-gruppe > summary::before { content: '▸ '; color: var(--accent); } .admin-gruppe[open] > summary::before { content: '▾ '; } .admin-gruppe .gruppe-inhalt { padding: 4px 18px 20px; background: var(--card); } .admin-modulzeile { border-top: 1px solid var(--border); padding: 14px 0; } .admin-modulzeile:first-child { border-top: none; } .admin-modulzeile .kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admin-modulzeile .kopf b { flex: 1; } .check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text2); cursor: pointer; } .check input { accent-color: var(--accent); width: 16px; height: 16px; } /* ── Footer ─────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); margin-top: 60px; padding: 36px 0 44px; background: var(--bg2); } .site-footer .wrap { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; } .site-footer .claim { color: var(--text3); font-size: 0.88rem; max-width: 340px; } .site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; } .site-footer nav a { color: var(--text2); font-size: 0.88rem; } /* ── Inline-Bearbeitung (Superadmin) ────────────────── */ .cms-edit { outline: 2px dashed rgba(0, 180, 216, 0.6); outline-offset: 3px; border-radius: 4px; cursor: text; min-height: 1em; } .cms-edit:focus { outline-color: var(--accent); background: rgba(0, 180, 216, 0.05); } /* ── News ───────────────────────────────────────────── */ .news-liste { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; } .news-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .news-item.entwurf { opacity: 0.6; border-style: dashed; } .news-kopf { padding: 18px 22px; cursor: pointer; display: flex; align-items: baseline; gap: 14px; } .news-kopf:hover { background: var(--bg3); } .news-datum { color: var(--text3); font-size: 0.82rem; white-space: nowrap; } .news-kopf h3 { font-size: 1.05rem; flex: 1; } .news-body { display: none; padding: 0 22px 20px; color: var(--text2); } .news-item.offen .news-body { display: block; } .news-body img { border-radius: 10px; margin-top: 10px; } .news-body p { margin-top: 10px; } .news-body a { word-break: break-word; } .news-admin { display: flex; gap: 8px; padding: 10px 22px 16px; border-top: 1px dashed var(--border); } /* ── Adventskalender ────────────────────────────────── */ .advent-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 34px; } @media (max-width: 760px) { .advent-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 480px) { .advent-grid { grid-template-columns: repeat(3, 1fr); } } .advent-tuer { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--border2); background: linear-gradient(160deg, var(--bg3), var(--card)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: var(--text3); cursor: pointer; transition: transform 0.15s, border-color 0.15s, color 0.15s; } .advent-tuer:hover { transform: scale(1.05); border-color: var(--accent); } .advent-tuer.offenbar { color: var(--accent); border-color: rgba(0, 180, 216, 0.5); } .advent-tuer.heute { color: #04222e; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 20px rgba(0, 180, 216, 0.4); } .advent-inhalt img { width: 100%; border-radius: 10px; margin-top: 12px; } .advent-inhalt .youtube-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin-top: 12px; } .advent-inhalt .youtube-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .advent-locked { text-align: center; } .advent-locked img { max-width: 220px; border-radius: 12px; } /* ── Drag & Drop (Waben-Editor) ─────────────────────── */ .honey-bereich { overflow-x: auto; padding-bottom: 6px; } .hex-aussen.dragbar { cursor: grab; touch-action: none; } .hex-aussen.dragbar .hex { cursor: grab; } .hex-aussen.drag-quelle { opacity: 0.25; } .hex-aussen.hex-leer { background: rgba(139, 175, 196, 0.18); } .hex-aussen.hex-leer .hex { background: var(--bg); cursor: default; } .hex-aussen.hex-leer .hex::after { content: '+'; color: var(--text3); font-size: 1.2rem; opacity: 0.5; } .hex-aussen.drop-ziel { background: var(--accent) !important; } .hex-aussen.drop-ziel .hex { filter: brightness(1.25); } .hex-aussen.drop-ziel.hex-leer .hex::after { color: var(--accent); opacity: 1; } .drag-geist { position: fixed; z-index: 400; pointer-events: none; opacity: 0.9; filter: drop-shadow(0 6px 18px rgba(0, 180, 216, 0.5)); } .layout-leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); padding: 12px 14px; } .layout-leiste select { background: var(--bg); border: 1px solid var(--border2); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 0.9rem; } .versteckt-ablage { margin-top: 18px; border: 1px dashed var(--border2); border-radius: var(--radius); padding: 14px; } .versteckt-ablage .titel { color: var(--text3); font-size: 0.85rem; margin-bottom: 10px; } .versteckt-ablage .inhalt { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; } .versteckt-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; } .versteckt-chip:hover { border-color: var(--accent); } /* ── Prosa (Datenschutz/Impressum) ──────────────────── */ .prosa { max-width: 760px; color: var(--text2); } .prosa h1 { color: var(--text); font-size: 1.8rem; margin-bottom: 18px; } .prosa h2 { color: var(--text); font-size: 1.15rem; margin: 26px 0 8px; } .prosa p { margin-top: 10px; } .prosa ul { margin: 10px 0 0 22px; } /* ── Modularer Block-Editor (blocks.js) ────────────────────────────────────── Kuratierte Stiloptionen = feste Klassen (kein freies CSS → Design bleibt „aus einem Guss"). Seiten ohne Layout-JSON rendern statisch wie bisher. */ /* Block-Breite (Standalone, eigener Block auf voller Zeile): Bruchteil der Inhaltsbreite --maxw, weiterhin zentriert (margin:0 auto aus .wrap). 'normal' bekommt keine Regel → volle Inhaltsbreite (heutiges Verhalten = Default). */ .mb-breite-schmal { max-width: 720px; } .mb-breite-zweidrittel { max-width: calc(var(--maxw) * 0.667); } .mb-breite-halb { max-width: calc(var(--maxw) * 0.5); } .mb-breite-drittel { max-width: calc(var(--maxw) * 0.34); } .mb-breite-viertel { max-width: calc(var(--maxw) * 0.26); } /* ── Blöcke nebeneinander (Reihe) ───────────────────────────────────────── Aufeinanderfolgende Blöcke mit stil.mitVorigem werden in blocks.js in einen .mb-reihe-Container gruppiert. Mobil-first: der Container ist zunächst nur ein normaler Block → die Sektionen stapeln in voller Breite (sauberer Umbruch). Ab 761px wird er zur Flexbox; die Spaltenbreite folgt dem Zwölftel-Gewicht (mb-sp-3/4/6/8/12 = ¼/⅓/½/⅔/voll) via flex-grow, Lücken über gap. */ .mb-reihe { max-width: var(--maxw); margin: 0 auto; } @media (min-width: 761px) { .mb-reihe { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0 32px; padding: 0 20px; } .mb-reihe > * { flex: 12 1 0; min-width: 0; } .mb-reihe > .mb-sp-3 { flex-grow: 3; } .mb-reihe > .mb-sp-4 { flex-grow: 4; } .mb-reihe > .mb-sp-6 { flex-grow: 6; } .mb-reihe > .mb-sp-8 { flex-grow: 8; } .mb-reihe > .mb-sp-12 { flex-grow: 12; } /* In der Reihe füllt der Inhalt die Spalte: innere .wrap-Begrenzung/Polsterung aufheben (die Spaltenbreite kommt vom flex-grow, die Aussenkanten von der Reihe). */ .mb-reihe > * > .wrap { max-width: none; margin: 0; padding: 0; } } .mb-gr-s .mb-text { font-size: 0.92rem; } .mb-gr-l .mb-text { font-size: 1.15rem; } .mb-align-center { text-align: center; } .mb-align-center .mb-text { margin-left: auto; margin-right: auto; } .mb-text > :first-child { margin-top: 0; } .mb-text h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 750; letter-spacing: -0.01em; } .mb-text h3 { font-size: 1.15rem; margin-top: 18px; } .mb-text p { color: var(--text2); margin-top: 10px; line-height: 1.6; } .mb-text ul, .mb-text ol { color: var(--text2); margin: 10px 0 0 1.3em; line-height: 1.6; } .mb-text a { color: var(--accent); } /* Editier-Modus (Superadmin) */ body.mb-editmodus { padding-bottom: 84px; } .mb-edit { outline: 1px dashed var(--border2); } /* „In Reihe"-Blöcke im Editor markieren (Editor bearbeitet gestapelt; die echte Nebeneinander-Ansicht zeigt „Vorschau"). */ .mb-inreihe-edit { border-left: 3px solid var(--accent); } .mb-inreihe-edit > .mb-blockleiste .mb-typ::after { content: " · ◨ in Reihe"; color: var(--accent); font-weight: 600; } .mb-ctl-reihe { border-left: 1px solid var(--border2); padding-left: 10px; } .mb-blockleiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg3); border-bottom: 1px solid var(--border2); padding: 8px 16px; font-size: 0.82rem; } .mb-typ { font-weight: 700; color: var(--text2); } .mb-stile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .mb-ctl { display: inline-flex; align-items: center; gap: 5px; color: var(--text2); } .mb-ctl select { background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 3px 6px; font-size: 0.82rem; } .mb-del { margin-left: auto; background: none; border: none; color: var(--rot); cursor: pointer; padding: 4px; display: inline-flex; } .mb-text[contenteditable="true"] { outline: 2px solid transparent; border-radius: 6px; padding: 6px; transition: outline-color 0.15s; } .mb-text[contenteditable="true"]:focus { outline-color: var(--accent); } .mb-add { text-align: center; padding: 22px; } .mb-editbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; background: var(--bg2); border-top: 1px solid var(--border2); padding: 12px; } /* ── Block-Editor E1: neue Blocktypen (öffentlich) ──────────────────────────── */ .mb-cta { text-align: center; padding: 30px 24px; border-radius: var(--radius); border: 1px solid var(--border2); background: linear-gradient(135deg, rgba(0,180,216,0.12), rgba(106,90,205,0.14)); } .mb-cta h3 { font-size: clamp(1.15rem, 3vw, 1.5rem); } .mb-cta p { color: var(--text2); margin: 10px auto 0; max-width: 560px; } .mb-cta .reihe { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .mb-bild { margin: 0; } .mb-bild img { border-radius: var(--radius); display: block; } .mb-align-center .mb-bild img { margin: 0 auto; } .mb-bild figcaption { color: var(--text3); font-size: 0.85rem; margin-top: 8px; } .mb-bild-leer { color: var(--text3); border: 1px dashed var(--border2); border-radius: var(--radius); padding: 40px; text-align: center; } .mb-appinfo { color: var(--text2); font-size: 0.85rem; margin-top: 12px; display: flex; align-items: center; gap: 6px; } .mb-appinfo input { width: 56px; background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 3px 6px; } /* ── Block-Editor E1: Edit-Steuerung ────────────────────────────────────────── */ .mb-move { cursor: pointer; color: var(--text2); user-select: none; padding: 2px 4px; border-radius: 4px; } .mb-move:hover { color: var(--accent); background: var(--bg); } .mb-karte { position: relative; } .mb-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .mb-karte-kopf select { background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 2px 5px; font-size: 0.78rem; } .mb-karte .mb-f[contenteditable] { outline: 1px dashed transparent; border-radius: 4px; } .mb-karte .mb-f[contenteditable]:focus { outline-color: var(--accent); } .mb-karte-link { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 0.75rem; color: var(--text3); } .mb-karte-link input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; font-size: 0.8rem; } .mb-add-karte { margin-top: 14px; } .mb-bild-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; } .mb-bild-ctl input:not([type=file]) { background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 5px 8px; font-size: 0.82rem; min-width: 180px; } .mb-cta-edit { margin-top: 14px; } .mb-cta-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .mb-cta-item { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .mb-cta-item input, .mb-cta-item select { background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 5px 8px; font-size: 0.82rem; } .mb-f[data-f="titel"], .mb-f[data-f="lead"], .mb-f[data-f="untertitel"] { outline: 1px dashed transparent; border-radius: 6px; } .mb-f[contenteditable]:focus { outline: 2px solid var(--accent); } /* Block-Palette (hinzufügen) */ .mb-palette { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 24px; margin: 8px 16px; border: 1px dashed var(--border2); border-radius: var(--radius); } .mb-palette-lbl { color: var(--text2); font-size: 0.85rem; font-weight: 600; } /* Rich-Text-Leiste */ .mb-rt-leiste { position: fixed; z-index: 250; display: flex; flex-wrap: wrap; gap: 3px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 10px; padding: 5px; box-shadow: 0 8px 30px rgba(0,0,0,0.4); } .mb-rt-b { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; min-width: 30px; height: 28px; padding: 0 7px; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .mb-rt-b:hover { border-color: var(--accent); color: var(--accent); } .mb-rt-farbe { padding: 0 5px; min-width: 26px; } /* ── Block-Editor E2: Drag-and-Drop + Duplizieren ───────────────────────────── */ .mb-griff { cursor: grab; touch-action: none; color: var(--text3); user-select: none; padding: 2px 5px; font-size: 1.05rem; } .mb-griff:active { cursor: grabbing; color: var(--accent); } .mb-move-btn { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 1.02rem; padding: 2px 6px; border-radius: 4px; } .mb-move-btn:hover { color: var(--accent); background: var(--bg); } .mb-dragging { opacity: 0.55; outline: 2px solid var(--accent) !important; outline-offset: -2px; } body.mb-dragmodus, body.mb-dragmodus * { cursor: grabbing !important; user-select: none; } /* ── Block-Editor E3: App-Datenblöcke ───────────────────────────────────────── */ .mb-bereich { display: flex; align-items: center; gap: 10px; } .mb-bereich-punkt { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .mb-bereich h3 { margin: 0; font-size: 1rem; } .mb-news { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; } .mb-news-item { display: block; } .mb-news-datum { color: var(--text3); font-size: 0.8rem; } .mb-news-item h3 { margin-top: 4px; font-size: 1.02rem; } .mb-news-item p { margin-top: 6px; color: var(--text2); font-size: 0.9rem; } .mb-liste { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); margin-top: 20px; background: var(--card); } .mb-metrik-wahl { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; } .mb-metrik-wahl .mb-ctl { color: var(--text2); } .mb-palette-reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .mb-palette-reihe + .mb-palette-reihe { margin-top: 8px; } /* ── Block-Editor E4: Feinschliff (Vorschau, Versionen, Leerzustand, mobil) ──── */ .mb-leer { text-align: center; color: var(--text3); padding: 40px; border: 1px dashed var(--border2); border-radius: var(--radius); margin: 20px 16px; } .mb-versionen { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); z-index: 210; width: min(460px, 92vw); max-height: 60vh; overflow: auto; background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); } .mb-versionen-kopf { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 8px; } .mb-versionen-kopf .schliessen { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 1.1rem; } .mb-version { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text2); } @media (max-width: 640px) { .mb-editbar { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; } .mb-editbar .btn { flex-shrink: 0; } .mb-blockleiste { font-size: 0.74rem; gap: 8px 10px; } .mb-rt-leiste { max-width: calc(100vw - 12px); } .mb-palette-reihe { justify-content: flex-start; } } /* Button-Reihe-Block (2A) */ .mb-btnrow { display: flex; gap: 12px; flex-wrap: wrap; } .mb-align-center .mb-btnrow { justify-content: center; } /* Datenschutz-Entwurf: Platzhalter, die Christian noch ausfüllen muss */ .mb-text .ph, .prosa .ph { background: var(--gold); color: #0d1b2a; padding: 1px 6px; border-radius: 4px; font-weight: 600; } /* Kachel-Button (optional, statt Ganz-Kachel-Link) + Editor-Felder/Sortierpfeile */ /* margin-top:auto drückt den Button ans Kachel-Ende (bündig über die Reihe), padding-top hält den Mindestabstand zum Text. Kacheln OHNE Button erzeugen keine Leerhöhe (kein Element, kein auto-Push). */ .mb-kachel-btn { margin-top: auto; padding-top: 16px; } .mb-karte-move { display: inline-flex; gap: 4px; } .mb-karte-move .mb-move { font-size: 0.9rem; } .mb-karte-btnfelder { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .mb-karte-btnfelder .mb-ctl { display: flex; flex-direction: column; align-items: stretch; gap: 3px; font-size: 0.72rem; color: var(--text3); } .mb-karte-btnfelder input { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 0.82rem; } /* Abstand nach unten pro Block (Editor-Auswahl). Standard „gross" = unverändert; „mittel"/„klein" ziehen den Folgeblock über den negativen Aussenabstand näher heran (die grosse Sektions-Polsterung bleibt, es entsteht kein Überlappen). */ .mb-abstand-mittel { margin-bottom: -48px; } .mb-abstand-klein { margin-bottom: -90px; }