/* =========================================================================== theme.css – Designvarianten, Hintergrundbild und Oberflaeche der neuen Seiten Wird NACH style.css geladen und ueberschreibt gezielt einzelne Werte. Umgeschaltet wird ueber cms-design.php (Attribute am -Element). =========================================================================== */ :root { --paper-rgb: 247, 244, 238; /* Grundfarbe als Zahlen, fuer rgba() */ --bg-bild: none; --bg-schleier: 1; --bg-blur: 0px; --tile: #e9e5db; /* Kachel-Hintergrund */ --soft: #efece4; /* zarte Flaeche (Hover, Code) */ --soft2: #ece8df; /* zarte Flaeche 2 */ --aktiv: #e7efe9; /* aktiver Menuepunkt */ --topbar: rgba(247, 244, 238, .90); --okbg: #e8f3ec; --oktext: #2c6b4f; --okline: #cfe6d8; --errbg: #fbeae7; --errline: #f0cec8; --btn-radius: 9px; --btn-spur: 0; --btn-caps: none; --btn-gewicht: 600; } /* ---------------------------------------------------- Design 1: Pergament Warmes Papier, gruener Akzent – die ruhige Vorgabe. */ html[data-design="pergament"] { /* entspricht den Vorgaben oben */ } /* -------------------------------------------------------- Design 2: Abend Dunkler Hintergrund, warmes Gold – Fotos wirken kraeftiger. */ html[data-design="abend"] { --paper: #16181b; --paper-rgb: 22, 24, 27; --card: #202429; --ink: #eceae6; --muted: #9aa1a9; --line: #313740; --accent: #c8a45c; --accent2: #d98b56; --danger: #e0705f; --tile: #242a30; --soft: #262c33; --soft2: #2b323a; --aktiv: #33302a; --topbar: rgba(18, 20, 23, .88); --okbg: #1e3229; --oktext: #8fd6ae; --okline: #2c5040; --errbg: #3a2320; --errline: #5c352f; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.35); --shadow2: 0 4px 10px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.5); color-scheme: dark; } /* --------------------------------------------------------- Design 3: Klar Kuehles Weiss, blauer Akzent, mehr Luft – sachlich und hell. */ html[data-design="klar"] { --paper: #f4f6f8; --paper-rgb: 244, 246, 248; --card: #ffffff; --ink: #16202b; --muted: #66727f; --line: #dde3e9; --accent: #2b6cb0; --accent2: #0d9488; --danger: #c02f2f; --tile: #e4e9ee; --soft: #eaeef2; --soft2: #e3e9ef; --aktiv: #e2ecf7; --topbar: rgba(255, 255, 255, .90); --okbg: #e6f4ec; --oktext: #1f6b45; --okline: #c6e5d3; --errbg: #fdeceb; --errline: #f5cbc8; --radius: 10px; --shadow: 0 1px 2px rgba(20,30,45,.06), 0 8px 24px rgba(20,30,45,.08); } /* ------------------------------------------------------------ Buttonstile */ html[data-btn="weich"] { --btn-radius: 9px; --btn-spur: 0; --btn-caps: none; --btn-gewicht: 600; } html[data-btn="kante"] { --btn-radius: 0; --btn-spur: .08em; --btn-caps: uppercase; --btn-gewicht: 700; } html[data-btn="pille"] { --btn-radius: 999px; --btn-spur: .01em; --btn-caps: none; --btn-gewicht: 600; } button[type=submit], .knopf, .verw-tools button { border-radius: var(--btn-radius); letter-spacing: var(--btn-spur); text-transform: var(--btn-caps); font-weight: var(--btn-gewicht); } .knopf { display: inline-block; padding: 10px 18px; font-size: .95rem; color: #fff; background: var(--accent); border: 0; cursor: pointer; text-decoration: none; transition: filter .15s, transform .1s; } .knopf:hover { filter: brightness(1.08); text-decoration: none; color: #fff; } .knopf:active { transform: translateY(1px); } .knopf.zweit { background: transparent; color: var(--accent); border: 1px solid var(--accent); } html[data-btn="pille"] .topbar .mainnav a { border-radius: 999px; } html[data-btn="kante"] .topbar .mainnav a { border-radius: 0; } /* ------------------------------------- Fusszeile immer am unteren Rand Ohne diese Regeln steht der Fuss direkt hinter dem Inhalt - bei kurzen Seiten also mitten im Bild. Die Anmeldeseite ist ausgenommen, sie zentriert ihre Karte bereits selbst. */ html { height: 100%; } body:not(.login-page) { min-height: 100vh; min-height: 100dvh; /* auf Mobilgeraeten ohne Adressleisten-Sprung */ display: flex; flex-direction: column; } /* width/max-width ausdruecklich setzen: Ohne "width: 100%" schaltet ein "margin: 0 auto" am Flex-Element die Dehnung ab - der Inhalt schrumpft dann auf Inhaltsbreite und Kachelraster fallen auf eine Spalte zusammen. */ body:not(.login-page) > main { flex: 1 0 auto; width: 100%; } .sitefoot { flex: 0 0 auto; margin-top: auto; width: 100%; } .sitefoot a { color: var(--muted); text-decoration: none; } .sitefoot a:hover { color: var(--accent); text-decoration: underline; } /* ----------------------------------------------------------- Lesehilfe Liegt ein Foto im Hintergrund, sitzt die Schrift sonst direkt darauf und ist je nach Motiv kaum lesbar. Die Lesehilfe legt eine leicht getoente, durchscheinende Flaeche hinter den Textbereich - das Foto bleibt an den Raendern sichtbar. Einstellbar unter CMS -> Design. */ html[data-lese="dezent"] { --lese-deckung: .68; --lese-blur: 5px; } html[data-lese="kraeftig"] { --lese-deckung: .90; --lese-blur: 12px; } html[data-lese="dezent"] body:not(.login-page) > main, html[data-lese="kraeftig"] body:not(.login-page) > main { background: rgba(var(--paper-rgb), var(--lese-deckung)); -webkit-backdrop-filter: blur(var(--lese-blur)); backdrop-filter: blur(var(--lese-blur)); border-radius: 18px; padding-top: 18px; box-shadow: var(--shadow); } /* etwas Luft, damit die Flaeche nicht am Fensterrand klebt */ html[data-lese="dezent"] body:not(.login-page) > main, html[data-lese="kraeftig"] body:not(.login-page) > main { margin-top: 14px; margin-bottom: 14px; } @media (max-width: 560px) { html[data-lese="dezent"] body:not(.login-page) > main, html[data-lese="kraeftig"] body:not(.login-page) > main { border-radius: 0; margin-top: 0; } } /* ------------------------------------------------------- Hintergrundbild */ html { background: var(--paper); } body { background: transparent; } body::before { content: ""; position: fixed; inset: -3%; z-index: -2; background-image: var(--bg-bild); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(var(--bg-blur)); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--paper); opacity: var(--bg-schleier); } body.login-page::before, body.login-page::after { position: fixed; } /* --------------------------- fest verdrahtete Farben aus style.css lösen */ .topbar { background: var(--topbar); } .topbar .mainnav a:hover { background: var(--soft2); } .topbar .mainnav a.active { background: var(--aktiv); } code { background: var(--soft); color: var(--ink); } .year-tile, .mus-cover { background: var(--tile); } .year-tile .no-cover, .mus-kein-cover { background: var(--tile); } .mus-album, .verw-alben li, .login-card, .form-wrap { background: var(--card); } .rubrik-liste a:hover { background: var(--soft); } .ok { background: var(--okbg); color: var(--oktext); border-color: var(--okline); } .error { background: var(--errbg); color: var(--danger); border-color: var(--errline); } .content blockquote { border-left-color: var(--accent2); } /* ------------------------------------------------------- neue Bausteine */ .brotkrume { margin: 0 0 6px; font-size: .9rem; } .versteckt { display: none; } .inline { display: inline; } form.inline { display: inline; } textarea, select { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; font-family: inherit; } textarea { line-height: 1.5; resize: vertical; } input[type=color] { width: 62px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); } input[type=range] { width: 100%; accent-color: var(--accent); } /* ------------------------------------------------------------- CMS-Seiten */ .cms { max-width: 1080px; margin: 22px auto; padding: 0 22px 80px; } .cms-kopf { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; border-bottom: 2px solid var(--line); padding-bottom: 10px; margin-bottom: 18px; } .cms-kopf h1 { margin: 0; font-size: 1.7rem; } .cms-tabs { display: flex; gap: 6px; margin-left: auto; } .cms-tabs a { padding: 6px 13px; border-radius: 999px; color: var(--muted); font-size: .92rem; } .cms-tabs a:hover { background: var(--soft); text-decoration: none; color: var(--ink); } .cms-tabs a.active { background: var(--aktiv); color: var(--accent); font-weight: 600; } .cms-tab { width: 100%; border-collapse: collapse; margin: 16px 0 20px; font-size: .93rem; } .cms-tab th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 8px 8px; font-weight: 600; } .cms-tab td { border-bottom: 1px solid var(--line); padding: 8px; vertical-align: middle; } .cms-tab tr:hover td { background: var(--soft); } .cms-tab td.rechts { text-align: right; white-space: nowrap; } .cms-tab td.mitte { text-align: center; } .cms-tab td a { margin-left: 10px; font-size: .88rem; } .cms-tab input[type=text], .cms-tab input[type=number] { margin-top: 0; padding: 7px 9px; font-size: .92rem; } .cms-tab input.schmal { width: 6em; } .cms-tab select { margin-top: 0; padding: 6px 8px; font-size: .9rem; width: auto; } .cms-tab select.schmal { min-width: 7.5em; } .cms-tab input[type=checkbox] { width: 20px; height: 20px; } .cms-tab input.breit { min-width: 15em; } .einzug { color: var(--muted); } .tag { font-size: .7rem; background: var(--aktiv); color: var(--accent); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; } button.loeschen { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: .88rem; padding: 2px 6px; margin-left: 10px; font-family: inherit; } button.loeschen:hover { text-decoration: underline; } .cms-form { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin: 16px 0 26px; box-shadow: var(--shadow); } .cms-form .zwei { display: flex; gap: 18px; flex-wrap: wrap; } .cms-form .zwei > label { flex: 1 1 220px; } .cms-form label.inline { display: flex; align-items: center; gap: 8px; color: var(--ink); margin: 12px 0; } .cms-form label.inline input { width: auto; margin: 0; } .werkzeugleiste { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; } .werkzeugleiste button { font: inherit; font-size: .82rem; padding: 5px 11px; cursor: pointer; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 7px; } .werkzeugleiste button:hover { background: var(--soft2); } /* --------------------------------------------------------- Designauswahl */ .design-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 14px 0 4px; } .design-karte { position: relative; display: block; cursor: pointer; } .design-karte input { position: absolute; opacity: 0; pointer-events: none; } .design-probe { display: block; border: 2px solid var(--line); border-radius: 12px; padding: 14px; transition: border-color .15s, transform .15s; } .design-karte:hover .design-probe { transform: translateY(-2px); } .design-karte input:checked + .design-probe { border-color: var(--accent); box-shadow: var(--shadow); } .design-probe .probe-name { display: block; font-weight: 700; margin-bottom: 8px; font-size: .98rem; } .design-probe .probe-text { display: block; font-size: .8rem; opacity: .75; margin-bottom: 10px; line-height: 1.4; } .probe-farben { display: flex; gap: 6px; } .probe-farben i { width: 26px; height: 26px; border-radius: 6px; display: block; border: 1px solid rgba(128,128,128,.25); } /* ------------------------------------------------------------ Upload-Seite */ .up-wrap { max-width: 760px; margin: 26px auto; padding: 0 22px 80px; } .up-karte { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; box-shadow: var(--shadow); } .up-feld { border: 2px dashed var(--line); border-radius: 14px; padding: 26px 18px; text-align: center; color: var(--muted); transition: border-color .15s, background .15s; } .up-feld.aktiv { border-color: var(--accent); background: var(--soft); } .up-feld input[type=file] { margin: 12px auto 0; max-width: 340px; } .up-liste { list-style: none; padding: 0; margin: 14px 0 0; font-size: .9rem; } .up-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); } .up-liste .jahr { color: var(--accent); font-weight: 600; } .up-ergebnis { margin: 18px 0 0; } /* -------------------------------------------------------- Freigabe-Seite */ .freig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .freig-zelle { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--tile); border: 1px solid var(--line); } .freig-zelle img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .freig-info { display: block; padding: 8px 10px; font-size: .8rem; color: var(--muted); } .freig-zelle input { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; } /* ---------------------------------------------------------------- Mobil */ @media (max-width: 700px) { .cms-tab, .cms-tab thead, .cms-tab tbody, .cms-tab tr, .cms-tab td { display: block; width: 100%; } .cms-tab thead { display: none; } .cms-tab tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-bottom: 12px; } .cms-tab td { border: 0; padding: 5px 4px; } .cms-tab td.rechts { text-align: left; } }