/* KE Raumbuch – app colour Petrol and the parts the kit does not have (tiles, material rows, photos). */
:root{--wz:#0e7490}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]){--wz:#67d4e8}}
:root[data-theme="dunkel"]{--wz:#67d4e8}

.rb-app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.rb-num{font-variant-numeric:tabular-nums}
.rb-mut{color:var(--ke-mut)}
.rb-klein{font-size:12.5px;color:var(--ke-mut);margin:0}
.rb-leer{padding:18px 0;color:var(--ke-mut);font-size:14.5px;margin:0}
.rb-gefahr{color:var(--ke-rot)}
button.rb-gefahr{background:none;border:0;padding:6px 0;font-size:14.5px;cursor:pointer;text-align:left;justify-self:start}

/* Header extras */
.rb-kopf-titel{padding:0 max(10px,env(safe-area-inset-right,0px)) 10px max(var(--ke-rand),env(safe-area-inset-left,0px));display:flex;align-items:flex-end;gap:2px}
.rb-kopf-titel .ke-titel{padding:0;flex:1;min-width:0}
.rb-kopf-titel h1{overflow-wrap:anywhere}

/* Room tabs (text toggle with counts) */
.rb-tabs{display:flex;gap:22px;border-bottom:1px solid var(--ke-line);margin:0 max(var(--ke-rand),env(safe-area-inset-right,0px)) 0 max(var(--ke-rand),env(safe-area-inset-left,0px))}
.rb-tabs button{background:none;border:0;padding:6px 0 10px;font-size:14.5px;color:var(--ke-mut);position:relative;cursor:pointer;display:flex;gap:6px;align-items:baseline}
.rb-tabs button span{font-size:12.5px;font-variant-numeric:tabular-nums}
.rb-tabs [aria-selected="true"]{color:var(--ke-ink)}
.rb-tabs [aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ke-ink)}

/* Content area of the room screen leaves room for the fixed footer */
.rb-raum .ke-inhalt{padding-top:14px;padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.rb-mit-aktion .ke-inhalt{padding-bottom:calc(var(--ke-leiste-h) + 96px + env(safe-area-inset-bottom,0px))}

/* Fixed footer: last change + undo, main button */
.rb-fuss{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--ke-bg);border-top:1px solid var(--ke-line);
  padding:8px max(var(--ke-rand),env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(var(--ke-rand),env(safe-area-inset-left,0px));display:grid;gap:6px}
.rb-fuss>*{max-width:640px;width:100%;margin:0 auto}
.rb-letzte{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ke-mut);min-height:34px}
.rb-letzte b{font-weight:400;color:var(--ke-ink)}
.rb-aktion{position:fixed;left:0;right:0;bottom:calc(var(--ke-leiste-h) + env(safe-area-inset-bottom,0px));z-index:19;background:var(--ke-bg);
  padding:10px max(var(--ke-rand),env(safe-area-inset-right,0px)) 10px max(var(--ke-rand),env(safe-area-inset-left,0px))}
.rb-aktion .ke-knopf{max-width:640px;margin:0 auto}
.ke-knopf small{font-weight:400;opacity:.85;margin-left:6px}
.rb-knopf-pfeil{display:flex;justify-content:center;align-items:center;gap:8px}
.rb-knopf-pfeil svg{width:18px;height:18px}

/* Bauteil tiles */
.rb-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rb-kachel{position:relative;height:88px;border:1px solid var(--ke-line2);border-radius:2px;background:var(--ke-bg);overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.rb-kachel__tap{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:9px 12px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;cursor:pointer;color:inherit;-webkit-touch-callout:none}
.rb-kachel__name{font-size:14.5px;line-height:1.3;padding-right:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rb-kachel__zahl{font-size:34px;font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rb-kachel__zahl small{font-size:15px;font-weight:400;letter-spacing:0;margin-left:4px;color:var(--ke-mut)}
.rb-kachel--null .rb-kachel__zahl,.rb-kachel--null .rb-kachel__name{color:var(--ke-mut)}
.rb-kachel--zuletzt{border-color:var(--ke-ink)}
.rb-kachel--zuletzt::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--wz);z-index:1}
.rb-kachel--zuletzt .rb-kachel__zahl{color:var(--wz)}
.rb-kachel__minus{position:absolute;top:0;right:0;z-index:2;width:44px;height:44px;display:grid;place-items:center;background:var(--ke-bg);border:0;border-left:1px solid var(--ke-line);border-bottom:1px solid var(--ke-line);color:var(--ke-mut);cursor:pointer;padding:0}
.rb-kachel__minus svg{width:18px;height:18px}
.rb-kachel__notiz{position:absolute;right:10px;bottom:10px;width:6px;height:6px;background:var(--ke-line2)}
.rb-neu{height:88px;border:1px dashed var(--ke-line2);border-radius:2px;display:flex;align-items:center;padding:0 12px;background:none}
.rb-neu:focus-within{border-style:solid;border-color:var(--wz)}
.rb-neu input,.rb-neu-zeile input{width:100%;border:0;outline:0;background:none;font-size:16px;padding:8px 0;color:var(--ke-ink)}
.rb-neu input::placeholder,.rb-neu-zeile input::placeholder,.rb-mat-neu::placeholder,.rb-menge::placeholder{color:var(--ke-mut)}
.rb-vorschlaege{display:grid;border:1px solid var(--ke-line2);border-top:0;margin-top:-8px;grid-column:1/-1}
.rb-vorschlaege button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px;border:0;border-top:1px solid var(--ke-line);background:var(--ke-bg);text-align:left;cursor:pointer;width:100%;font-size:15px}
.rb-vorschlaege button:first-child{border-top:0}
.rb-vorschlaege small{font-size:12.5px;color:var(--ke-mut)}

/* Bauteil rows (setting "Zeilen") */
.rb-zeilen{display:grid;border-top:1px solid var(--ke-line)}
.rb-zeile{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--ke-line);position:relative}
.rb-zeile--zuletzt::before{content:"";position:absolute;left:calc(-1 * var(--ke-rand));top:-1px;bottom:-1px;width:3px;background:var(--wz)}
.rb-zeile__name{flex:1;min-width:0;background:none;border:0;padding:8px 0;text-align:left;font-size:15.5px;cursor:pointer;color:inherit}
.rb-zeile--null .rb-zeile__name,.rb-zeile--null .rb-zeile__zahl{color:var(--ke-mut)}
.rb-zeile__zahl{min-width:56px;text-align:right;font-size:26px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.rb-zeile__zahl small{font-size:13px;color:var(--ke-mut);margin-left:3px}
.rb-zeile--zuletzt .rb-zeile__zahl{color:var(--wz)}
.rb-taste{width:48px;height:46px;display:grid;place-items:center;border:1px solid var(--ke-line2);border-radius:2px;background:none;color:var(--ke-ink);cursor:pointer;padding:0;touch-action:manipulation}
.rb-taste svg{width:20px;height:20px}
.rb-taste--minus{color:var(--ke-mut)}
.rb-taste--plus{width:58px;border-color:var(--ke-ink)}
.rb-neu-zeile{padding:4px 0;border-bottom:1px solid var(--ke-line)}

/* Materials per Boden / Wand / Decke */
.rb-flaeche{display:grid}
.rb-flaeche__kopf{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ke-mut);padding-bottom:4px}
.rb-mz{display:flex;align-items:center;gap:8px;border-top:1px solid var(--ke-line);min-height:50px}
.rb-mz__name{flex:1;min-width:0;background:none;border:0;padding:8px 0;text-align:left;cursor:pointer;font-size:15px;color:inherit;display:grid}
.rb-mz__name small{font-size:12px;color:var(--ke-mut)}
.rb-menge{width:80px;flex:none;border:1px solid var(--ke-line2);border-radius:2px;padding:7px 8px;text-align:right;font-size:16px;font-variant-numeric:tabular-nums;background:var(--ke-bg);color:var(--ke-ink);outline:none}
.rb-menge:focus{border-color:var(--ke-ink)}
.rb-einheit{width:44px;height:42px;flex:none;background:none;border:0;padding:0;font-size:14.5px;cursor:pointer;color:var(--ke-ink);text-decoration:underline;text-decoration-color:var(--wz);text-decoration-thickness:2px;text-underline-offset:4px}
.rb-mat-neu{width:100%;border:0;border-top:1px solid var(--ke-line);outline:0;background:none;padding:11px 0;font-size:16px;color:var(--ke-ink)}
.rb-mat-neu:focus{border-top-color:var(--wz)}
.rb-vorschau{margin:-4px 0 2px;font-size:13px;color:var(--wz)}
.rb-schnell{display:flex;flex-wrap:wrap;gap:0 16px;align-items:baseline;font-size:14px}
.rb-schnell>span{font-size:12.5px;color:var(--ke-mut)}
.rb-link{background:none;border:0;padding:6px 0;font-size:14px;color:var(--ke-ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--wz);text-decoration-thickness:2px;text-underline-offset:4px}
.rb-voll{margin:0;padding-top:8px;border-top:1px solid var(--ke-line);font-size:12.5px;color:var(--ke-mut)}
.rb-aus-massen{margin:-4px 0 4px;font-size:13px}

