/* ==========================================================================
   MARKE RASTERWERK — dünne Schicht über werkbank.css: Akzent Zinnober, Wortmarke,
   Kundenbereich im Gesicht der Website (Schibsted Grotesk, Ecken 2 px), eigene Module
   (Projektkarten, Ablauf, Belege, eingebetteter Fragebogen). Wird NICHT zu Anrufa kopiert.
   ========================================================================== */
@font-face{font-family:"Schibsted Grotesk";src:url("/statisch/schriften/schibsted-grotesk.woff2") format("woff2");font-weight:400 900;font-display:swap}
:root{--akzent:#E8380D;--akzent-text:#C22C08;--akzent-hell:#FDEDE8}
@media (prefers-color-scheme:dark){:root:not([data-thema="hell"]){--akzent-hell:#3A1A12}}
:root[data-thema="dunkel"]{--akzent-hell:#3A1A12}
/* Kundenbereich: Gesicht der Marke wie registerwerk.de */
html[data-bereich="kunden"]{--sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;--radius:2px;--radius-klein:2px}
.wortmarke .marke rect:last-child{fill:var(--akzent)}

/* ---------- Ablauf (Projektstatus) */
.ablauf{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;list-style:none;padding:0;counter-reset:s}
.ablauf li{padding:12px 12px 12px;border-top:3px solid var(--raster);font-size:14px;color:var(--grau)}
.ablauf li::before{counter-increment:s;content:"0" counter(s);display:block;font:400 12px/1 var(--mono);margin-bottom:6px;letter-spacing:.06em}
.ablauf li.erledigt{border-color:var(--tinte);color:var(--tinte-2)}
.ablauf li.aktiv{border-color:var(--akzent);color:var(--tinte);font-weight:600}
.ablauf li.aktiv::before{color:var(--akzent-text)}

/* ---------- Projektkarten wie auf registerwerk.de/arbeiten/, etwas kleiner */
.cases{display:grid;grid-template-columns:1fr;max-width:680px;gap:20px;margin-bottom:28px} /* Betreiber 09.09.: alle Karten gleich lang und untereinander */
.case-karte:not(.case-karte--paar) .case-karte__link{width:calc(50% - 14px)} /* Einzelbild links, so gross wie das «Neu»-Bild einer Paar-Karte */
.geraet{border:1px solid var(--tinte);background:#fff;overflow:hidden;border-radius:4px}
.geraet img{width:100%;height:100%;object-fit:cover;object-position:top}
.geraet--desktop{aspect-ratio:1440/900}
.geraet--mobil{aspect-ratio:390/664;border-radius:12px;box-shadow:0 0 0 1px var(--papier)}
.geraet__leer{height:100%;display:grid;place-items:center;background:var(--papier-3)}
.case-karte__link{display:block;position:relative;text-decoration:none;padding-bottom:28px;padding-right:12%}
.case-karte .geraet--mobil{position:absolute;right:0;bottom:0;width:28%;max-width:96px;background:var(--papier)}
.case-karte__link .geraet{transition:transform .3s,border-color .3s}
.case-karte__link:hover .geraet--desktop{transform:translateY(-3px)}
.case-karte__link:hover .geraet--mobil{transform:translateY(-5px)}
.case-karte__link:hover .geraet{border-color:var(--akzent)}
.case-karte{background:var(--papier-2);border:1px solid var(--raster);border-radius:var(--radius);padding:14px 16px 16px}
.case-karte__text{margin:0 0 14px}
.case-karte__aktionen{margin-top:10px}
.case-karte--vorbei{opacity:.72}
.case-karte--vorbei:hover{opacity:1}
.case-karte__titel{margin:4px 0 6px;font-size:17px}
.case-karte__titel a{text-decoration:none}
.case-karte__titel a:hover{color:var(--akzent-text)}
.case-karte__text>p{font-size:14px;color:var(--tinte-2)}
.case-karte--paar{grid-column:1/-1;max-width:680px}
.case-karte__paar{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;align-items:start}
.case-karte__paar .label{margin:0 0 8px}
.case-karte__alt .geraet{filter:saturate(.7) brightness(.94);transition:filter .3s}
.case-karte__alt .case-karte__link:hover .geraet{filter:none;transform:none;border-color:var(--tinte)}
div.case-karte__link{cursor:default}
@media(max-width:600px){.case-karte__paar{grid-template-columns:1fr}}

/* ---------- Eingebetteter Fragebogen */
.einbettung{display:block;width:100%;height:calc(100vh - 150px);min-height:600px;border:1px solid var(--raster);background:#fff}

/* ---------- Angebot/Rechnung Vorschau */
.beleg{background:#fff;color:#141414;border:1px solid var(--raster);padding:36px 40px;max-width:760px;font-size:14.5px}
.beleg h1{font-size:22px;margin-bottom:6px}
.beleg h2{font-size:16px;margin:26px 0 8px;padding-top:12px;border-top:1px solid #dededa}
.beleg h2:first-of-type{border-top:0;padding-top:0}
.beleg p{margin:0 0 10px;line-height:1.55}
.beleg p.label{margin:18px 0 4px}
.beleg p.klein{color:#6b6b66;margin:6px 0 12px}
.beleg ul,.beleg ol{margin:4px 0 14px;padding-left:1.4em}
.beleg li{margin-bottom:5px;line-height:1.5}
.beleg .tabelle-rahmen{margin:8px 0 14px}
.beleg .tabelle{font-size:14px}
.beleg .tabelle thead th{background:#f1f1ec;color:#6b6b66}
.beleg .tabelle td,.beleg .tabelle th{border-color:#dededa}
.beleg-summe{display:flex;justify-content:flex-end;gap:40px;font-size:18px;border-top:2px solid #141414;padding-top:8px;margin-top:8px}


/* Sprachwahl im Kundenbereich (08.09.2026): Link auf die andere Sprache in der Seitenleiste und auf den Anmeldeseiten */
.sprachwahl{margin:8px 0 0}
.sprachwahl a{color:var(--grau,#6B6B66);text-decoration:underline}
.sprachwahl a:hover{color:inherit}
.anmeldung .sprachwahl{margin-top:18px;text-align:center}