/* Fokus.Berching – Angebotskonfigurator
   Selbst gehostete Schrift optional: DM Serif Text als woff2 unter
   assets/fonts/ ablegen. Fehlt die Datei, greift automatisch Georgia.
   Keine externen Schrift- oder Script-Quellen – DSGVO-konform. */
@font-face{
  font-family:"FB Serif";
  src:url("fonts/dm-serif-text.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --o:#F2811D;
  --o-dark:#C4640C;
  --o-soft:#FDF3E9;
  --ink:#1A1A2E;
  --muted:#63637A;
  --line:#E2DACD;
  --line-str:#CFC3AF;
  --paper:#FFFDFA;
  --bg:#F5F0EA;
  --red:#A6301B;
  --serif:"FB Serif",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --bar-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(60px + env(safe-area-inset-top,0px));
}

body{
  margin:0;
  padding-top:env(safe-area-inset-top,0px);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
}

h1,h2{font-family:var(--serif);font-weight:400;}
h1{font-size:clamp(22px,5vw,28px);line-height:1.2;margin:0 0 6px;}
h2{font-size:clamp(17px,4vw,20px);margin:30px 0 10px;}
p{margin:0 0 14px;}
a{color:var(--o-dark);}
a:hover{color:var(--ink);}

:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:4px;}

