/* ── Instrument Sans – lokal (WOFF2/WOFF), einheitliche Hausschrift ── */ @font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2'), url('fonts/instrument-sans-latin-400-normal.woff') format('woff'); } @font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2'), url('fonts/instrument-sans-latin-500-normal.woff') format('woff'); } @font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/instrument-sans-latin-600-normal.woff2') format('woff2'), url('fonts/instrument-sans-latin-600-normal.woff') format('woff'); } @font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/instrument-sans-latin-700-normal.woff2') format('woff2'), url('fonts/instrument-sans-latin-700-normal.woff') format('woff'); } .app-embed *, .app-embed *::before, .app-embed *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ══════════════════════════════════════════════════════════════════════ FARBEN (Paket 190) Bis hierher standen 166 feste Farbwerte im Blatt und 114 in style-Attributen des Markups. Beides zusammen hiess: Es gab keine dunkle Fassung, und im dunklen Design der Webseite stand der Umzugsservice als helle Insel darin – mit vier Kacheltiteln bei 1,13:1, also unlesbar. Die Titel bezogen ihre Schriftfarbe aus dem Thema (var(--ink)), ihre Flaeche war fest #fff. Jetzt traegt jede Farbe einen Namen. Die helle Fassung steht hier, die dunkle im Block darunter; beide Fassungen sind derselbe Satz Namen mit anderen Werten. Jeder dunkle Wert ist gegen die Flaeche gerechnet, auf der er steht – nicht gegen den Seitengrund. Das ist der Unterschied, an dem die Kacheltitel gescheitert sind. ══════════════════════════════════════════════════════════════════════ */ .app-embed { --u-grund: #f6f8f7; /* Grund des Bereichs */ --u-flaeche: #ffffff; /* Karten, Formularfeld-Panel */ --u-flaeche-2: #f9f8f6; /* Zweitflaeche: Hover, ruhende Kaesten */ --u-feld: #f6f8f7; /* Eingabefeld */ --u-ink: #1a1f1c; --u-ink-soft: #47514b; /* Kacheltitel und -text sind die beiden einzigen Stellen des Moduls, die je die Schriftfarbe des SEITENTHEMAS trugen (var(--ink)). Genau daran sind sie im dunklen Design gescheitert: Schrift aus dem Thema, Flaeche fest #fff – 1,13:1. Hell bleibt es bei den bisherigen Werten, damit sich nichts verschiebt; dunkel setzt der Block unten sie fest. */ --u-ink-kachel: var(--ink, #1a1f1c); --u-ink-kachel-soft: var(--ink-soft, #47514b); /* 4,53:1 auf --u-grund. Vorher #6b756f mit 4,48:1 – knapp unter der Schwelle, mit blossem Auge nicht zu unterscheiden. (Paket 190) */ --u-muted: #6b746e; --u-linie: rgba(0,0,0,.10); /* Die Kachel trug seit jeher den Rahmen des Seitenthemas, nicht die Haarlinie der uebrigen Kaesten. Bleibt so. */ --u-linie-karte: var(--line, #dbe3de); --u-linie-mittel: rgba(0,0,0,.15); /* Ja/Nein-Schalter, Schliessen */ --u-linie-stark: rgba(0,0,0,.18); /* Feldrahmen, Knopfrahmen */ --u-linie-panel: rgba(0,0,0,.12); /* Rahmen des Formularkastens */ --u-linie-kraeftig: rgba(0,0,0,.35); /* gewaehlter Schalter */ /* Wie beim Kachelrahmen: Der Schatten kam bisher aus dem Seitenthema. Der Rueckfallwert gilt nur, wenn keines gesetzt ist. */ --u-schatten: var(--shadow, 0 2px 14px rgba(16,58,36,.08)); --u-schatten-hover: 0 10px 28px rgba(16,58,36,.14); --u-fehler: #c0392b; --u-fokus: #1c5e3b; --u-fokus-hof: rgba(28,94,59,.12); --u-fokus-flaeche: #1c5e3b; /* Sprungmarke */ --u-fokus-schrift: #ffffff; --u-marke: #1c5e3b; /* Auszeichnung ueber der Ueberschrift */ --u-marke-flaeche: #e5efe9; --u-warn-fl: #FEF3C7; --u-warn-txt: #92400E; --u-warn-rand: #FDE68A; } /* Rubrikfarben hell – Reihenfolge: Auszug, Mieterwechsel-Vorgang, Umzug, Einzug. Die Klassen .c1–.c4 und .fp-* bezeichnen dieselben vier Welten an Kachel bzw. Formular. */ .app-embed .c1, .app-embed .fp-blue { --rub:#1c5e3b; --rub-fl:#e5efe9; --rub-txt:#1c5e3b; --rub-chip:#14472c; --rub-rand:#c0dd97; --rub-tief:#14472c; --rub-hof:rgba(28,94,59,.18); --rub-btn-schrift:#ffffff; } .app-embed .c2, .app-embed .fp-green { --rub:#3B6D11; --rub-fl:#EAF3DE; --rub-txt:#3B6D11; --rub-chip:#27500A; --rub-rand:#C0DD97; --rub-tief:#27500A; --rub-hof:rgba(59,109,17,.18); --rub-btn-schrift:#ffffff; } .app-embed .c3, .app-embed .fp-amber { --rub:#854F0B; --rub-fl:#FAEEDA; --rub-txt:#854F0B; --rub-chip:#633806; --rub-rand:#FAC775; --rub-tief:#633806; --rub-hof:rgba(133,79,11,.18); --rub-btn-schrift:#ffffff; } .app-embed .c4, .app-embed .fp-teal { --rub:#0F6E56; --rub-fl:#E1F5EE; --rub-txt:#0F6E56; --rub-chip:#085041; --rub-rand:#9FE1CB; --rub-tief:#085041; --rub-hof:rgba(15,110,86,.15); --rub-btn-schrift:#ffffff; } /* Die Hinweiskaesten im Formular tragen dieselben vier Welten. */ .app-embed .hint-blue { --rub-fl:#e5efe9; --rub-chip:#14472c; } .app-embed .hint-green { --rub-fl:#EAF3DE; --rub-chip:#27500A; } .app-embed .hint-amber { --rub-fl:#FAEEDA; --rub-chip:#633806; } .app-embed .hint-teal { --rub-fl:#E1F5EE; --rub-chip:#085041; } /* Hinweiskarten hell */ .app-embed .hc-red { --hw:#dc2626; --hw-txt:#991b1b; } .app-embed .hc-amber { --hw:#d97706; --hw-txt:#92400e; } .app-embed .hc-blue { --hw:#1c5e3b; --hw-txt:#14472c; } .app-embed .hc-red2 { --hw:#be185d; --hw-txt:#9d174d; } .app-embed .hc-green { --hw:#3B6D11; --hw-txt:#27500A; } .app-embed .skip-link { position: absolute; top: -999px; left: 0; background: var(--u-fokus-flaeche); color: var(--u-fokus-schrift); padding: .5rem 1rem; font-size: .875rem; font-weight: 500; border-radius: 0 0 8px 0; text-decoration: none; z-index: 9999; } .app-embed .skip-link:focus { top: 0; } .app-embed *, .app-embed *::before, .app-embed *::after { box-sizing: border-box; } .app-embed { overflow-x: hidden; font-family: 'Instrument Sans', system-ui, sans-serif; background: var(--u-grund); color: var(--u-ink); min-height: 100vh; padding: 2.5rem 1rem 4rem; } /* ── Page header ── */ .app-embed .page-header { max-width: 860px; margin: 0 auto 2rem; } .app-embed .eyebrow { display: inline-block; font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--u-marke); background: var(--u-marke-flaeche); border-radius: 99px; padding: .25rem .75rem; margin-bottom: .75rem; } .app-embed h1 { font-size: clamp(1.6rem,4vw,2.2rem); font-weight: 500; line-height: 1.2; color: var(--u-ink); margin-bottom: .5rem; } .app-embed .page-sub { font-size: .95rem; color: var(--u-muted); max-width: 480px; } /* ── Tile grid ── */ .app-embed .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; max-width: 860px; margin: 0 auto; transition: opacity .2s; } .app-embed .grid.faded { opacity: .35; pointer-events: none; } /* ── Tile card ── */ .app-embed .card { background: var(--u-flaeche); border: 1px solid var(--u-linie-karte); border-radius: var(--radius, 12px); padding: 1.25rem; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .15s, transform .12s, box-shadow .12s; text-decoration: none; color: inherit; box-shadow: var(--u-schatten); } .app-embed .card:hover { border-color: var(--rub, var(--u-fokus)); transform: translateY(-3px); box-shadow: var(--u-schatten-hover); } .app-embed .card:focus-visible { outline: 2px solid var(--u-fokus); outline-offset: 3px; } .app-embed .card.active { border-color: var(--u-fokus); } .app-embed .card-accent { height: 3px; border-radius: 2px; margin-bottom: 2px; } .app-embed .card-head { display: flex; align-items: center; gap: 10px; } .app-embed .card-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-embed .card-icon svg { width: 22px; height: 22px; stroke-width: 1.6; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .app-embed .card-title { font-size: 16px; font-weight: 700; color: var(--u-ink-kachel); line-height: 1.3; } .app-embed .card-desc { font-size: 13.5px; color: var(--u-ink-kachel-soft); line-height: 1.55; } .app-embed .card-hint { font-size: 11px; color: var(--u-muted); line-height: 1.5; } .app-embed .tags { display: flex; flex-wrap: wrap; gap: 6px; } .app-embed .tag { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 8px; border: 0.5px solid transparent; } .app-embed .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .app-embed .cta { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 4px; } .app-embed .cta-arrow { font-size: 16px; line-height: 1; } /* ── Rubrikfarben ──────────────────────────────────────────────────────── Bis Paket 190 stand jeder der vier Farbwerte an sechs Stellen einzeln im Blatt. Jetzt trägt die Kachel (bzw. das Formularfeld) einen Satz Variablen, und die Regeln darunter kennen nur noch deren Namen. Eine zweite Fassung – hier die dunkle – setzt damit vier Blöcke um statt vierundzwanzig Deklarationen zu suchen. */ .app-embed .card-accent, .app-embed .form-panel-bar { background: var(--rub); } .app-embed .card-icon, .app-embed .form-panel-icon { background: var(--rub-fl); color: var(--rub-txt); } .app-embed .cta { color: var(--rub-txt); } .app-embed .tag { background: var(--rub-fl); color: var(--rub-chip); border-color: var(--rub-rand); } .app-embed .hint-box { background: var(--rub-fl); color: var(--rub-chip); } .app-embed .btn-submit { background: var(--rub); color: var(--rub-btn-schrift); } .app-embed .btn-submit:hover { background: var(--rub-tief); } .app-embed .card:focus-visible, .app-embed .mv-vorg-tile:focus-visible { outline-color: var(--rub, var(--u-fokus)); } .app-embed .card.active { border-color: var(--rub); box-shadow: 0 0 0 3px var(--rub-hof); } /* ── Form panel ── */ .app-embed .form-panel { display: none; max-width: 860px; margin: 1.5rem auto 0; background: var(--u-flaeche); border: 0.5px solid var(--u-linie-panel); border-radius: 16px; overflow: hidden; word-break: break-word; animation: slideIn .22s ease; } .app-embed .form-panel.visible { display: block; } @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .app-embed .form-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 0.5px solid var(--u-linie); } .app-embed .form-panel-title-wrap { display: flex; align-items: center; gap: 10px; } .app-embed .form-panel-icon { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-embed .form-panel-icon svg { width: 20px; height: 20px; stroke-width: 1.6; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .app-embed .form-panel-title { font-size: 16px; font-weight: 500; color: var(--u-ink); } .app-embed .form-panel-sub { font-size: 12px; color: var(--u-muted); margin-top: 1px; } .app-embed .btn-close { background: none; border: 0.5px solid var(--u-linie-stark); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--u-muted); font-size: 18px; line-height: 1; transition: background .12s; } .app-embed .btn-close:hover { background: var(--u-flaeche-2); } .app-embed .btn-close:focus-visible { outline: 2px solid var(--u-fokus); outline-offset: 2px; } /* colour bar under header */ .app-embed .form-panel-bar { height: 3px; } /* form body */ .app-embed .form-body { padding: 1.5rem; } /* hint box */ .app-embed .hint-box { border-radius: 8px; padding: .65rem .85rem; font-size: .8rem; line-height: 1.5; margin-bottom: 1.1rem; display: flex; gap: .5rem; align-items: flex-start; } .app-embed .hint-box .hi { font-size: .95rem; flex-shrink: 0; margin-top: .05rem; } .app-embed .hint-link { color: inherit; font-weight: 500; text-underline-offset: 2px; } /* section label */ .app-embed .section-label { font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--u-muted); margin: 1.1rem 0 .7rem; display: block; } .app-embed .section-label:first-child { margin-top: 0; } .app-embed hr.sep { border: none; border-top: 0.5px solid var(--u-linie); margin: 1.1rem 0; } /* Ja/Nein toggle buttons */ .app-embed .toggle-group { display: flex; gap: .4rem; } .app-embed .toggle-group input[type=radio] { display: none; } .app-embed .toggle-group label { font-size: .8rem; font-weight: 500; cursor: pointer; padding: .4rem .9rem; border-radius: 8px; border: 1.5px solid var(--u-linie-mittel); background: var(--u-feld); color: var(--u-muted); transition: background .12s, border-color .12s, color .12s; user-select: none; } .app-embed .toggle-group input[type=radio]:checked + label { background: var(--rub-fl, var(--u-flaeche)); color: var(--rub-txt, var(--u-ink)); border-color: var(--rub, var(--u-linie-kraeftig)); } /* fields */ .app-embed .field-group { display: flex; flex-direction: column; gap: .65rem; margin-bottom: .9rem; } .app-embed .field { display: flex; flex-direction: column; gap: .3rem; } .app-embed .field label { font-size: .8rem; font-weight: 500; color: var(--u-ink); } .app-embed .field input, .app-embed .field select, .app-embed .field textarea { font-family: inherit; font-size: .875rem; color: var(--u-ink); background: var(--u-feld); border: 0.5px solid var(--u-linie-stark); border-radius: 8px; padding: .55rem .75rem; width: 100%; transition: border-color .15s, box-shadow .15s; appearance: none; } .app-embed .field input:focus, .app-embed .field select:focus, .app-embed .field textarea:focus { outline: none; border-color: var(--u-fokus); box-shadow: 0 0 0 3px var(--u-fokus-hof); } .app-embed .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.2rem; } .app-embed .field textarea { resize: vertical; min-height: 72px; } .app-embed .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; } .app-embed .row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .65rem; } .app-embed .row-addr1 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: .65rem; } .app-embed .row-addr2 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .65rem; } /* ── Zähler-Reihe: Sparte / Zählernummer / MaLo / Zählerstand ── */ .app-embed .row-meter { display: grid; grid-template-columns: minmax(120px, 160px) 1fr minmax(80px, 120px) 1fr; gap: .65rem; align-items: start; } /* ── Zählerstand HT + NT nebeneinander ── */ .app-embed .row-stand-dt { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; } /* 4-spaltig: Übergabe / Sparte / Zählernummer / MaLo */ .app-embed .row-meter4 { display: grid; grid-template-columns: minmax(100px, 120px) 1fr 1fr 1fr; gap: .65rem; align-items: start; } /* 3-spaltig: Sparte / Zählernummer / Zählerstand */ .app-embed .row-meter3 { display: grid; grid-template-columns: minmax(120px, 160px) 1fr 1.5fr; gap: .65rem; align-items: start; } /* ── Responsive – Tablet (≤ 700px) ── */ @media (max-width: 700px) { .app-embed .page-header > div { flex-direction: column; align-items: flex-start; gap: .5rem; } .app-embed .page-header > div img { height: 36px; } .app-embed .grid { grid-template-columns: 1fr; } .app-embed .row3 { grid-template-columns: 1fr 1fr; } .app-embed .row-addr1 { grid-template-columns: 1fr 1fr; } .app-embed .row-meter { grid-template-columns: 1fr 1fr; } .app-embed .row-meter4 { grid-template-columns: 1fr 1fr; } .app-embed .row-meter3 { grid-template-columns: 1fr 1fr; } } /* ── Responsive – Mobil (≤ 480px) ── */ @media (max-width: 480px) { .app-embed { padding: .5rem; } .app-embed .page-header { margin-bottom: 1rem; } .app-embed .page-header h1 { font-size: 1.4rem; } .app-embed .form-panel { margin-top: .75rem; border-radius: 12px; } .app-embed .form-body { padding: 1rem; } .app-embed .form-footer { padding: .75rem 1rem 1rem; flex-direction: column; align-items: stretch; } .app-embed .btn-submit { width: 100%; justify-content: center; text-align: center; } .app-embed .row2, .app-embed .row3, .app-embed .row-addr1, .app-embed .row-addr2, .app-embed .row-meter, .app-embed .row-meter4, .app-embed .row-meter3, .app-embed .row-stand-dt { grid-template-columns: 1fr; } .app-embed .toggle-group { flex-direction: column; gap: .35rem; } .app-embed .toggle-group label { min-height: 44px; display: flex; align-items: center; justify-content: center; } .app-embed .field label { font-size: .8rem; } .app-embed .field input, .app-embed .field select, .app-embed .field textarea { font-size: 1rem; min-height: 44px; } .app-embed .hint-box { font-size: .8rem; } .app-embed .section-label { font-size: .7rem; } .app-embed .card { padding: 1rem; } .app-embed .card h2 { font-size: 1rem; } .app-embed .card-desc { font-size: .8rem; } .app-embed .skip-link:focus { font-size: .8rem; } } /* ── Print – nur aktives Panel drucken ── */ /* Druckansicht: am Bildschirm nie sichtbar (Overlay hängt an ) */ #print-overlay { display: none; } @media print { /* Seitenrahmen UND die App komplett ausblenden – das Overlay steht außerhalb. Wichtig: .app-embed muss weg, sonst bleibt sein min-height:100vh als leere erste Seite stehen. */ .site-header, .topbar, .page-hero, .breadcrumb, .site-footer, #cookie-banner, .cookie-banner, .app-embed { display: none !important; } /* Nur die strukturierte Druckansicht zeigen */ #print-overlay { display: block !important; } body { background: #fff !important; margin: 0 !important; padding: 0 !important; } @page { margin: 12mm; } } /* Print-Overlay im Bildschirm ausblenden */ /* ── Touch-Targets – min. 44×44px ── */ @media (hover: none) and (pointer: coarse) { .app-embed .card { min-height: 80px; } .app-embed .btn-submit { min-height: 48px; } .app-embed .radio-opt, .app-embed .check-opt { min-height: 44px; } .app-embed .toggle-group label { min-height: 44px; } .app-embed input[type="text"], .app-embed input[type="email"], .app-embed input[type="date"], .app-embed select { min-height: 44px; } } .app-embed .req { color: var(--u-fehler); margin-left: 2px; } /* radio / check */ .app-embed .radio-group { display: flex; flex-direction: column; gap: .45rem; } .app-embed .radio-opt, .app-embed .check-opt { display: flex; align-items: center; gap: .55rem; font-size: .875rem; cursor: pointer; } .app-embed .radio-opt input[type=radio], .app-embed .check-opt input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--u-fokus); cursor: pointer; flex-shrink: 0; } .app-embed .check-wrap { font-size: .8rem; color: var(--u-muted); margin-bottom: .9rem; } /* form footer */ .app-embed .form-footer { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.5rem 1.5rem; border-top: 0.5px solid var(--u-linie); } .app-embed .btn-submit { font-family: inherit; font-size: .875rem; font-weight: 500; color: var(--rub-btn-schrift, #fff); border: none; border-radius: 8px; padding: .6rem 1.25rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: background .15s, transform .1s; } .app-embed .btn-submit:hover { transform: translateY(-1px); } .app-embed .btn-submit:focus-visible { outline: 3px solid var(--u-fokus); outline-offset: 2px; } .app-embed .btn-reset { font-family: inherit; font-size: .875rem; color: var(--u-muted); background: none; border: 0.5px solid var(--u-linie-stark); border-radius: 8px; padding: .6rem 1rem; cursor: pointer; transition: background .12s; } .app-embed .btn-reset:hover { background: var(--u-flaeche-2); } /* Vorgang-Kacheln Mieterwechsel */ .app-embed .mv-vorg-tile { font-family: inherit; background: var(--u-flaeche); color: var(--u-ink); border: 1.5px solid var(--u-linie); border-radius: 10px; padding: .75rem .85rem; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, background .15s, box-shadow .15s; } .app-embed .mv-vorg-tile:hover { border-color: var(--u-linie-kraeftig); background: var(--u-flaeche-2); } .app-embed .mv-vorg-tile.selected { border-color: var(--rub); background: var(--rub-fl); box-shadow: 0 0 0 3px var(--rub-hof); } .app-embed .mv-vorg-tile:focus-visible { outline: 2px solid var(--rub, var(--u-fokus)); outline-offset: 2px; } .app-embed .mvt-icon { font-size: 1.2rem; } .app-embed .mvt-title { font-size: .85rem; font-weight: 500; color: var(--u-ink); line-height: 1.3; } .app-embed .mvt-sub { font-size: .72rem; color: var(--u-muted); line-height: 1.4; } .app-embed .hinweise { max-width: 860px; margin: 2.5rem auto 0; } .app-embed .hinweise-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; } .app-embed .hinweise-header-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--u-warn-fl); color: var(--u-warn-txt); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .app-embed .hinweise-title { font-size: 1rem; font-weight: 500; color: var(--u-ink); } .app-embed .hinweise-title span { display: block; font-size: .8rem; font-weight: 400; color: var(--u-muted); margin-top: 1px; } .app-embed .hinweis-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 599px) { .app-embed .hinweis-cards { grid-template-columns: 1fr; } } /* Base card */ .app-embed .hcard { background: var(--u-flaeche); border: 0.5px solid var(--u-linie); border-radius: 12px; overflow: hidden; } .app-embed .hcard-top { height: 3px; } .app-embed .hcard-body { padding: 1rem 1.1rem 1.1rem; } .app-embed .hcard-label { font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; display: block; } .app-embed .hcard-heading { font-size: .9rem; font-weight: 500; color: var(--u-ink); line-height: 1.35; margin-bottom: .55rem; } .app-embed .hcard-text { font-size: .8rem; color: var(--u-muted); line-height: 1.6; } .app-embed .hcard-text strong { font-weight: 500; color: var(--u-ink); } .app-embed .hcard-text em { font-style: normal; color: var(--u-ink); } /* ── Farbwelten der Hinweiskarten ─────────────────────────────────────── Wie bei den Rubriken: die Karte trägt die Werte, die Regeln kennen nur die Namen. Die dunklen Werte stehen im Block ganz unten. */ .app-embed .hcard-top { background: var(--hw); } .app-embed .hcard-label { color: var(--hw-txt); } /* Wide card that spans full row */ .app-embed .hcard-wide { grid-column: 1 / -1; } .app-embed .hcard-wide .hcard-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; } .app-embed .hcard-wide .hcard-heading { grid-column: 1 / -1; margin-bottom: .1rem; } @media (max-width: 560px) { .app-embed .hcard-wide .hcard-body { grid-template-columns: 1fr; } .app-embed .hcard-wide .hcard-heading { grid-column: 1; } } .app-embed .hcard-col-label { font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--u-muted); margin-bottom: .35rem; display: block; } /* Divider inside wide card */ .app-embed .hcard-wide .hcard-body > hr { grid-column: 1 / -1; border: none; border-top: 0.5px solid var(--u-linie); margin: 0; } /* Pill badge */ .app-embed .badge-new { display: inline-block; font-size: .65rem; font-weight: 500; background: var(--u-warn-fl); color: var(--u-warn-txt); border: 0.5px solid var(--u-warn-rand); border-radius: 99px; padding: .15rem .55rem; vertical-align: middle; margin-left: .4rem; } /* ══════════════════════════════════════════════════════════════════════ DUNKLE FASSUNG (Paket 190) Grund und Kartenflaeche stammen aus der dunklen Hausfassung (assets/css/design-2-netzleitstelle.css), damit hier keine dritte Farbwelt entsteht – der Fehler, der in Paket 182 schon einmal zu weissen Inseln gefuehrt hat. Karte gegen Grund misst 1,11:1. Auf dunklem Grund traegt kein Schlagschatten; die Karte hebt sich ueber ihre Helligkeit und ihren Rahmen ab. --u-schatten ist deshalb none. Zwei Werte, die nicht aus dem Haus uebernommen werden konnten: --u-linie-stark Das Haus-Token --line (#22423c) misst auf der Karte 1,47:1. Fuer die Umrandung eines Bedienelements verlangt WCAG 1.4.11 aber 3:1. #3c756a misst 3,03:1. Das ist der haeufigste Fehler dunkler Formulare: Die Felder sind da, aber man sieht nicht, wo sie aufhoeren. --u-fehler #c0392b misst auf der dunklen Karte 2,97:1. Genommen wird der Ton, der in Paket 183 fuer genau diesen Fall bestimmt wurde: #ff8a80, hier 7,08:1. ══════════════════════════════════════════════════════════════════════ */ :root[data-thema="dunkel"] .app-embed { --u-grund: #0d1917; --u-flaeche: #122421; --u-flaeche-2: #1a332e; --u-feld: #0b1614; /* dunkler als die Karte: das Feld liest als Mulde */ --u-ink: #eaf3ef; /* 14,28:1 auf der Karte */ --u-ink-soft: #a9c0ba; /* 8,41:1 */ --u-ink-kachel: #eaf3ef; --u-ink-kachel-soft: #a9c0ba; --u-muted: #7f9791; /* 5,18:1 – reicht auch fuer die 11-px-Zeilen */ --u-linie: #22423c; --u-linie-karte: #22423c; --u-linie-mittel: #3c756a; /* 3,03:1 – WCAG 1.4.11 */ --u-linie-stark: #3c756a; /* 3,03:1 – WCAG 1.4.11 */ --u-linie-panel: #22423c; --u-linie-kraeftig: #5f9a8e; /* 5,00:1 */ --u-schatten: none; --u-schatten-hover: none; --u-fehler: #ff8a80; /* 7,08:1 */ --u-fokus: #3ddc97; /* 9,14:1 auf der Karte, 10,43:1 im Feld */ --u-fokus-hof: rgba(61,220,151,.22); --u-fokus-flaeche: #3ddc97; --u-fokus-schrift: #08150f; --u-marke: #30a366; --u-marke-flaeche: #142e26; --u-warn-fl: #272c1d; --u-warn-txt: #d17c11; --u-warn-rand: #6b4a10; } /* Rubrikfarben dunkel. Jeder Ton ist aus dem hellen Gegenstueck aufgehellt, bis er auf der Kartenflaeche 4,5:1 erreicht – der Farbton bleibt, die vier Welten bleiben unterscheidbar. Die Knopfbeschriftung kehrt sich um: auf heller Flaeche steht dunkle Schrift (5,2:1). */ :root[data-thema="dunkel"] .app-embed .c1, :root[data-thema="dunkel"] .app-embed .fp-blue { --rub:#2e9a61; --rub-fl:#142e26; --rub-txt:#30a366; --rub-chip:#30a366; --rub-rand:#2e9a61; --rub-tief:#36b672; --rub-hof:rgba(46,154,97,.28); --rub-btn-schrift:#08150f; } :root[data-thema="dunkel"] .app-embed .c2, :root[data-thema="dunkel"] .app-embed .fp-green { --rub:#529818; --rub-fl:#19311e; --rub-txt:#59a41a; --rub-chip:#59a41a; --rub-rand:#529818; --rub-tief:#61b31c; --rub-hof:rgba(82,152,24,.28); --rub-btn-schrift:#08150f; } :root[data-thema="dunkel"] .app-embed .c3, :root[data-thema="dunkel"] .app-embed .fp-amber { --rub:#c47410; --rub-fl:#272c1d; --rub-txt:#d17c11; --rub-chip:#d17c11; --rub-rand:#c47410; --rub-tief:#e78913; --rub-hof:rgba(196,116,16,.28); --rub-btn-schrift:#08150f; } :root[data-thema="dunkel"] .app-embed .c4, :root[data-thema="dunkel"] .app-embed .fp-teal { --rub:#159977; --rub-fl:#11312b; --rub-txt:#17a681; --rub-chip:#17a681; --rub-rand:#159977; --rub-tief:#19b58c; --rub-hof:rgba(21,153,119,.28); --rub-btn-schrift:#08150f; } :root[data-thema="dunkel"] .app-embed .hint-blue { --rub-fl:#142e26; --rub-chip:#30a366; } :root[data-thema="dunkel"] .app-embed .hint-green { --rub-fl:#19311e; --rub-chip:#59a41a; } :root[data-thema="dunkel"] .app-embed .hint-amber { --rub-fl:#272c1d; --rub-chip:#d17c11; } :root[data-thema="dunkel"] .app-embed .hint-teal { --rub-fl:#11312b; --rub-chip:#17a681; } /* Hinweiskarten dunkel: Balken 3:1, Beschriftung 4,5:1 auf der Karte. */ :root[data-thema="dunkel"] .app-embed .hc-red { --hw:#dc2626; --hw-txt:#e25b5b; } :root[data-thema="dunkel"] .app-embed .hc-amber { --hw:#d97706; --hw-txt:#df6215; } :root[data-thema="dunkel"] .app-embed .hc-blue { --hw:#24794c; --hw-txt:#2b9a5f; } :root[data-thema="dunkel"] .app-embed .hc-red2 { --hw:#cd1a64; --hw-txt:#e5508c; } :root[data-thema="dunkel"] .app-embed .hc-green { --hw:#417813; --hw-txt:#4a9913; } /* Der Auswahlpfeil im