/* Photos */
.rb-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rb-foto{aspect-ratio:4/3;background:var(--ke-fl);border:0;padding:0;cursor:pointer;overflow:hidden;position:relative}
.rb-foto img{width:100%;height:100%;object-fit:cover;display:block}
.rb-foto span{position:absolute;left:6px;bottom:5px;font-size:12px;background:var(--ke-bg);color:var(--ke-ink);padding:0 5px}
.rb-foto-neu{aspect-ratio:4/3;border:1px dashed var(--ke-line2);background:none;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--ke-mut);cursor:pointer;font-size:14px}
.rb-foto-neu svg{width:26px;height:26px}
.rb-foto-gross{width:100%;max-height:60vh;object-fit:contain;background:var(--ke-fl);display:block}

/* Sheets */
.rb-knoepfe3{display:grid;gap:8px}
.rb-umsch-scroll{overflow-x:auto;scrollbar-width:none}
.rb-umsch-scroll::-webkit-scrollbar{display:none}
.rb-umsch-scroll .ke-umsch{width:max-content;min-width:100%}
.rb-masse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rb-hinweis-text{font-size:14px;line-height:1.5;margin:0}

/* Project list hint about backups */
.rb-sicherung{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--ke-line);border-bottom:1px solid var(--ke-line);font-size:14px}
.rb-sicherung .ke-qu{margin-top:7px;background:var(--wz)}
.rb-sicherung div{flex:1;display:grid;gap:6px}
.rb-sicherung .rb-link{justify-self:start}