/* Kopfzeile -------------------------------------------------------- */
.hd{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px;
  background:rgba(245,240,234,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.hd-logo{display:inline-flex;line-height:0;}
.hd-logo img{width:130px;height:auto;max-width:44vw;}
.hd-txt{font-family:var(--serif);font-size:15px;color:var(--muted);}

/* Layout ----------------------------------------------------------- */
.wrap{
  max-width:680px;
  margin:0 auto;
  padding:28px 20px calc(var(--bar-h) + 40px);
}
.sub{color:var(--muted);font-size:15px;margin:0 0 26px;}
.note{color:var(--muted);font-size:14px;}
.hint{color:var(--muted);font-size:13.5px;margin:8px 0 0;}
.hint-top{margin:0 0 10px;}
.divide{height:1px;background:var(--line);border:0;margin:34px 0;}

/* Fortschritt ------------------------------------------------------ */
.prog{margin-bottom:30px;}
.prog-segs{display:flex;gap:5px;margin-bottom:9px;}
.prog-segs i{flex:1;height:3px;border-radius:2px;background:var(--line-str);transition:background .2s;}
.prog-segs i.on{background:var(--o);}
.prog-txt{font-size:13px;color:var(--muted);}

/* Felder ----------------------------------------------------------- */
.field{margin-bottom:24px;}
.lab{display:block;font-size:15px;font-weight:600;margin-bottom:8px;}
.in{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  font:inherit;font-size:16px;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line-str);border-radius:10px;
  -webkit-appearance:none;appearance:none;
}
.in:focus{border-color:var(--o);}
.in.err-f{border-color:var(--red);background:#FFF7F5;}
.sel{
  padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%231A1A2E' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
}
.ta{min-height:104px;resize:vertical;line-height:1.55;}
input[type=number]{-moz-appearance:textfield;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=date]{min-height:50px;}

.row2,.row-street,.row-plz{display:grid;gap:0 14px;}
@media (min-width:560px){
  .row2{grid-template-columns:1fr 1fr;}
  .row-street{grid-template-columns:2.2fr 1fr;}
  .row-plz{grid-template-columns:1fr 2fr;}
}

/* Zähler ----------------------------------------------------------- */
.stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.stepper .num{max-width:86px;text-align:center;}
.mini{
  width:48px;height:48px;flex:0 0 48px;
  border-radius:50%;border:1px solid var(--line-str);
  background:var(--paper);color:var(--ink);
  font-size:22px;line-height:1;cursor:pointer;
}
.mini:hover{border-color:var(--o);color:var(--o-dark);}
.cap{font-size:14px;color:var(--muted);}

/* Auswahlkarten ---------------------------------------------------- */
.opts{display:flex;flex-direction:column;gap:10px;}
.opts.tight{gap:8px;}
.opt{
  display:flex;gap:14px;
  background:var(--paper);
  border:1px solid var(--line);border-radius:12px;
  padding:15px 16px;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.opt:hover{border-color:var(--line-str);}
.opt.slim{padding:12px 14px;}
.opt.fixed{cursor:default;border-color:var(--o);background:var(--o-soft);}
.opt input{position:absolute;width:1px;height:1px;opacity:0;margin:0;}
.opt:focus-within{outline:2px solid var(--o);outline-offset:2px;}
.opt.on{border-color:var(--o);background:var(--o-soft);}
.box{
  flex:0 0 22px;width:22px;height:22px;margin-top:2px;
  border:1.5px solid var(--line-str);border-radius:6px;
  background:#fff;position:relative;
}
.box.round{border-radius:50%;}
.opt.on .box,.box.on{background:var(--o);border-color:var(--o);}
.opt.on .box::after,.box.on::after{
  content:"";position:absolute;left:7px;top:3px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.opt-body{flex:1;min-width:0;display:block;}
.opt-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;}
.opt-t{font-weight:600;font-size:15.5px;display:block;}
.opt-p{font-size:14px;color:var(--muted);white-space:nowrap;}
.opt-d{font-size:14px;color:var(--muted);margin-top:3px;display:block;}
.opt-d.strong{color:var(--ink);margin:0;}
.opt.off{opacity:.6;cursor:default;background:transparent;}

/* Personenzahl je Mahlzeit ------------------------------------------ */
.meal-pax{display:none;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.opt.on .meal-pax{display:flex;}
.meal-pax label{font-size:13.5px;color:var(--muted);}
.meal-pax input{width:74px;min-height:42px;padding:8px 10px;text-align:center;font:inherit;background:#fff;border:1px solid var(--line-str);border-radius:8px;}

/* Nächte ----------------------------------------------------------- */
.night{display:grid;grid-template-columns:1fr 110px 48px;gap:10px;align-items:end;margin-bottom:10px;}
.night .mini-lab{font-size:13px;color:var(--muted);display:block;margin-bottom:5px;}
.x{
  width:48px;height:50px;
  border:1px solid var(--line-str);border-radius:10px;
  background:var(--paper);color:var(--muted);font-size:20px;cursor:pointer;
}
.x:hover{border-color:var(--o);color:var(--o-dark);}
.add{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:10px 0;
  font:inherit;font-size:15px;color:var(--o-dark);cursor:pointer;
}
.add:hover{color:var(--ink);}
@media (max-width:420px){
  .night{grid-template-columns:1fr 84px 48px;gap:8px;}
}

/* Hinweise und Fehler ---------------------------------------------- */
.info{font-size:13.5px;color:var(--muted);border-left:2px solid var(--line-str);padding-left:14px;margin:18px 0;}
.err{
  font-size:14.5px;color:var(--red);
  background:#FFF6F4;border:1px solid #EFD2CB;border-radius:10px;
  padding:12px 14px;margin:18px 0 0;
}
.err ul{margin:6px 0 0;padding-left:18px;}
.warn{font-size:14px;color:var(--o-dark);border-left:2px solid var(--o);padding-left:14px;margin:14px 0;}

/* Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;
  border:1px solid var(--o);border-radius:40px;
  background:var(--o);color:#fff;
  font:inherit;font-size:16px;cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--o-dark);border-color:var(--o-dark);color:#fff;}
.btn.ghost{background:transparent;border-color:var(--line-str);color:var(--ink);}
.btn.ghost:hover{background:var(--paper);border-color:var(--o);color:var(--o-dark);}
.btn[disabled]{opacity:.55;cursor:progress;}
.back{
  background:none;border:0;padding:10px 4px;
  font:inherit;font-size:15px;color:var(--muted);cursor:pointer;
}
.back:hover{color:var(--ink);}

/* Fußleiste mit Zwischensumme --------------------------------------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:rgba(245,240,234,.96);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bar-in{
  max-width:680px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;
}
.bar-sum{display:flex;flex-direction:column;min-width:0;}
.bar-lab{font-size:12.5px;color:var(--muted);}
.bar-val{font-family:var(--serif);font-size:19px;white-space:nowrap;}
.bar-nav{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
@media (max-width:380px){
  .bar-in{padding:10px 14px;}
  .btn{padding:0 20px;}
}

/* Angebot ---------------------------------------------------------- */
.doc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(20px,4vw,32px);}
.doc-h{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line);
}
.doc-h img{width:170px;max-width:50vw;height:auto;}
.doc-meta{text-align:right;font-size:13.5px;color:var(--muted);}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 6px;}
.doc td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.doc td:last-child{text-align:right;white-space:nowrap;padding-left:12px;}
.doc tr.sum td{border-bottom:0;padding-top:12px;}
.doc tr.tot td{border-bottom:0;border-top:1px solid var(--ink);font-weight:700;font-size:16px;}
.doc h2:first-of-type{margin-top:24px;}
.doc-final{margin-top:26px;}
.doc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;}
@media (max-width:420px){
  .doc table{font-size:13.5px;}
  .doc-actions .btn{flex:1 1 100%;}
}

/* Fußzeile --------------------------------------------------------- */
.ft{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  padding:0 20px calc(var(--bar-h) + 24px);
  font-size:13.5px;
}
.ft a{color:var(--muted);text-decoration:none;}
.ft a:hover{color:var(--ink);text-decoration:underline;}

/* Honeypot: für Menschen unsichtbar, für Bots im DOM ---------------- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* Tablet und Desktop ----------------------------------------------- */
@media (min-width:768px){
  .wrap{padding:36px 24px calc(var(--bar-h) + 48px);}
  .hd{padding-left:24px;padding-right:24px;}
  .hd-logo img{width:150px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}

/* Druck ------------------------------------------------------------ */
@media print{
  .noprint,.hd,.prog,.bar,.ft{display:none!important;}
  body{background:#fff;}
  .wrap{max-width:none;padding:0;}
  .doc{border:0;padding:0;}
  .info{color:#333;}
}