/* Ankerwort — Oberfläche Weisser Grund, klare Kanten, Gold nur als Akzent. Die Startseite ist auf eine Bildschirmhöhe gebaut: Kopfzeile, Hero mit Suche, darunter Themen und die Zusage des Tages nebeneinander. Gescrollt wird erst in der Trefferliste. Farbig wird es an genau einer Stelle — bei der Unterscheidung bedingungslos / mit Bedingung, dem Sinn der Sammlung. */ /* Farben liegen als Tokens vor; der dunkle Modus tauscht nur ihre Werte. Vorgabe ist die Systemeinstellung, eine eigene Wahl überschreibt sie und bleibt gespeichert (data-thema am ). */ :root{ --tinte:#15181d; --tinte-weich:#4b525e; --gedaempft:#8d939e; --grund:#ffffff; --flaeche:#f7f8f9; --erhoben:#ffffff; --linie:#e4e6ea; --linie-zart:#f0f1f3; --gold:#b08422; --gold-hell:#e8cf90; --gold-blass:#fbf5e6; --rost:#a3543d; --rost-blass:#f8eeea; --schatten-klein:0 1px 2px rgba(21,24,29,0.05), 0 3px 8px rgba(21,24,29,0.04); --schatten-gross:0 1px 3px rgba(21,24,29,0.06), 0 12px 32px rgba(21,24,29,0.08); --hero-schleier:rgba(16,21,29,0.76); --serif:'Fraunces', Georgia, 'Times New Roman', serif; --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --rand:clamp(18px, 4vw, 48px); --kopf:60px; color-scheme:light; } @media (prefers-color-scheme: dark){ :root:not([data-thema="hell"]){ --tinte:#eef0f3; --tinte-weich:#a8b0bd; --gedaempft:#767f8d; --grund:#12151a; --flaeche:#1a1e25; --erhoben:#191d24; --linie:#2b313a; --linie-zart:#20252c; --gold:#d4ab52; --gold-hell:#8a6c26; --gold-blass:#241d0f; --rost:#cf7f63; --rost-blass:#2a1a15; --schatten-klein:0 1px 2px rgba(0,0,0,0.4); --schatten-gross:0 1px 3px rgba(0,0,0,0.45), 0 14px 36px rgba(0,0,0,0.4); --hero-schleier:rgba(8,11,15,0.82); color-scheme:dark; } } :root[data-thema="dunkel"]{ --tinte:#eef0f3; --tinte-weich:#a8b0bd; --gedaempft:#767f8d; --grund:#12151a; --flaeche:#1a1e25; --erhoben:#191d24; --linie:#2b313a; --linie-zart:#20252c; --gold:#d4ab52; --gold-hell:#8a6c26; --gold-blass:#241d0f; --rost:#cf7f63; --rost-blass:#2a1a15; --schatten-klein:0 1px 2px rgba(0,0,0,0.4); --schatten-gross:0 1px 3px rgba(0,0,0,0.45), 0 14px 36px rgba(0,0,0,0.4); --hero-schleier:rgba(8,11,15,0.82); color-scheme:dark; } *{box-sizing:border-box;} /* Nichts darf über die Schirmbreite hinausragen: Sonst entsteht seitliches Scrollen, und Elemente am rechten Rand — etwa der Hell/Dunkel-Umschalter — liegen ausserhalb des Bildes. */ html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;} body{ background:var(--grund); color:var(--tinte); font-family:var(--sans); font-size:15px; -webkit-font-smoothing:antialiased; } button{font-family:var(--sans);cursor:pointer;} :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px;} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} } [hidden]{display:none!important;} .text-btn{ background:none;border:none;padding:0; color:var(--gold);font-size:13px;font-weight:600; } .text-btn:hover{text-decoration:underline;} /* ---------- Kopfzeile ---------- */ .topnav{ position:sticky;top:0;z-index:40;height:var(--kopf); display:flex;align-items:center;gap:24px;min-width:0; padding:0 var(--rand); background:color-mix(in srgb, var(--grund) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie-zart); } .brand{ display:flex;align-items:center;gap:11px;min-width:0; text-decoration:none;color:inherit;background:none;border:none;padding:0; } .brand-text{min-width:0;} .brand-word,.brand-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .brand-mark{width:40px;height:31px;flex-shrink:0;color:var(--tinte);} .brand-text{display:flex;flex-direction:column;} .brand-word{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:0.13em;line-height:1;} .brand-tag{font-size:8px;letter-spacing:0.2em;color:var(--gold);margin-top:4px;} .hauptnav{display:none;gap:2px;} .nav-btn{ background:none;border:none;padding:8px 14px;border-radius:6px; font-size:14px;font-weight:500;color:var(--tinte-weich); } .nav-btn:hover{background:var(--flaeche);color:var(--tinte);} .nav-btn.aktiv{color:var(--tinte);font-weight:600;background:var(--flaeche);} .topnav-stand{margin:0 0 0 auto;font-size:12.5px;color:var(--gedaempft);white-space:nowrap;} @media (min-width:760px){ .hauptnav{display:flex;} } /* ---------- Arbeitsfläche: eine Bildschirmhöhe ---------- Oben der Hero mit der Suche, darunter links die Auswahl und rechts die Zusagen. Beide Spalten scrollen für sich, die Seite selbst nicht — so bleibt die Auswahl sichtbar, während man rechts liest. */ #seite{width:100%;} @media (min-width:900px) and (min-height:620px){ #seite{ height:calc(100dvh - var(--kopf)); /* Hero, Bücherleiste, Arbeitsfläche, Fusszeile — nur die Arbeitsfläche darf wachsen und innen scrollen. */ display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden; } .arbeitsflaeche{ display:grid;grid-template-columns:minmax(280px, 1fr) 2fr; min-height:0;overflow:hidden; } .auswahl{border-right:1px solid var(--linie-zart);} .auswahl-inhalt,.anzeige-inhalt{overflow:auto;} .anzeige{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;} } .arbeitsflaeche{min-height:0;} .auswahl{min-width:0;min-height:0;display:flex;flex-direction:column;} .auswahl-inhalt{padding:18px var(--rand) 24px;display:flex;flex-direction:column;gap:22px;} .auswahl-block{min-width:0;} .block-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;} .block-titel{ font-family:var(--serif);font-weight:600;font-size:15px; margin:0 0 10px;color:var(--tinte); } .block-kopf .block-titel{margin:0;} .anzeige{min-width:0;min-height:0;display:flex;flex-direction:column;} .anzeige-kopf{ padding:14px var(--rand) 12px; border-bottom:1px solid var(--linie-zart); } .anzeige-zeile{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;} .anzeige-inhalt{padding:16px var(--rand) 28px;min-height:0;} /* ---------- Hero ---------- */ .hero{ position:relative;overflow:hidden; color:#fff; padding:clamp(20px,3.4vh,48px) var(--rand); display:flex;align-items:center; border-radius:0; } .hero svg.bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;} /* Über die volle Breite gleichmässiger abdunkeln: Der Text steht jetzt nicht mehr nur links, sondern zieht sich über den ganzen Hero. */ .hero::after{ content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(100deg, var(--hero-schleier) 0%, color-mix(in srgb, var(--hero-schleier) 82%, transparent) 45%, color-mix(in srgb, var(--hero-schleier) 58%, transparent) 75%, color-mix(in srgb, var(--hero-schleier) 45%, transparent) 100%); } .hero-content{position:relative;z-index:1;width:100%;} .hero h1{ font-family:var(--serif);font-weight:600; /* An der Breite bemessen, damit die Zeile auf jedem Schirm stehen bleibt statt umzubrechen. Erst unter 700px darf sie brechen. */ font-size:clamp(24px,4.2vw,52px);line-height:1.06; margin:0 0 8px;letter-spacing:-0.02em;white-space:nowrap; } .hero .sub{ font-size:clamp(14px,1.5vw,18px);line-height:1.45; color:rgba(255,255,255,0.88);margin:0 0 16px;white-space:nowrap; } @media (max-width:700px){ .hero h1,.hero .sub{white-space:normal;} .hero h1{font-size:clamp(24px,7vw,34px);} } .hero-search{ display:flex;align-items:center;gap:6px; background:#fff;border-radius:10px;padding:5px 5px 5px 16px; box-shadow:0 8px 28px rgba(0,0,0,0.3); width:100%; } .hero-search .such-icon{width:18px;height:18px;color:var(--gedaempft);flex-shrink:0;} .hero-search input{ flex:1;min-width:0;border:none;outline:none;background:none; font-family:var(--sans);font-size:15px;color:var(--tinte);padding:11px 4px; } .hero-search input::placeholder{color:var(--gedaempft);} .hero-search button{ background:var(--gold);color:#12151a;border:none;flex-shrink:0; padding:11px 22px;border-radius:7px;font-weight:600;font-size:14.5px; } .hero-search button:hover{filter:brightness(1.1);} .hero-schrift{ position:absolute;right:var(--rand);top:clamp(14px,2.4vh,26px);z-index:2; margin:0;text-align:right; font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(14px,1.5vw,18px);line-height:1.3; color:rgba(255,252,246,0.9);display:none; } @media (min-width:1000px){ .hero-schrift{display:block;} } /* ---------- Zwei Spalten: Themen und Zusage des Tages ---------- */ .start-raster{ display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,32px); padding:clamp(18px,2.6vh,30px) var(--rand); align-content:stretch;min-height:0; } @media (min-width:900px){ /* stretch, nicht start: sonst wächst die Themenspalte über ihre Zelle hinaus und schiebt sich unter die Fusszeile. */ .start-raster{grid-template-columns:1.15fr 1fr;align-items:stretch;} } @media (min-width:1500px){ .start-raster{grid-template-columns:1.6fr 1fr;} } .start-spalte{ min-width:0;min-height:0;display:flex;flex-direction:column;position:relative; } /* Die Spalte scrollt als Ganzes. Würde stattdessen jede Karte für sich scrollen, schnitte der Text mittendrin ab und der Knopf darunter wäre nicht mehr erreichbar. */ .start-spalte > .thema-raster, .start-spalte > .votd, .start-spalte > .hebraeisch{flex:0 0 auto;} .thema-raster{overflow:visible;} /* Weicher Auslauf am unteren Rand: zeigt an, dass die Themenliste weitergeht, statt eine Kachelzeile hart abzuschneiden. Nur dort, wo die Spalte tatsächlich begrenzt ist. */ @media (min-width:760px) and (min-height:640px){ .start-spalte::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:34px; background:linear-gradient(to top, var(--grund), transparent); pointer-events:none; } .start-spalte:last-child::after{display:none;} } .spalte-kopf{ display:flex;justify-content:space-between;align-items:baseline; gap:12px;margin-bottom:12px; } .section-title{ font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.9vw,21px); margin:0;color:var(--tinte);letter-spacing:-0.01em; } .section-lead{font-size:14px;line-height:1.55;color:var(--tinte-weich);margin:0 0 16px;} /* ---------- Themenliste ---------- Zeilen statt Kacheln: 34 Themen passen so ohne Scrollen in die Spalte. Der Balken unter dem Namen zeigt die Grösse, ohne eine Zeile zu kosten. */ .thema-liste{display:flex;flex-direction:column;gap:14px;min-width:0;} .thema-gruppe{min-width:0;} .gruppen-titel{ font-size:10.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase; color:var(--gedaempft);margin:0 0 5px; } .gruppen-zeilen{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px 8px; } .thema-zeile{ display:flex;align-items:baseline;justify-content:space-between;gap:8px; padding:5px 8px;border:none;border-radius:6px; background:none;color:var(--tinte-weich);text-align:left; font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.3; min-width:0;position:relative; } .thema-zeile::after{ content:"";position:absolute;left:8px;right:8px;bottom:2px;height:2px; border-radius:1px;background:var(--linie-zart); transform:scaleX(var(--anteil, 0));transform-origin:left; } .thema-zeile .zeile-name{ min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .thema-zeile .zeile-anzahl{ font-size:10.5px;font-weight:600;color:var(--gedaempft);flex-shrink:0; font-variant-numeric:tabular-nums; } .thema-zeile:hover{background:var(--flaeche);color:var(--tinte);} .thema-zeile.aktiv{ background:var(--gold-blass);color:var(--gold);font-weight:600; box-shadow:inset 0 0 0 1px var(--gold-hell); } .thema-zeile.aktiv .zeile-anzahl{color:var(--gold);} /* Umschalter für die Sortierung */ .sortier-schalter{display:flex;gap:2px;margin-bottom:12px;} .sortier-btn{ background:none;border:1px solid transparent;border-radius:6px; padding:4px 9px;font-size:11.5px;font-weight:500;color:var(--gedaempft); } .sortier-btn:hover{color:var(--tinte);} .sortier-btn.aktiv{color:var(--tinte);border-color:var(--linie);background:var(--flaeche);font-weight:600;} /* ---------- Zusage des Tages ---------- */ .votd{ background:var(--grund);border:1px solid var(--linie); border-radius:12px;padding:clamp(18px,2.2vw,26px); position:relative;flex:0 0 auto; } .votd-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;} .votd-marke{ font-size:11px;font-weight:600;letter-spacing:0.04em; color:var(--gold);background:var(--gold-blass); border:1px solid var(--gold-hell); padding:3px 10px;border-radius:999px; } .votd blockquote{ font-family:var(--serif);font-size:clamp(17px,1.9vw,22px);line-height:1.38; font-weight:500;margin:0 0 8px;color:var(--tinte); } .votd-ref{font-size:13px;color:var(--gedaempft);margin:0 0 14px;} .votd-schritt{ font-size:14px;line-height:1.55;color:var(--tinte-weich); margin:0 0 14px;padding-top:14px;border-top:1px solid var(--linie); } .votd-schritt b{color:var(--tinte);font-weight:600;} .votd-btn{ background:none;border:1px solid var(--gold-hell);color:var(--gold); padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600; } .votd-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--grund);} /* ---------- Trefferliste ---------- */ .suchleiste{margin-bottom:12px;} /* Suchfeld und Filter laufen über die ganze Breite, die Trefferkarten verteilen sich darunter in Spalten — sonst entstünden auf einem breiten Bildschirm Textzeilen, die niemand mehr am Stück liest. */ .suchleiste input{ width:100%;padding:13px 16px;font-size:15px;font-family:var(--sans); border:1px solid var(--linie);border-radius:10px; background:var(--grund);color:var(--tinte);outline:none; } .suchleiste input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-blass);} .aktiver-filter{ display:flex;justify-content:space-between;align-items:center;gap:14px; background:var(--gold-blass);border:1px solid var(--gold-hell); border-radius:9px;padding:9px 13px;margin-bottom:12px;font-size:13.5px; flex-wrap:wrap; } .filter-marken{display:flex;flex-wrap:wrap;gap:6px;} /* Jeder gesetzte Filter ist eine eigene Marke und einzeln abwählbar — vorher liess sich nur alles auf einmal zurücknehmen. */ .filter-marke{ display:inline-flex;align-items:center;gap:7px; background:var(--grund);border:1px solid var(--gold-hell); color:var(--tinte);padding:5px 10px;border-radius:7px; font-size:12.5px;font-weight:500; } .filter-marke span{color:var(--gedaempft);font-size:14px;line-height:1;} .filter-marke:hover{border-color:var(--rost);color:var(--rost);} .filter-marke:hover span{color:var(--rost);} #filterLoeschen{ font-size:13px;font-weight:600;background:none;border:none; color:var(--gold);text-decoration:underline;padding:0;white-space:nowrap; } .verfeinern{border:1px solid var(--linie);border-radius:10px;background:var(--grund);margin-bottom:16px;} .verfeinern summary{ padding:12px 15px;font-size:14px;font-weight:600;color:var(--tinte); cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px; } .verfeinern summary::-webkit-details-marker{display:none;} .verfeinern summary::before{ content:"";width:6px;height:6px;flex-shrink:0; border-right:2px solid var(--gold);border-bottom:2px solid var(--gold); transform:rotate(45deg) translateY(-2px); } .verfeinern[open] summary::before{transform:rotate(-135deg) translateY(-2px);} .verfeinern-inhalt{padding:0 15px 16px;} .feld-label{font-size:12.5px;font-weight:600;color:var(--tinte-weich);margin:14px 0 8px;} .verfeinern-inhalt > .feld-label:first-child{margin-top:2px;} .treffer-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;} .trefferzeile{font-size:13px;color:var(--gedaempft);margin:0;} .fav-filter{ display:inline-flex;align-items:center;gap:7px; border:1px solid var(--linie);background:var(--grund);color:var(--tinte-weich); padding:7px 13px;border-radius:8px;font-size:13px;font-weight:500; } .fav-filter:hover{border-color:var(--rost);color:var(--rost);} .fav-filter.aktiv{background:var(--rost-blass);border-color:var(--rost);color:var(--rost);font-weight:600;} .fav-filter.aktiv svg{fill:currentColor;} .fav-filter-zahl{font-size:11.5px;font-weight:600;opacity:0.75;} /* ---------- Zusagenkarte ---------- */ #ergebnisse,#favoritenListe{ display:grid;gap:9px; grid-template-columns:repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-items:start; } #ergebnisse .leer{grid-column:1 / -1;} .karte{ background:var(--grund);border:1px solid var(--linie); border-left:3px solid var(--gold);border-radius:10px; position:relative;overflow:hidden; } .karte.bedingt{border-left-style:dashed;border-left-color:var(--rost);} .karte.offen{border-color:var(--gold-hell);} .karte-auf{display:block;width:100%;text-align:left;background:none;border:none;padding:15px 50px 13px 18px;} .karte-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:7px;} .karte-thema{font-size:11.5px;font-weight:600;color:var(--gold);letter-spacing:0.02em;} .karte-ref{font-size:12.5px;color:var(--gedaempft);} .karte-text{display:block;font-family:var(--serif);font-size:17px;line-height:1.44;color:var(--tinte);margin-bottom:10px;} .karte-fuss{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .karte-art{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;} .karte-art.uncond{color:var(--gold);} .karte-art.cond{color:var(--rost);} .punkt{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block;} .punkt.uncond{background:var(--gold);} .punkt.cond{background:transparent;border:2px dashed var(--rost);} .karte-mehr{margin-left:auto;font-size:12.5px;color:var(--gedaempft);display:inline-flex;align-items:center;gap:5px;} .karte-mehr::after{ content:"";width:6px;height:6px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); } .karte.offen .karte-mehr::after{transform:rotate(-135deg) translate(-2px,-2px);} .karte-detail{ font-size:14px;line-height:1.6;color:var(--tinte-weich); padding:0 18px 16px;border-top:1px solid var(--linie-zart);margin:0 18px;padding-left:0;padding-right:0; } .karte-detail p{margin:11px 0 0;} .karte-detail b{color:var(--tinte);font-weight:600;} .karte-detail .weitere{font-size:12.5px;color:var(--gedaempft);} .pruef{padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:600;} .pruef.geprueft{background:color-mix(in srgb, #4c7a3a 16%, var(--grund));color:color-mix(in srgb, #4c7a3a 80%, var(--tinte));} .pruef.strittig{background:var(--rost-blass);color:var(--rost);} .fav-btn{ position:absolute;top:12px;right:12px;z-index:2; background:none;border:none;padding:6px;color:var(--gedaempft);line-height:0;border-radius:6px; } .fav-btn:hover,.fav-btn.aktiv{color:var(--rost);} .fav-btn.hell{position:static;color:var(--gedaempft);padding:2px;} .fav-btn.hell:hover,.fav-btn.hell.aktiv{color:var(--rost);} .mehr-zeile{display:flex;justify-content:center;margin:16px 0 8px;} #mehrBtn{ border:1px solid var(--linie);background:var(--grund);color:var(--tinte); padding:11px 24px;border-radius:9px;font-size:14px;font-weight:600; } #mehrBtn:hover{border-color:var(--gold);color:var(--gold);} #mehrBtn:disabled{opacity:0.5;cursor:default;} .leer{text-align:center;padding:44px 20px;color:var(--tinte-weich);font-size:15px;line-height:1.65;} .leer p{margin:0 0 8px;} .leer-btn{ margin-top:14px;border:1px solid var(--gold);background:none;color:var(--gold); padding:11px 20px;border-radius:9px;font-size:14px;font-weight:600; } .leer-btn:hover{background:var(--gold);color:var(--grund);} /* ---------- Fusszeile ---------- */ .appfoot{ padding:12px var(--rand) 14px; border-top:1px solid var(--linie-zart); } .appfoot .fineprint{ font-size:11.5px;color:var(--gedaempft);line-height:1.55;margin:0;text-align:center; } .appfoot .text-btn{font-size:11.5px;} /* ---------- Tableiste (nur schmale Schirme) ---------- */ .tabbar{ position:fixed;bottom:0;left:0;right:0;z-index:40; display:flex;justify-content:space-around;align-items:stretch; background:color-mix(in srgb, var(--grund) 96%, transparent);backdrop-filter:blur(10px); border-top:1px solid var(--linie); padding:6px 4px calc(8px + env(safe-area-inset-bottom)); } .tab-btn{ background:none;border:none;flex:1; display:flex;flex-direction:column;align-items:center;gap:3px; color:var(--gedaempft);font-size:10.5px;font-weight:500;padding:4px 2px; } .tab-btn.aktiv{color:var(--gold);} .tab-zahl{ display:inline-block;margin-left:5px;padding:0 5px;border-radius:999px; background:var(--rost);color:var(--grund);font-size:10px;font-weight:600;line-height:15px; } .tab-btn[data-tab="auswahl"] .tab-zahl{background:var(--gold);} @media (max-width:759px){ body{padding-bottom:64px;} :root{--kopf:56px;} /* Auf schmalen Schirmen weichen die Zahlen aus der Kopfzeile — sie stehen ohnehin über der Trefferliste. Der Umschalter bleibt sichtbar. */ .topnav{gap:12px;} .topnav-stand{display:none;} /* Der Hero erklärt das Konzept in drei Zeilen — auf dem Handy kostet das ein Fünftel der Fläche, bevor die erste Zusage kommt. Der Satz steht im Hinweis „Woher die Texte stammen"; hier reichen Titel und Suche. */ .hero .sub{display:none;} .hero h1{margin-bottom:14px;} /* Die Blätterleiste nennt den Stand bereits ("1 von 593") — die Trefferzeile daneben sagte dasselbe ein zweites Mal. */ .anzeige-zeile .trefferzeile{display:none;} /* Werkzeuge bleiben beim Scrollen erreichbar: Sonst muss man zum Weiterblättern jedes Mal nach oben. */ .anzeige-kopf{ position:sticky;top:var(--kopf);z-index:20; background:var(--grund); padding:10px var(--rand); } .anzeige-zeile{gap:8px;justify-content:space-between;} .anzeige-inhalt{padding-bottom:24px;} .hero{padding:24px var(--rand) 26px;min-height:0;} .hero h1{font-size:clamp(23px,6.4vw,31px);margin-bottom:8px;} .hero .sub{font-size:14px;margin-bottom:16px;} .hero-search{border-radius:9px;padding:4px 4px 4px 13px;} .hero-search input{font-size:16px;padding:10px 2px;} .hero-search button{padding:10px 16px;font-size:14px;} .start-raster{padding:20px var(--rand) 26px;gap:24px;} .spalte-kopf{margin-bottom:10px;} .appfoot{padding:14px var(--rand) 18px;} .zusagen-kopf{margin-bottom:12px;} #zusagen{padding:16px var(--rand) 0;} } @media (min-width:760px){ .tabbar{display:none;} } /* ---------- Hebräisches Grundwort ---------- Steht unter der Zusage des Tages und wechselt mit dem Thema. Der Zahlenwert ist gerechnet, die Bildlesung ausdrücklich als Deutung ausgewiesen — derselbe Umgang mit Unsicherheit wie bei den Zusagen. */ .hebraeisch{ margin-top:12px;padding:16px 18px; border:1px solid var(--linie);border-radius:12px;background:var(--grund); } .hebr-kopf{display:flex;align-items:center;gap:12px;margin-bottom:10px;} .hebr-wort{ font-size:30px;line-height:1;color:var(--tinte); font-family:'Frank Ruehl', 'Times New Roman', serif; } .hebr-namen{display:flex;flex-direction:column;gap:2px;min-width:0;} .hebr-umschrift{font-family:var(--serif);font-weight:600;font-size:16px;} .hebr-thema{font-size:11.5px;color:var(--gedaempft);} .hebr-zahl{ margin-left:auto;flex-shrink:0; font-size:15px;font-weight:600;color:var(--gold); background:var(--gold-blass);border:1px solid var(--gold-hell); padding:4px 11px;border-radius:999px; } .hebr-bedeutung{font-size:13.5px;line-height:1.55;color:var(--tinte-weich);margin:0 0 12px;} .hebr-buchstaben{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;} .hebr-zeichen{ display:flex;flex-direction:column;align-items:center;gap:1px; border:1px solid var(--linie-zart);border-radius:8px;padding:6px 9px;min-width:58px; background:var(--grund);box-shadow:var(--schatten-klein); } .hebr-zeichen .zeichen{font-size:19px;line-height:1.1;font-family:'Frank Ruehl','Times New Roman',serif;} .hebr-zeichen .zeichen-bild{font-size:9.5px;color:var(--tinte-weich);text-align:center;} .hebr-zeichen .zeichen-wert{font-size:9.5px;color:var(--gold);font-weight:600;} .hebr-bild{font-size:12.5px;line-height:1.55;color:var(--tinte-weich);margin:0 0 8px;} .hebr-bild b{color:var(--tinte);} .hebr-beleg{font-size:11.5px;color:var(--gedaempft);margin:0;} /* ---------- Umschalter der Darstellung ---------- */ .treffer-werkzeug{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .ansicht-schalter{display:flex;gap:2px;background:var(--grund);border:1px solid var(--linie);border-radius:8px;padding:2px;} .ansicht-btn{ display:inline-flex;align-items:center;gap:6px; background:none;border:none;border-radius:6px;padding:6px 11px; font-size:12.5px;font-weight:500;color:var(--tinte-weich); } .ansicht-btn.aktiv{background:var(--tinte);color:var(--grund);font-weight:600;} /* ---------- Einzelansicht ---------- Eine Zusage nach der anderen: ruhiger als eine Wand aus Karten, und der eine Text bekommt den Raum, den er zum Lesen braucht. */ /* Die Pfeile stehen direkt neben der Karte, nicht am Bildschirmrand — sonst wandert der Blick bei jedem Blättern quer über die Fläche. */ /* Geblättert wird über die Leiste in der Kopfzeile, nicht über Pfeile neben der Karte: Dort sässen sie je nach Textlänge mal höher, mal tiefer, und auf schmalen Schirmen drückten sie die Karte zusammen. Oben stehen sie immer an derselben Stelle. */ .blaetter-leiste{display:flex;align-items:center;gap:8px;} .blaettern{ width:32px;height:32px;flex-shrink:0; display:flex;align-items:center;justify-content:center; border:1px solid var(--linie);border-radius:8px; background:var(--grund);color:var(--tinte); } .blaettern:hover:not(:disabled){border-color:var(--gold);color:var(--gold);} .blaettern:disabled{opacity:0.35;cursor:default;} .einzel-stand{ margin:0;font-size:12.5px;color:var(--gedaempft); min-width:82px;text-align:center;font-variant-numeric:tabular-nums; } .einzeln{display:block;} .einzel-buehne{max-width:820px;margin:0 auto;} /* ---------- Die einzelne Zusage ---------- Klare Stufen: oben die Stelle und die Einordnung als Marken, darunter der Zusagentext als das Grösste auf der Karte, dann die Felder als Definitions- liste, zuunterst das Grundwort in eigener Fläche. */ .zusage{ position:relative; background:var(--erhoben); border:1px solid var(--linie);border-radius:16px; box-shadow:var(--schatten-gross); padding:clamp(22px,2.4vw,34px); width:100%;overflow:hidden; } .zusage::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--gold); } .zusage.bedingt::before{ background:repeating-linear-gradient(to bottom, var(--rost) 0 7px, transparent 7px 13px); } .zusage-kopf{margin-bottom:18px;} .kopf-oben{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:11px;} .zusage .stelle{ font-family:var(--serif);font-weight:600;font-size:15px; color:var(--tinte);letter-spacing:0.01em; } .zusage .fav-btn{position:static;padding:2px;margin:-2px -2px 0 0;} .kopf-marken{display:flex;flex-wrap:wrap;gap:6px;} .marke{ display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:600;letter-spacing:0.01em; padding:4px 10px;border-radius:999px;border:1px solid transparent; } .marke.art.uncond{color:var(--gold);background:var(--gold-blass);border-color:var(--gold-hell);} .marke.art.cond{color:var(--rost);background:var(--rost-blass);border-color:color-mix(in srgb, var(--rost) 35%, transparent);} .marke.thema{color:var(--tinte-weich);background:var(--flaeche);border-color:var(--linie);} .marke.tages{color:var(--gold);background:var(--gold-blass);border-color:var(--gold-hell);} .marke.strittig{color:var(--rost);background:var(--rost-blass);border-color:color-mix(in srgb, var(--rost) 30%, transparent);} .zusage-text{ font-family:var(--serif);font-weight:500; font-size:clamp(20px,2.1vw,29px);line-height:1.34;letter-spacing:-0.01em; color:var(--tinte);margin:0 0 22px; } .zusage-felder{margin:0;padding:20px 0 0;border-top:1px solid var(--linie-zart);} .zusage-felder .feld{display:grid;grid-template-columns:1fr;gap:3px;margin-bottom:14px;} .zusage-felder .feld:last-child{margin-bottom:0;} .zusage-felder dt{ font-size:10.5px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase; color:var(--gedaempft); } .zusage-felder dd{margin:0;font-size:15px;line-height:1.6;color:var(--tinte-weich);} .zusage-felder .feld.leise dd{font-size:13.5px;} @media (min-width:720px){ .zusage-felder .feld{grid-template-columns:130px 1fr;gap:16px;align-items:baseline;} .zusage-felder dt{padding-top:2px;} } /* ---------- Hinweis zu Herkunft und Einordnung ---------- */ #hinweisDialog{ border:none;border-radius:14px;padding:0;background:var(--grund);color:var(--tinte); max-width:640px;width:calc(100% - 32px); } #hinweisDialog::backdrop{background:rgba(0,0,0,0.55);} .dialog-inhalt{padding:28px 30px 24px;} .dialog-inhalt h2{font-family:var(--serif);font-size:22px;margin:0 0 6px;} .dialog-inhalt h3{ font-family:var(--serif);font-size:16px;margin:22px 0 6px;color:var(--tinte); } .dialog-inhalt p{font-size:14px;line-height:1.65;color:var(--tinte-weich);margin:0 0 10px;} .dialog-inhalt b{color:var(--tinte);font-weight:600;} .dialog-schliessen{ margin-top:20px;width:100%; background:var(--tinte);color:var(--grund);border:none; padding:12px;border-radius:9px;font-size:14.5px;font-weight:600; } .dialog-schliessen:hover{filter:brightness(1.25);} /* ---------- Grundwort in der Zusage ---------- Steht unter Bedingung und Schritt: erst was die Zusage sagt und was sie von dir will, dann das Wort dahinter. */ .grundwort{ margin-top:22px;padding:16px 18px; background:var(--flaeche);border:1px solid var(--linie-zart);border-radius:12px; } .grundwort-kopf{display:flex;align-items:center;gap:11px;margin-bottom:8px;} .grundwort.knapp{margin-top:12px;padding-top:11px;} .grundwort.knapp .hebr-wort{font-size:23px;} .grundwort.knapp .hebr-bedeutung{font-size:12.5px;} .grundwort.knapp .hebr-bild{font-size:11.5px;} .hebraeisch .grundwort{margin-top:0;padding-top:0;border-top:none;} /* ---------- Gewähltes Thema ---------- */ /* Die Auswahl steht dauerhaft links: das Raster braucht mehr Spalten, je breiter die Spalte ist, und darf nach unten weiterlaufen. */ @media (min-width:1400px){ .gruppen-zeilen{grid-template-columns:repeat(3,minmax(0,1fr));} } /* Die Lebenslagen sind ganze Sätze — sie brauchen mehr Breite als ein einzelnes Themenwort, sonst bleibt von "Ich weiss nicht weiter" nur "Ich weiss nic…" übrig. */ .lagen-zeilen{grid-template-columns:1fr;} @media (min-width:1150px){ .lagen-zeilen{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (min-width:1400px){ .lagen-zeilen{grid-template-columns:repeat(2,minmax(0,1fr));} } /* Marke für die Zusage des Tages */ .einzel-kopf .kopf-links{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;} .tages-marke{ font-size:10.5px;font-weight:600;letter-spacing:0.03em; color:var(--gold);background:var(--gold-blass); border:1px solid var(--gold-hell);padding:3px 9px;border-radius:999px; } .nur-handy{display:none;} /* Auf dem Handy übernimmt die Tableiste unten den Favoritenfilter — in der Werkzeugleiste wäre er doppelt und drängte sie in eine zweite Zeile. */ @media (max-width:640px){ .nur-breit{display:none;} } /* Handy und schmale Fenster: alles untereinander — aber die Zusagen zuerst. Andernfalls müsste man an allen 34 Themen vorbeiscrollen, bevor die erste Zusage kommt. Ein Knopf in der Werkzeugleiste führt zur Auswahl. */ @media (max-width:899px), (max-height:619px){ .nur-handy{display:inline-flex;} .arbeitsflaeche{display:flex;flex-direction:column;} .anzeige{order:1;} .auswahl{order:2;border-right:none;border-top:1px solid var(--linie-zart);} .auswahl-inhalt{scroll-margin-top:70px;} .auswahl-inhalt{padding:18px var(--rand) 22px;gap:20px;} .anzeige-kopf{padding:14px var(--rand) 12px;} .anzeige-inhalt{padding:16px var(--rand) 30px;} } /* Auf niedrigen Bildschirmen weicht der Hero, damit die Zusagen Platz behalten — die Suche bleibt, der Zierrat geht. */ @media (min-width:900px) and (max-height:820px){ .hero{padding:16px var(--rand) 18px;} .hero h1{font-size:clamp(22px,2.9vw,34px);margin-bottom:5px;} .hero .sub{font-size:13.5px;margin-bottom:12px;} .hero-schrift{display:none;} } /* ---------- Umschalter hell / dunkel ---------- */ .topnav-rechts{display:flex;align-items:center;gap:14px;margin-left:auto;min-width:0;flex-shrink:0;} .topnav-stand{margin:0;overflow:hidden;text-overflow:ellipsis;} .thema-schalter{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;flex-shrink:0; border:1px solid var(--linie);border-radius:9px; background:var(--grund);color:var(--tinte-weich); } .thema-schalter:hover{border-color:var(--gold);color:var(--gold);} .thema-schalter .ikon-mond{display:none;} :root[data-thema="dunkel"] .thema-schalter .ikon-sonne{display:none;} :root[data-thema="dunkel"] .thema-schalter .ikon-mond{display:block;} @media (prefers-color-scheme: dark){ :root:not([data-thema="hell"]) .thema-schalter .ikon-sonne{display:none;} :root:not([data-thema="hell"]) .thema-schalter .ikon-mond{display:block;} } /* Auf schmalen Schirmen bekommt die Karte die volle Breite. */ @media (max-width:680px){ .zusage{padding:20px 18px;border-radius:13px;} .zusage-text{font-size:20px;} .grundwort{padding:14px 15px;} .anzeige-zeile{gap:10px;} .einzel-stand{min-width:70px;font-size:12px;} } /* Art der Zusage: untereinander, sonst würden die Beschriftungen abgeschnitten. */ .gruppen-zeilen.zwei-spalten{grid-template-columns:1fr;} @media (min-width:620px){ .gruppen-zeilen.zwei-spalten{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (min-width:900px){ .auswahl .gruppen-zeilen.zwei-spalten{grid-template-columns:1fr;} } .block-hinweis{font-size:12px;color:var(--gedaempft);margin:0;line-height:1.5;} /* ---------- Bibelbücher über die volle Breite ---------- Steht als eigene Leiste unter dem Hero, nicht in der schmalen Spalte: 64 Bücher brauchen Platz, und die Wahl eines Buchs ist ein Einstieg für sich, nicht ein Filter unter vielen. */ .buchleiste{border-bottom:1px solid var(--linie-zart);background:var(--grund);} .buchleiste-kopf{ display:flex;align-items:center;gap:12px;width:100%; padding:11px var(--rand);border:none;background:none;color:var(--tinte); text-align:left; } .buchleiste-kopf:hover{background:var(--flaeche);} .buchleiste-titel{font-family:var(--serif);font-weight:600;font-size:14.5px;} .buchleiste-stand{ font-size:12.5px;color:var(--gold);font-weight:600; background:var(--gold-blass);border:1px solid var(--gold-hell); padding:2px 10px;border-radius:999px; } .buchleiste-pfeil{ margin-left:auto;width:7px;height:7px;flex-shrink:0; border-right:2px solid var(--gedaempft);border-bottom:2px solid var(--gedaempft); transform:rotate(45deg) translateY(-2px); } .buchleiste-kopf.offen .buchleiste-pfeil{transform:rotate(-135deg) translateY(-2px);} .buchliste{ padding:4px var(--rand) 16px; display:grid;gap:16px; border-top:1px solid var(--linie-zart); } @media (min-width:900px){ .buchliste{grid-template-columns:2fr 1fr;gap:26px;} } .buch-zeilen{ display:grid;gap:1px 8px; grid-template-columns:repeat(auto-fill, minmax(min(140px, 100%), 1fr)); } /* ---------- Wortlaut und Kurzfassung ---------- Steht ein echter Bibeltext zur Verfügung, ist er der Haupttext und trägt seine Quelle. Die eigene Kurzfassung bleibt daneben stehen — so ist jederzeit erkennbar, was Zitat ist und was Zusammenfassung. */ .zusage .quelle{ font-size:11.5px;color:var(--gedaempft);margin:-12px 0 16px; letter-spacing:0.02em; } .zusage .quelle.leise{font-style:italic;} .zusage .kurzfassung{ font-size:14.5px;line-height:1.6;color:var(--tinte-weich); margin:0 0 20px;padding-left:14px;border-left:2px solid var(--linie); } .zusage .kurzfassung span{ display:block;font-size:10.5px;font-weight:600;letter-spacing:0.07em; text-transform:uppercase;color:var(--gedaempft);margin-bottom:3px; } /* Griechische Zeichen tragen keine Bilddeutung — die Kästchen dürfen entsprechend schmaler sein. */ .hebr-buchstaben.schmal .hebr-zeichen{min-width:42px;} .hebr-bild.leise{font-style:italic;color:var(--gedaempft);} /* ---------- Auswahl als Panel (nur schmale Schirme) ---------- Auf dem Desktop steht die Auswahl in ihrer Spalte und alles ist gleichzeitig sichtbar. Auf dem Handy wäre das eine sehr lange Liste; dort wird daraus ein Panel mit Reitern, das über „Auswahl" aufgeht. */ .panel-kopf,.panel-reiter,.panel-fuss{display:none;} @media (max-width:899px), (max-height:619px){ .auswahl{ position:fixed;inset:0;z-index:60; background:var(--grund); display:flex;flex-direction:column; transform:translateY(100%); transition:transform .22s ease; border:none; } .auswahl.offen{transform:none;} body.panel-offen{overflow:hidden;} .panel-kopf{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px var(--rand) 10px; border-bottom:1px solid var(--linie-zart); } .panel-titel{font-family:var(--serif);font-weight:600;font-size:18px;margin:0;} .panel-schliessen{ width:34px;height:34px;flex-shrink:0; display:flex;align-items:center;justify-content:center; border:1px solid var(--linie);border-radius:9px; background:var(--grund);color:var(--tinte);font-size:15px;line-height:1; } .panel-reiter{ display:flex;gap:2px;padding:10px var(--rand); border-bottom:1px solid var(--linie-zart); } .reiter{ flex:1;background:none;border:1px solid transparent;border-radius:8px; padding:9px 6px;font-size:13.5px;font-weight:500;color:var(--tinte-weich); } .reiter.aktiv{background:var(--tinte);color:var(--grund);font-weight:600;} /* Nur der Bereich des aktiven Reiters ist sichtbar. */ .auswahl-block[data-bereich]{display:none;} .auswahl-block[data-bereich].aktiv-bereich{display:block;} .auswahl-inhalt{flex:1;min-height:0;overflow:auto;padding:16px var(--rand) 20px;} .panel-fuss{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px var(--rand) calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--linie);background:var(--grund); } .panel-stand{font-size:13px;color:var(--gedaempft);} .panel-anzeigen{ background:var(--tinte);color:var(--grund);border:none; padding:11px 20px;border-radius:9px;font-size:14.5px;font-weight:600; } /* Die Tableiste liegt unter dem Panel. */ body.panel-offen .tabbar{display:none;} } /* Im Panel klappt die Bücherliste gleich auf — der Reiter ist die Auswahl. */ @media (max-width:899px), (max-height:619px){ .buchleiste.auswahl-block{border:none;background:none;} .buchleiste.auswahl-block .buchleiste-kopf{padding:0 0 10px;} .buchleiste.auswahl-block .buchliste{padding:0;border-top:none;} } /* Weg zur Zusage des Tages — sie liegt irgendwo in der Liste, und die Einzelansicht beginnt bewusst bei der ersten Stelle der Bibel. */ .tages-btn{ display:inline-flex;align-items:center;gap:6px;flex-shrink:0; border:1px solid var(--linie);background:var(--grund);color:var(--tinte-weich); padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:500; } .tages-btn:hover{border-color:var(--gold);color:var(--gold);} /* Im Raster fehlt die Blätterleiste — dort nennt die Trefferzeile die Zahl. */ @media (max-width:759px){ body.raster-ansicht .anzeige-zeile .trefferzeile{display:block;} } /* ---------- Werkzeuge in einer Zeile ---------- Auf schmalen Schirmen tragen die Umschalter nur ihr Symbol: Mit Text brauchten Blättern und Darstellung zwei Zeilen und schoben die erste Zusage nach unten. Die Beschriftung bleibt als Vorlesetext erhalten. */ @media (max-width:479px){ .ansicht-btn span, .ansicht-btn{font-size:0;} .ansicht-btn svg{font-size:15px;} .ansicht-btn{padding:7px 10px;gap:0;} /* "Heute" behält seine Beschriftung: Ein Sonnensymbol allein sagt nicht, dass dahinter die Zusage des Tages liegt. Listen- und Rastersymbol dagegen sind bekannt genug. */ .tages-btn{padding:6px 10px;font-size:12px;} .einzel-stand{min-width:64px;font-size:11.5px;} .blaetter-leiste{gap:5px;} .anzeige-zeile{flex-wrap:nowrap;} .treffer-werkzeug{flex-shrink:0;} } /* ---------- Auswahl oben, Suche unten (nur Handy) ---------- Auf dem Handy stand die Auswahl hinter einem Knopf ganz unten und ging dort unter. Jetzt liegen die vier Bereiche offen sichtbar unter dem Hero, und die Suche wandert in den Daumenbereich am unteren Rand. */ .schnellwahl{display:none;} .suchleiste-unten{display:none;} @media (max-width:899px), (max-height:619px){ .schnellwahl{ display:grid;grid-template-columns:repeat(4,1fr);gap:6px; padding:10px var(--rand); border-bottom:1px solid var(--linie-zart); background:var(--grund); } .schnell-btn{ border:1px solid var(--linie);background:var(--grund);color:var(--tinte); border-radius:9px;padding:9px 4px; font-size:13px;font-weight:500; } .schnell-btn:hover{border-color:var(--gold);} /* Ein gesetzter Filter ist am Reiter selbst zu sehen. */ .schnell-btn.gesetzt{ background:var(--gold-blass);border-color:var(--gold); color:var(--gold);font-weight:600; } /* Suche fest über der Tableiste, im Daumenbereich. */ .suchleiste-unten{ display:flex;align-items:center;gap:9px; position:fixed;left:0;right:0;z-index:41; bottom:calc(60px + env(safe-area-inset-bottom)); padding:8px var(--rand); background:var(--grund);border-top:1px solid var(--linie); } .suchleiste-unten .such-icon{width:17px;height:17px;color:var(--gedaempft);flex-shrink:0;} .suchleiste-unten input{ flex:1;min-width:0;border:none;outline:none;background:none; font-family:var(--sans);font-size:16px;color:var(--tinte);padding:8px 0; } .such-leeren{ flex-shrink:0;width:26px;height:26px;border:none;border-radius:50%; background:var(--flaeche);color:var(--tinte-weich);font-size:13px;line-height:1; } /* Platz für Suchleiste und Tableiste zusammen. */ body{padding-bottom:114px;} body.panel-offen .suchleiste-unten{display:none;} /* Die Suche im Hero ist damit doppelt — unten ist sie besser erreichbar. Ohne sie bleibt vom Hero ein schmales Band mit dem Sonnenaufgang. */ .hero-search{display:none;} .hero{padding:18px var(--rand) 20px;min-height:0;} .hero h1{font-size:clamp(20px,5.6vw,26px);margin:0;letter-spacing:-0.015em;} } /* ========================================================================== Smartphone: grössere Schrift, grössere Flächen, weniger Beiwerk -------------------------------------------------------------------------- Am Telefon liest man mit Armlänge Abstand und tippt mit dem Daumen. Was am Bildschirm elegant klein wirkt, ist dort zu klein zum Lesen und zu knapp zum Treffen. Berührungsflächen sind deshalb mindestens 44 px hoch, Fliesstext mindestens 16 px, und alles Zusätzliche tritt zurück. ========================================================================== */ @media (max-width:759px){ /* ---------- Blättern: die häufigste Geste, also die grösste Fläche ---------- */ .blaettern{width:48px;height:48px;border-radius:12px;} .blaettern svg{width:24px;height:24px;} .blaetter-leiste{gap:10px;} .einzel-stand{font-size:14px;min-width:86px;font-weight:500;} .tages-btn{padding:12px 14px;font-size:14px;border-radius:10px;} .ansicht-btn{padding:12px;min-width:48px;min-height:48px;justify-content:center;} .ansicht-btn svg{width:19px;height:19px;} .anzeige-kopf{padding:12px var(--rand);} .anzeige-zeile{gap:10px;} /* ---------- Die Zusage selbst ---------- */ .zusage{padding:22px 20px;border-radius:16px;} .zusage .stelle{font-size:17px;} .zusage-text{font-size:22px;line-height:1.4;margin-bottom:20px;} .zusage .quelle{font-size:12.5px;margin:-14px 0 20px;} .marke{font-size:12.5px;padding:6px 12px;} .kopf-marken{gap:7px;} .zusage-felder{padding-top:20px;} .zusage-felder .feld{margin-bottom:18px;} .zusage-felder dt{font-size:12px;letter-spacing:0.06em;} .zusage-felder dd{font-size:16.5px;line-height:1.6;} .zusage-felder .feld.leise dd{font-size:15px;} /* ---------- Grundwort: Kern sofort, Buchstabentafel auf Wunsch ---------- */ .grundwort{padding:16px 16px 14px;margin-top:20px;} .hebr-wort{font-size:34px;} .hebr-umschrift{font-size:17px;} .hebr-thema{font-size:12.5px;} .hebr-zahl{font-size:16px;padding:5px 13px;} .hebr-bedeutung{font-size:15px;line-height:1.6;} .hebr-bild{font-size:13.5px;line-height:1.6;} .hebr-buchstaben{gap:8px;} .hebr-zeichen{min-width:66px;padding:8px 10px;} .hebr-zeichen .zeichen{font-size:23px;} .hebr-zeichen .zeichen-bild{font-size:11px;} .hebr-zeichen .zeichen-wert{font-size:11px;} /* ---------- Auswahl: Zeilen zum Antippen, nicht zum Zielen ---------- */ .schnellwahl{padding:12px var(--rand);gap:8px;} .schnell-btn{padding:14px 6px;font-size:15px;border-radius:11px;} .thema-zeile{padding:12px 12px;font-size:15px;border-radius:9px;min-height:46px;} .thema-zeile .zeile-anzahl{font-size:13px;} .thema-zeile::after{bottom:5px;height:2px;} .gruppen-zeilen{grid-template-columns:1fr;gap:3px;} .gruppen-titel{font-size:12px;letter-spacing:0.07em;margin-bottom:7px;} .thema-liste{gap:20px;} .block-titel{font-size:17px;} .sortier-btn{padding:9px 13px;font-size:13.5px;min-height:40px;} /* ---------- Panel ---------- */ .panel-titel{font-size:21px;} .panel-schliessen{width:44px;height:44px;font-size:17px;} .reiter{padding:13px 6px;font-size:15px;min-height:46px;} .panel-anzeigen{padding:14px 22px;font-size:16px;} .panel-stand{font-size:14.5px;} .panel-kopf{padding:16px var(--rand) 12px;} /* ---------- Suche und Tableiste ---------- */ .suchleiste-unten{padding:10px var(--rand);} .suchleiste-unten input{font-size:16.5px;padding:11px 0;} .suchleiste-unten .such-icon{width:19px;height:19px;} .such-leeren{width:32px;height:32px;font-size:15px;} .tab-btn{font-size:12px;padding:6px 2px;gap:4px;} .tab-btn svg{width:22px;height:22px;} /* ---------- Kopfzeile und Bücherleiste ---------- */ .brand-word{font-size:17px;} .brand-tag{font-size:8.5px;} .thema-schalter{width:44px;height:44px;} .buchleiste-kopf{padding:14px var(--rand);} .buchleiste-titel{font-size:16px;} .buchleiste-stand{font-size:13.5px;padding:4px 12px;} /* ---------- Rasteransicht ---------- */ .karte-auf{padding:18px 52px 16px 18px;} .karte-text{font-size:19px;} .karte-thema,.karte-ref{font-size:13.5px;} .karte-art,.karte-mehr{font-size:13.5px;} .fav-btn{padding:10px;top:8px;right:8px;} .fav-btn svg{width:22px;height:22px;} } /* Die Buchstabentafel steht offen, wo Platz ist, und klappt auf dem Handy zusammen — dort ist sie Detail, nicht Hauptsache. */ .buchstaben-auf > summary{display:none;} .buchstaben-auf{margin-bottom:10px;} @media (max-width:759px){ .buchstaben-auf > summary{ display:block;cursor:pointer;list-style:none; padding:10px 0;font-size:13.5px;font-weight:600;color:var(--gold); } .buchstaben-auf > summary::-webkit-details-marker{display:none;} .buchstaben-auf:not([open]) > summary::after{content:" ▾";} .buchstaben-auf[open] > summary::after{content:" ▴";} } /* Auf dem Telefon nur die Einzelansicht — siehe darstellungSetzen(). */ @media (max-width:759px){ .ansicht-schalter{display:none;} .anzeige-zeile{justify-content:center;} .blaetter-leiste{flex:1;justify-content:space-between;max-width:420px;} } /* Der Kopf des Grundworts stapelt sich auf dem Handy: Nebeneinander quetschen sich hebräisches Wort, Erklärung und Zahlenwert auf 350 px. */ @media (max-width:759px){ .grundwort-kopf{ display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"wort umschrift zahl" "beschreibung beschreibung beschreibung"; align-items:center;gap:6px 12px; } .grundwort-kopf .hebr-wort{grid-area:wort;} .grundwort-kopf .hebr-zahl{grid-area:zahl;margin:0;} .hebr-namen{display:contents;} .hebr-umschrift{grid-area:umschrift;font-size:18px;} .hebr-thema{grid-area:beschreibung;font-size:13px;line-height:1.45;} } /* ---------- Spendenhinweis ---------- Steht dezent in der Fusszeile neben der Herkunftsangabe: sichtbar für den, der hinschaut, aber nichts, was sich vor die Zusagen schiebt. */ .spende-btn{margin-left:14px;} .spende-btn::before{content:"♥";margin-right:5px;color:var(--rost);} .spende-satz{ font-size:16px!important;color:var(--tinte)!important; padding:14px 16px;background:var(--gold-blass); border:1px solid var(--gold-hell);border-radius:10px; } #spendeDialog{ border:none;border-radius:14px;padding:0;background:var(--grund);color:var(--tinte); max-width:480px;width:calc(100% - 32px); } #spendeDialog::backdrop{background:rgba(0,0,0,0.55);} @media (max-width:759px){ .spende-btn{margin-left:0;display:inline-block;margin-top:6px;font-size:13px;} }