/* Warenwirtschaft FrameYourself — Farben aus der Website (vorlage/stil/grund.css) */
@font-face { font-family: Quicksand; font-weight: 300 700; font-display: swap;
  src: url(fonts/quicksand-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Quicksand; font-weight: 300 700; font-display: swap;
  src: url(fonts/quicksand-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: Chilanka; font-weight: 400; font-display: swap;
  src: url(fonts/chilanka-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Chilanka; font-weight: 400; font-display: swap;
  src: url(fonts/chilanka-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --creme: #FBF6F0; --weiss: #FFFFFF; --linie: #EDE2D6; --sand: #C2A990;
  --rosa: #DE8787; --rose: #A14A4A; --salbei: #B1C5A4; --salbei-dunkel: #4E6B3F;
  --tinte: #1F1C1A; --gedaempft: #5A534E; --blass: #8A8078;
  --warn: #8A5A00; --warn-grund: #FFF3D6; --fehler-grund: #FBE4E4; --gut-grund: #E6EFE0;
  --radius: 22px;
  --schrift: Quicksand, system-ui, sans-serif;
  --schrift-hand: Chilanka, Quicksand, cursive;
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: var(--schrift); color: var(--tinte); background: var(--creme); line-height: 1.5; min-height: 100vh; }
a { color: var(--rose); }
h1 { font-family: var(--schrift-hand); font-size: 2.4rem; margin: 0 0 .2rem; font-weight: 400; line-height: 1.15; }
h2 { font-family: var(--schrift-hand); font-size: 1.6rem; margin: 1.8rem 0 .6rem; font-weight: 400; line-height: 1.2; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; font-weight: 600; }
.gedaempft { color: var(--gedaempft); }
.klein { font-size: .87rem; }

/* Kopf wie auf frame-yourself.de: weiß, Logo links, Menü, Knöpfe rechts */
.seitenkopf { background: var(--weiss); border-bottom: 1px solid var(--linie); padding: .6rem 2rem;
  display: flex; align-items: center; gap: .6rem 1.6rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.seitenkopf__logo img { display: block; width: 110px; height: auto; }
.pille { display: inline-block; background: var(--rosa); color: var(--tinte); font-weight: 600; font-size: .85rem;
  padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; }
.menue { flex: 1; }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.menue a { display: inline-block; padding: .45rem .2rem; color: var(--tinte); text-decoration: none; font-weight: 500;
  border-bottom: 2px solid transparent; }
.menue a:hover { text-decoration: underline; }
.menue a.aktiv { border-bottom-color: var(--rosa); font-weight: 700; }
.seitenkopf__rechts { display: flex; gap: .5rem; }
@media (max-width: 1300px) { .seitenkopf .pille, .seitenkopf__rechts .zweit { display: none; } .menue ul { gap: .1rem .7rem; } }

main { padding: 2rem 2rem 4rem; max-width: 1280px; margin: 0 auto; min-width: 0; }
.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Meldungen */
.meldung { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.meldung.gut { background: var(--gut-grund); }
.meldung.fehler { background: var(--fehler-grund); color: #6d1f1f; font-weight: 600; }

/* Karten & Raster */
.karte { background: var(--weiss); border-radius: var(--radius); padding: 1.1rem 1.4rem; }
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.zahlen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1rem; }
.zahl { background: var(--weiss); border-radius: var(--radius); padding: 1rem 1.3rem; }
.zahl b { display: block; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.zahl span { color: var(--gedaempft); font-size: .87rem; }
.hinweis { border: 2px solid var(--rosa); }
.hinweis.warn { border-color: #E2B865; }
.hinweis ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: 14px; overflow: hidden; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { background: var(--weiss); border-bottom: 2px solid var(--rosa); font-weight: 700; font-size: .85rem; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FDFAF6; }
td.zahl-r, th.zahl-r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 700; background: #FBF1EC; }

/* Etiketten */
.etikett { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--linie); white-space: nowrap; }
.s-angebot, .s-offen { background: #EEE; color: #555; }
.s-beauftragt, .s-angenommen { background: #E3E8F4; color: #2B3E6B; }
.s-druck, .s-in_arbeit, .s-werkstatt, .s-beim_hersteller { background: #F3E3F0; color: #6B2B5E; }
.s-glaeser_bestellt { background: var(--warn-grund); color: var(--warn); }
.s-glaeser_da { background: #E0F0F0; color: #1F5555; }
.s-abholbereit { background: var(--gut-grund); color: var(--salbei-dunkel); }
.s-abgeholt { background: #EEE; color: #777; }
.s-storniert { background: var(--fehler-grund); color: #7a2a2a; text-decoration: line-through; }
.s-entwurf { background: var(--warn-grund); color: var(--warn); }
.s-versendet { background: #E3E8F4; color: #2B3E6B; }
.s-geliefert { background: var(--gut-grund); color: var(--salbei-dunkel); }
.knapp { color: var(--rose); font-weight: 600; }
.gruen { background: var(--gut-grund); color: var(--salbei-dunkel); }

/* Formulare */
form.zeile { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
label { display: flex; flex-direction: column; font-size: .85rem; color: var(--gedaempft); gap: .2rem; }
label.haken { flex-direction: row; align-items: center; gap: .4rem; color: var(--tinte); font-size: .95rem; }
input, select, textarea { font: inherit; color: var(--tinte); border: 1px solid var(--sand); border-radius: 8px; padding: .45rem .6rem; background: var(--weiss); min-width: 0; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--rosa); outline-offset: 1px; }
textarea { min-height: 4.5rem; }
.felder { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.felder .breit { grid-column: 1 / -1; }
button, .knopf { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: .6rem 1.4rem; cursor: pointer;
  background: var(--tinte); color: var(--creme); text-decoration: none; display: inline-block; white-space: nowrap; }
button:hover, .knopf:hover { background: var(--rose); color: var(--creme); }
button.zweit, .knopf.zweit { background: transparent; color: var(--tinte); border: 1px solid currentColor; padding: calc(.6rem - 1px) calc(1.1rem - 1px); }
button.zweit:hover, .knopf.zweit:hover { background: var(--tinte); color: var(--creme); }
button.rosa, .knopf.rosa { background: var(--rosa); color: var(--tinte); }
button.rosa:hover, .knopf.rosa:hover { background: var(--rose); color: var(--creme); }
button.gefahr { background: var(--weiss); color: var(--rose); border: 1px solid var(--rose); }
button.gefahr:hover { background: var(--rose); color: var(--creme); }
button.mini { padding: .2rem .6rem; font-size: .8rem; }
.knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.reiter { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.reiter a { padding: .35rem .9rem; border-radius: 99px; text-decoration: none; color: var(--tinte); border: 1px solid var(--linie); background: var(--weiss); }
.reiter a.aktiv { background: var(--tinte); color: var(--creme); border-color: var(--tinte); }

/* Statusablauf */
.ablauf { display: flex; gap: 0; margin: 1rem 0; flex-wrap: wrap; }
.ablauf span { padding: .4rem .9rem .4rem 1.2rem; background: var(--linie); color: var(--gedaempft); font-size: .85rem;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); margin-right: -4px; }
.ablauf span:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-left: .9rem; }
.ablauf span.erledigt { background: var(--salbei); color: var(--tinte); }
.ablauf span.jetzt { background: var(--tinte); color: var(--creme); font-weight: 600; }

/* Refraktionstabelle */
table.rx { width: auto; }
table.rx td, table.rx th { text-align: center; padding: .35rem .6rem; font-variant-numeric: tabular-nums; }
table.rx input { width: 5.2rem; text-align: right; }
table.rx th:first-child, table.rx td:first-child { text-align: left; }

.zwei { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1250px) { .zwei { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .seitenkopf { padding: .5rem 16px; position: static; }
  .seitenkopf__logo img { width: 90px; }
  .menue { flex-basis: 100%; order: 3; }
  .seitenkopf__rechts { margin-left: auto; }
  .seitenkopf__rechts .zweit { display: none; }
  main { padding: 1rem 16px 3rem; }
  h1 { font-size: 1.9rem; }
  main .blatt { padding: 1rem; }
  main .blatt table { display: block; overflow-x: auto; }
}

/* Druckblätter */
.blatt { background: var(--weiss); max-width: 800px; margin: 0 auto; padding: 2rem 2.4rem; border: 1px solid var(--linie); }
.blatt table { border: 0; }
.blatt .briefkopf { display: flex; align-items: flex-end; gap: 1.2rem; border-bottom: 1px solid var(--linie); margin-bottom: 1.5rem; padding-bottom: .4rem; }
.blatt .briefkopf img { width: 160px; height: auto; }
.blatt .briefkopf .absender { border: 0; margin: 0; padding: 0; }
.blatt .absender { font-size: .8rem; color: var(--gedaempft); border-bottom: 1px solid var(--linie); padding-bottom: .3rem; margin-bottom: 1.5rem; }
.nur-bildschirm { margin-bottom: 1rem; }
@media print {
  body { display: block; background: #fff; }
  .seitenkopf, .nur-bildschirm, .meldung { display: none !important; }
  main { padding: 0; max-width: none; }
  .blatt { border: 0; padding: 0; max-width: none; }
}

/* Terminwoche */
.woche { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; align-items: start; }
@media (max-width: 1250px) { .woche { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .woche { grid-template-columns: minmax(0, 1fr); } }
.tag { padding: .8rem; }
.tag h2 { font-size: 1rem; margin: 0 0 .6rem; line-height: 1.25; }
.termin { border-left: 3px solid var(--salbei); padding: .4rem .5rem; margin-bottom: .5rem; background: var(--creme); }
.termin.abgesagt { border-left-color: var(--linie); color: var(--gedaempft); text-decoration-line: line-through; }
.termin .knoepfe { margin-top: .3rem; gap: .3rem; }
.zeiten { display: flex; flex-wrap: wrap; gap: .25rem; margin: .4rem 0 0; }
a.zeit { font-size: .78rem; padding: .15rem .35rem; border: 1px solid var(--linie); border-radius: 3px;
  text-decoration: none; font-variant-numeric: tabular-nums; }
a.zeit:hover { background: var(--salbei); }
table.schmal { width: auto; }
table.schmal input[type=time] { width: 7rem; }

/* Anmeldeseite */
body.anmeldeseite { display: block; background: var(--creme); }
body.anmeldeseite main { max-width: 26rem; margin: 4rem auto; padding: 0 16px; }
.anmeldekarte { text-align: center; padding: 2rem; }
.anmeldekarte h1 { font-size: 1.4rem; margin: .6rem 0 1.2rem; }
.anmeldekarte label { display: block; text-align: left; font-weight: 600; }
.anmeldekarte input { width: 100%; padding: .55rem; margin-top: .25rem; font: inherit;
  border: 1px solid var(--linie); border-radius: 3px; }
.anmeldekarte pre { text-align: left; background: var(--creme); padding: .6rem; overflow-x: auto; }
.meldung.spielwiese { border-left: 4px solid #c9a227; background: #fdf8e7; }
.abmelden { display: inline; }