/* Design 1 «Atelier» – warmes Papier, dunkle Tinte, Serifen-Titel.
   Passt zu Bäckerei, Feinkost, Wein, Blumen, Handgemachtem. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../assets/fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../../assets/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --hg: #f7f2ea; --flaeche: #efe7da; --karte: #fffdf9; --text: #231d17; --leise: #6f6457; --linie: #e2d7c6;
  --akzent: #2e4636; --akzent-text: #f7f2ea; --signal: #b4492a; --ok: #3c6e47;
  --schrift-titel: "Fraunces", Georgia, serif; --schrift-text: "Manrope", system-ui, sans-serif;
  --titel-gewicht: 500; --titel-abstand: -0.015em;
  --radius: 4px; --radius-klein: 3px; --radius-knopf: 3px;
  --bild-format: 4 / 5;
}

/* Titel mit etwas mehr Charakter */
.held-text h1 { font-weight: 400; line-height: 1.02; }
.vorzeile { color: var(--akzent); letter-spacing: .12em; }

/* Kopf: Name in Serifen, Navigation in Grossbuchstaben klein */
.marke-name { font-size: 27px; font-weight: 600; }
.navi-innen { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.navi-tel { text-transform: none; letter-spacing: 0; font-weight: 500; }
@media (max-width: 899px) { .navi-innen { font-size: 20px; text-transform: none; letter-spacing: 0; font-family: var(--schrift-titel); font-weight: 400; } }
.suche { border-radius: 3px; background: var(--karte); border-color: var(--linie); }
.leiste { background: var(--akzent); color: var(--akzent-text); letter-spacing: .02em; }

/* Startbild mit versetztem Rahmen */
.held-bild::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--akzent); border-radius: var(--radius); z-index: -1; }
.held-bild { z-index: 0; }
.held-schild { font-family: var(--schrift-titel); font-weight: 500; font-size: 17px; border-left: 3px solid var(--signal); }
@media (max-width: 899px) { .held-bild::before { inset: 10px -8px -10px 8px; } }

/* Kategorie-Kacheln: Text unten links, Serifen */
.kachel { aspect-ratio: 3 / 4; }
.kacheln { grid-template-columns: repeat(auto-fit, minmax(min(200px, 40%), 1fr)); gap: 12px; }
.kachel-text strong { font-size: 26px; font-weight: 400; }

/* Produktkarten: ruhig, Preis rechts neben dem Namen */
.karte-text { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; }
.karte-text h3 { font-family: var(--schrift-titel); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.karte-kurz { grid-column: 1 / -1; grid-row: 2; }
.karte-preis { grid-column: 2; grid-row: 1; white-space: nowrap; }
.karte-preis .altpreis { display: block; text-align: right; margin: 0; }
.marke-schild { border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.schnell button { border-radius: 3px; }
@media (max-width: 759px) { .karte-text { grid-template-columns: 1fr; } .karte-preis { grid-column: 1; grid-row: 3; } .karte-text h3 { font-size: 17px; } }

/* Abschnitte: Titel links, feine Linie darunter */
.abschnitt-kopf { border-bottom: 1px solid var(--linie); padding-bottom: 14px; }
.dienst { background: var(--akzent); color: var(--akzent-text); }
.dienst-punkt .sy { color: var(--akzent-text); opacity: .8; }
.dienst-punkt p { color: color-mix(in srgb, var(--akzent-text) 75%, transparent); }
.dienst-punkt h3 { font-weight: 400; font-size: 22px; }

.chip { border-radius: 3px; }
.pille span { border-radius: 3px; }
.wahl-karte { border-radius: 4px; }
.nr { border-radius: 3px; background: var(--akzent); color: var(--akzent-text); }
.summe-box { background: var(--karte); border: 1px solid var(--linie); }
.fuss { background: var(--text); color: var(--hg); }
.fuss a, .fuss p, .zeiten { color: color-mix(in srgb, var(--hg) 70%, transparent); }
.fuss a:hover { color: var(--hg); }
.fuss-unten { border-color: color-mix(in srgb, var(--hg) 18%, transparent); color: color-mix(in srgb, var(--hg) 60%, transparent); }
.zahlarten-klein span { border-color: color-mix(in srgb, var(--hg) 25%, transparent); }

@media (max-width: 599px) { .kachel-text strong { font-size: 19px; line-height: 1.15; } .kachel-text { left: 12px; right: 12px; bottom: 10px; } }