*{box-sizing:border-box} :root{color-scheme:dark;--bg:#101a19;--panel:#182523;--panel2:#20312e;--line:#2d413c;--text:#edf4f0;--muted:#9eb2aa;--gold:#e8bd69;--green:#64c6a0;--blue:#73b9e8;--danger:#f18b83} body{margin:0;background:radial-gradient(ellipse at 10% 0%,#1b302c 0,transparent 42%),var(--bg);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text)}button,input,textarea{font:inherit}button{cursor:pointer}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(18px,4vw,58px);border-bottom:1px solid #293b36;background:rgba(15,25,23,.82);position:sticky;top:0;z-index:3;backdrop-filter:blur(14px)}.brand,.top-actions,.panel-head,.modal-head,.form-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{justify-content:flex-start}.brand-mark{display:grid;place-items:center;width:44px;height:44px;background:#30443b;border:1px solid #486455;border-radius:14px;font-size:23px}.brand strong,.brand small{display:block}.brand strong{font-size:17px;letter-spacing:.01em}.brand small{color:var(--muted);font-size:12px}.server-pill{font-size:12px;color:#b6d7c8;border:1px solid #35554a;border-radius:999px;padding:7px 11px;white-space:nowrap}.server-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#67d5a5;margin-right:7px}.page{max-width:1240px;margin:0 auto;padding:36px clamp(16px,4vw,48px) 55px}.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 26px}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:750;color:var(--gold);margin:0 0 8px}.welcome h1{font-size:clamp(26px,3.4vw,39px);line-height:1.15;margin:0 0 10px;font-weight:650;letter-spacing:-.035em}.subhead,.panel-head p{color:var(--muted);margin:0}.welcome-icon{display:grid;place-items:center;flex:0 0 76px;height:76px;border:1px solid #45594b;border-radius:22px;color:var(--gold);font-size:34px;background:linear-gradient(145deg,#2d4439,#1a2925)}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}.stat-card,.panel{background:linear-gradient(145deg,rgba(27,42,38,.98),rgba(21,33,30,.98));border:1px solid var(--line);border-radius:17px}.stat-card{padding:18px 20px;min-height:124px}.stat-card span,.stat-card small{display:block;color:var(--muted)}.stat-card span{font-size:12px}.stat-card strong{display:block;font-size:28px;font-weight:650;margin:4px 0}.stat-card small{font-size:11px}.status-text{font-size:22px!important;color:var(--green)}.panel{overflow:hidden}.panel-head{padding:22px 24px;align-items:center;border-bottom:1px solid var(--line)}.panel-head h2{margin:0 0 4px;font-size:19px;font-weight:620}.panel-head p{font-size:12px}
.archive-toolbar{padding:0 24px;border-bottom:1px solid var(--line);background:rgba(9,18,16,.15)}.archive-tabs{display:flex;gap:7px;flex-wrap:wrap}.archive-tab{display:inline-flex;align-items:center;gap:9px;padding:12px 13px;border:0;border-bottom:2px solid transparent;background:transparent;color:#9eb5aa;font-size:12px;font-weight:600;cursor:pointer}.archive-tab span{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;border:1px solid #3b5048;border-radius:999px;background:#1b2a25;color:#b8c9c0;font-size:10px;font-variant-numeric:tabular-nums}.archive-tab:hover{color:var(--text)}.archive-tab.active{color:var(--gold);border-bottom-color:var(--gold)}.archive-tab.active span{background:#3a3526;border-color:#786642;color:#f1d69a}
.search-wrap{display:flex;align-items:center;gap:8px;border:1px solid #3b5048;background:#111d1a;border-radius:10px;padding:0 11px;min-width:min(320px,100%);color:var(--muted)}.search-wrap input{background:transparent;border:0;outline:0;color:var(--text);padding:11px 0;width:100%;min-width:0}.button{border:1px solid transparent;border-radius:10px;padding:10px 15px;font-weight:620;font-size:13px;transition:transform .15s,background .15s,border-color .15s}.button:hover{transform:translateY(-1px)}.primary{background:var(--gold);color:#1c251f}.primary:hover{background:#f2ce83}.secondary{background:#253731;border-color:#41564b;color:var(--text)}.danger-button{background:#3c2523;border-color:#72413c;color:#ffc1b8}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th{text-align:left;color:#9eb5aa;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:700;background:rgba(9,18,16,.28);padding:13px 20px}td{padding:15px 20px;border-top:1px solid #273a34;font-size:13px}tbody tr:hover{background:rgba(111,158,130,.055)}.number-chip{display:inline-flex;align-items:center;justify-content:center;min-width:47px;padding:5px 8px;border-radius:7px;background:#2d4238;color:#f0d18c;font-weight:750;font-variant-numeric:tabular-nums}.date-cell{color:#c0cec7;white-space:nowrap}.sud-name{font-weight:650}.sud-sub{display:block;color:var(--muted);font-size:11px;margin-top:2px}.status-chip{display:inline-block;padding:5px 9px;border:1px solid #3d5a4b;border-radius:999px;color:#a6e0bf;background:#203a2e;font-size:11px;white-space:nowrap}.status-chip.done{border-color:#45516a;background:#282f42;color:#c5c8f3}.row-actions{display:flex;justify-content:flex-end;gap:7px;white-space:nowrap}.small-button{border:1px solid #3a5046;background:#22332d;color:#e4eee8;padding:6px 10px;border-radius:8px;font-size:12px}.small-button:hover{background:#30483c}.right{text-align:right}.empty{text-align:center;color:var(--muted);padding:30px}.empty-state{text-align:center;padding:38px 20px}.empty-state>div{font-size:34px}.empty-state h3{margin:8px 0;font-size:18px}.empty-state p{color:var(--muted);font-size:13px;margin:0 auto 18px;max-width:440px}.footnote{font-size:11px;color:#7f988d;text-align:center;margin-top:17px}.modal-backdrop{position:fixed;inset:0;z-index:10;background:rgba(3,10,8,.76);display:grid;place-items:center;padding:18px;overflow-y:auto}.modal-backdrop[hidden]{display:none}.modal{width:min(680px,100%);background:#182622;border:1px solid #40574b;border-radius:18px;box-shadow:0 30px 90px #0009;padding:24px;max-height:calc(100vh - 36px);overflow:auto}.modal-head{margin-bottom:20px}.modal-head h2{margin:0;font-size:23px;font-weight:650}.icon-button{width:35px;height:35px;border-radius:9px;border:1px solid #41574d;background:#23342e;color:#eaf2ed;font-size:25px;line-height:1}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field.full{grid-column:1/-1}.field span{font-size:12px;color:#b9c9c1}.field b{color:var(--gold)}.field input,.field textarea{width:100%;min-width:0;border:1px solid #3c5148;border-radius:9px;background:#101b18;color:var(--text);padding:11px 12px;outline:none}.field input:focus,.field textarea:focus{border-color:#b59a5c;box-shadow:0 0 0 3px #d8b56b1c}.field input[readonly]{color:#9cb0a6;background:#1b2a25}.field textarea{resize:vertical}.notice{display:flex;gap:10px;margin-top:18px;padding:12px 13px;border:1px solid #45523e;background:#273329;border-radius:10px;color:#e4d7ad;font-size:12px}.notice p{margin:0}.form-footer{justify-content:flex-end;flex-wrap:wrap;margin-top:22px}.form-footer #saveMessage{margin-right:auto;color:var(--muted);font-size:12px}.toast{position:fixed;right:20px;bottom:20px;z-index:20;max-width:calc(100% - 40px);background:#d9f0e3;color:#153c2a;padding:12px 16px;border-radius:10px;box-shadow:0 8px 35px #0006;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:760px){.topbar{padding:13px 15px;align-items:flex-start}.server-pill{display:none}.top-actions{gap:8px}.page{padding-top:25px}.welcome-icon{display:none}.stats{grid-template-columns:1fr 1fr}.stat-card:last-child{grid-column:1/-1;min-height:95px}.panel-head{align-items:stretch;flex-direction:column;padding:18px}.search-wrap{min-width:0;width:100%}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.modal{padding:18px}.form-footer{gap:8px}.form-footer #saveMessage{flex-basis:100%}}@media(max-width:430px){.brand small{display:none}.brand-mark{width:38px;height:38px}.brand strong{font-size:15px}.top-actions .button{padding:9px 10px}.welcome h1{font-size:27px}.stats{gap:9px}.stat-card{padding:14px}.stat-card strong{font-size:24px}.stat-card small{font-size:10px}}

.editor-modal{width:min(1180px,100%);max-height:calc(100vh - 24px);padding:0;display:flex;flex-direction:column}.editor-modal .modal-head{padding:22px 25px 16px;margin:0;border-bottom:1px solid var(--line);flex-shrink:0}.editor-body{padding:20px 25px;overflow:auto}.editor-footer{padding:14px 25px;border-top:1px solid var(--line);background:#172420;flex-shrink:0}.editor-section{border:1px solid var(--line);border-radius:13px;padding:17px;margin:0 0 16px;background:rgba(12,23,19,.26)}.editor-section h3{font-size:15px;margin:0 0 13px;font-weight:650}.editor-section p.hint{font-size:12px;color:var(--muted);margin:-6px 0 14px}.recipe-line{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(100px,1fr));gap:10px;align-items:end}.editor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.editor-field{display:flex;flex-direction:column;gap:6px;min-width:0}.editor-field label{font-size:11px;color:var(--muted)}.editor-field input,.editor-field select,.editor-field textarea{width:100%;min-width:0;border:1px solid #3c5148;border-radius:8px;background:#101b18;color:var(--text);padding:9px 10px;outline:none}.editor-field input:focus,.editor-field select:focus,.editor-field textarea:focus{border-color:#b59a5c;box-shadow:0 0 0 3px #d8b56b1c}.editor-field select{color-scheme:dark}.subtable{width:100%;min-width:600px}.subtable th{padding:9px 10px}.subtable td{padding:6px 7px}.subtable input{width:100%;min-width:55px;background:#101b18;border:1px solid #344940;border-radius:6px;padding:7px;color:var(--text)}.subtable .small-button{white-space:nowrap}.table-total{display:flex;justify-content:flex-end;gap:18px;color:var(--muted);font-size:12px;padding-top:10px}.table-total strong{color:var(--gold);font-size:15px}.editor-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head h3{margin-bottom:13px}.section-head .small-button{margin-bottom:12px}.archive-mobile{display:none}.status-note{font-size:12px;color:var(--muted);min-height:18px}.subhead-note{font-size:12px;color:var(--muted)}.recipe-source{font-size:11px;color:#a6b7ac;margin-top:5px}.calc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.calc-tile{background:#20312a;border:1px solid #354d3f;border-radius:9px;padding:12px}.calc-tile span{display:block;color:var(--muted);font-size:11px}.calc-tile strong{display:block;font-size:18px;color:#e8d29b;margin-top:3px}.small-danger{border-color:#72413c!important;color:#ffc1b8!important}.modal-backdrop.editor-backdrop{padding:12px}
@media(max-width:800px){.editor-modal .modal-head{padding:17px}.editor-body{padding:14px}.editor-footer{padding:12px 14px}.recipe-line{grid-template-columns:1fr 1fr}.recipe-line .editor-field:first-child{grid-column:1/-1}.editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.editor-grid{grid-template-columns:1fr 1fr;gap:9px}.editor-section{padding:12px}.editor-modal{max-height:100dvh;border-radius:0}.modal-backdrop.editor-backdrop{padding:0}.editor-modal .modal-head h2{font-size:19px}.editor-footer .button{flex:1}.calc-grid{grid-template-columns:1fr 1fr}}

@media(max-width:520px){.archive-toolbar{padding:0 12px}.archive-tabs{gap:0}.archive-tab{padding:11px 9px;font-size:11px;gap:6px}.panel-head{gap:13px}}


/* Version 9: live Excel formula output */
.calculation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.calculation-card{min-width:0;border:1px solid var(--line,#d7e0dc);border-radius:12px;padding:13px;background:var(--panel-soft,rgba(128,150,140,.08));display:flex;flex-direction:column;gap:5px}
.calculation-card span{font-size:.82rem;color:var(--muted,#6b7b74)}
.calculation-card strong{font-size:1.2rem;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.calculation-card small{font-size:.75rem;color:var(--muted,#6b7b74);line-height:1.35}
@media(max-width:900px){.calculation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.calculation-grid{grid-template-columns:1fr 1fr;gap:8px}.calculation-card{padding:10px}.calculation-card strong{font-size:1rem}}

.subtable select{width:100%;min-width:95px;background:#101b18;border:1px solid #344940;border-radius:6px;padding:7px;color:var(--text);color-scheme:dark}

/* Sichtbare Bierfarbvorschau für die berechneten EBC-Werte */
.beer-color-swatch{height:54px;min-height:54px;width:100%;border-radius:9px;border:1px solid rgba(80,65,35,.35);box-shadow:inset 0 1px 3px rgba(0,0,0,.18);background:linear-gradient(135deg,#ffe699,#e78318);}
.beer-color-swatch.is-empty{background:repeating-linear-gradient(135deg,transparent,transparent 8px,rgba(128,128,128,.08) 8px,rgba(128,128,128,.08) 16px);border-style:dashed;}


/* Stufenlose EBC-Farbskala mit Positionsmarker */
.ebc-scale{margin:8px 0 10px; width:100%;}
.ebc-scale-bar{position:relative;height:12px;border-radius:999px;background:linear-gradient(90deg,#ffe699 0%,#ffd878 4%,#ffca55 6%,#ffb52e 9%,#f59b20 12%,#e78318 16%,#d56b12 20%,#bd4e0b 26%,#a83a08 33%,#8d2c08 40%,#70200a 50%,#55170a 60%,#351008 80%,#210b06 100%);border:1px solid rgba(80,65,35,.45);}
.ebc-scale-marker{position:absolute;left:0%;top:50%;width:10px;height:22px;transform:translate(-50%,-50%);border:2px solid #f4f5ed;border-radius:4px;background:#18231f;box-shadow:0 0 0 1px rgba(0,0,0,.55);transition:left .12s ease;}
.ebc-scale-marker.is-hidden{display:none;}
.ebc-scale-labels{display:flex;justify-content:space-between;gap:4px;margin-top:5px;color:var(--muted);font-size:.68rem;line-height:1.2;}

/* Version 15: Excel-Zeitkette für Maischrasten */
.mash-time-settings{grid-template-columns:minmax(180px,360px);margin-bottom:12px}.time-input-row{display:flex;align-items:center;gap:8px}.time-input-row input{flex:1;min-width:0}.now-time-button{white-space:nowrap;min-height:36px}
.mash-time-cell{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--gold,#d8b56b);font-weight:600}
.mash-end-total{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
@media(max-width:800px){.mash-time-settings{grid-template-columns:minmax(0,1fr)}}

/* Version 20: Kochbeginn und automatisch berechnete Hopfengabe-Uhrzeiten */
.boil-time-settings{grid-template-columns:minmax(180px,360px) minmax(180px,260px);margin-bottom:12px}
.boil-end-total{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.hop-time-cell{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--gold,#d8b56b);font-weight:600}
.hop-time-cell.hop-time-ready{color:var(--green,#8bc9a5)}
@media(max-width:800px){.boil-time-settings{grid-template-columns:minmax(0,1fr)}}

/* Jodprobe-Kontrolle zwischen Maischen/Rasten und Hopfengaben */
.iodine-check-row{display:flex;align-items:center;margin:-2px 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:rgba(12,23,19,.42)}
.iodine-check-row label{display:inline-flex;align-items:center;gap:11px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;user-select:none}
.iodine-check-row input[type=checkbox]{width:19px;height:19px;margin:0;accent-color:#b59a5c;cursor:pointer;flex:0 0 auto}