/* .ke-inhalt centres itself with auto margins; inside the flex column it must still take the full width */
.rb-app>.ke-inhalt{width:100%}
.ke-kopf__knopf:disabled{opacity:.3;cursor:default}

/* A toast must never swallow a tap on the button below it, and sits above the fixed buttons */
.ke-toast{pointer-events:none}
body:has(.rb-raum) .ke-toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
body:has(.rb-mit-aktion) .ke-toast{bottom:calc(var(--ke-leiste-h) + 86px + env(safe-area-inset-bottom,0px))}

@media (min-width:560px){.rb-kacheln,.rb-fotos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rb-neues-geschoss{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.rb-neues-geschoss .ke-knopf{width:auto;padding:10px 14px}
/* With a sheet open, toasts go to the top so they never cover its fields */
body:has(.ke-schleier) .ke-toast{bottom:auto;top:calc(16px + env(safe-area-inset-top,0px))}
/* Larger text setting zooms the page; viewport-based heights must be divided back so sheets still fit */
.ke-blatt{max-height:calc(88dvh / var(--rb-zoom,1))}
/* Tabs may not widen the page (larger text setting): they share the width and scroll if they must */
.rb-tabs{gap:0;overflow-x:auto;scrollbar-width:none}
.rb-tabs::-webkit-scrollbar{display:none}
.rb-tabs button{flex:1 0 auto;justify-content:center;padding-left:6px;padding-right:6px}
.rb-tabs button:first-child{justify-content:flex-start;padding-left:0}
.rb-tabs button:last-child{justify-content:flex-end;padding-right:0}
/* Zoom factors like 1.4 leave sub-pixel rests; never let them make the page scroll sideways */
#app{overflow-x:clip}
/* Grid tracks would otherwise grow to the longest Bauteil name and push the buttons out */
.rb-zeilen,.rb-kacheln{grid-template-columns:minmax(0,1fr)}
.rb-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.rb-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Long room lists (hundreds of rooms): rows outside the screen are laid out only when scrolled to */
.rb-app .ke-zeilen>.ke-z{content-visibility:auto;contain-intrinsic-size:auto 66px}