/* ==================================================================
   Platzhalter – Produktseite und Bestellablauf (seit 1.10.2026)

   Schwarz-weiss wie Logo und Reservierungsbuch. Farbe kommt nur aus
   den Bildern der Restaurant-Designs. Schriften liegen auf dem eigenen
   Server (Urbanist fuer Ueberschriften, Inter fuer Text) - nichts von
   Google, keine Besucher-IP an Dritte.
   Die Rechtstexte nutzen weiter assets/stil.css.
   ================================================================== */

@font-face { font-family: "PH Urbanist"; src: url("schriften/urbanist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "PH Inter"; src: url("schriften/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --schwarz: #0A0A0A;
  --tinte:   #161616;
  --grau:    #5F5F5F;
  --grau-2:  #8A8A8A;
  --linie:   #E6E6E6;
  --flaeche: #F5F5F4;
  --weiss:   #FFFFFF;
  --gut:     #1E8A57;
  --titel: "PH Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text:  "PH Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rand: clamp(18px, 5vw, 56px);
  --breite: 1180px;
  --rund: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0; background: var(--weiss); color: var(--tinte);
  font: 17px/1.62 var(--text); -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; border-radius: 4px; }
.dunkel :focus-visible { outline-color: var(--weiss); }
[hidden] { display: none !important; }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.schmal { max-width: 760px; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 12px; top: 12px; z-index: 100; background: var(--weiss); padding: 10px 16px; border-radius: 8px; }

h1, h2, h3, h4 { font-family: var(--titel); font-weight: 650; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.22rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.vorspann { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--grau); max-width: 60ch; }
.dunkel .vorspann { color: #B8B8B8; }
.marke-klein {
  display: inline-block; margin-bottom: 14px;
  font: 600 .74rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--grau);
}
.dunkel .marke-klein { color: #A0A0A0; }
.klein { font-size: .88rem; color: var(--grau); }
.dunkel .klein { color: #A0A0A0; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; border: 1.5px solid var(--schwarz);
  background: var(--schwarz); color: var(--weiss);
  font: 600 .98rem/1.2 var(--text); text-decoration: none; cursor: pointer;
  transition: transform .12s, background .12s, color .12s;
}
.button:hover { transform: translateY(-1px); background: #2A2A2A; }
.button.hell { background: transparent; color: var(--schwarz); }
.button.hell:hover { background: var(--flaeche); }
.dunkel .button { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.dunkel .button:hover { background: #E8E8E8; }
.dunkel .button.hell { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,.4); }
.dunkel .button.hell:hover { background: rgba(255,255,255,.08); }
.button.breit { width: 100%; }
.button.gross { padding: 17px 28px; font-size: 1.05rem; }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 24px; height: 70px; }
/* Platzhalter-Logo: Zeichen als SVG, Schriftzug als echter Text (bleibt auf
   100-%-Monitoren scharf). Masse am Original-SVG ausgemessen. */
.ph-logo { --h: 30px; display: inline-flex; align-items: flex-start; height: var(--h); gap: calc(var(--h) * .28); color: inherit; line-height: 1; }
.ph-logo svg { height: var(--h); width: var(--h); flex: none; display: block; }
.ph-logo > span { font-family: var(--titel); font-weight: 600; font-size: calc(var(--h) * .779); line-height: 1; margin-top: calc(var(--h) * .046); letter-spacing: 0; white-space: nowrap; }
.kopf-logo { color: var(--schwarz); text-decoration: none; display: inline-flex; }
.fuss-logo { color: #fff; margin-bottom: 14px; }
.kopf-navi { display: flex; gap: 26px; margin-left: auto; font-size: .93rem; font-weight: 500; }
.kopf-navi a { text-decoration: none; color: var(--grau); }
.kopf-navi a:hover { color: var(--schwarz); }
.kopf .button { padding: 10px 18px; font-size: .9rem; }
@media (max-width: 860px) { .kopf-navi { display: none; } .kopf .button { margin-left: auto; } }

/* ---------- Abschnitte ---------- */
.teil { padding: clamp(64px, 10vw, 120px) 0; }
.teil.grau { background: var(--flaeche); }
.dunkel { background: var(--schwarz); color: var(--weiss); }
.teil-kopf { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.teil-kopf.mitte { margin-left: auto; margin-right: auto; text-align: center; }
.teil-kopf.mitte .vorspann { margin-left: auto; margin-right: auto; }

/* ---------- Start ---------- */
.start { padding: clamp(40px, 7vw, 90px) 0 clamp(56px, 8vw, 100px); overflow: hidden; }
.start .innen { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .start .innen { grid-template-columns: 1.08fr .92fr; gap: 64px; } }
.start-text .vorspann { margin-bottom: 30px; }
.start-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.vertrauen { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; list-style: none; font-size: .9rem; color: var(--grau); }
.vertrauen li { display: flex; align-items: center; gap: 7px; }
.vertrauen li::before, .haken li::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--schwarz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.dunkel .haken li::before { background-color: var(--weiss); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Handy mit dem Reservierungsbuch - nachgebaut, damit es scharf bleibt */
.handy-buehne { position: relative; display: flex; justify-content: center; }
.handy-buehne::before {
  content: ""; position: absolute; inset: 8% -10% 4%; border-radius: 40px;
  background: radial-gradient(60% 60% at 50% 45%, #EDEDEC 0%, transparent 70%);
}
.handy {
  position: relative; width: min(330px, 86vw); border-radius: 46px; padding: 12px;
  background: #121212; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45), inset 0 0 0 1.5px #2a2a2a;
}
.handy-schirm { border-radius: 36px; overflow: hidden; background: #fff; font-size: 12px; line-height: 1.35; }
.hs-oben { padding: 22px 16px 10px; }
.hs-kopf { display: flex; justify-content: space-between; align-items: flex-end; }
.hs-sub { color: #8a8a8a; font-size: 10px; }
.hs-titel { font: 700 17px/1.1 var(--titel); letter-spacing: -.02em; }
.hs-logo { color: #0A0A0A; padding-bottom: 2px; }
.hs-zeile { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.hs-pfeil { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F2F2F2; font-size: 13px; line-height: 1; padding-bottom: 1px; }
.hs-datum { font-weight: 700; font-size: 14px; }
.hs-datum small { font-weight: 500; font-size: 10px; color: #8a8a8a; margin-left: 2px; }
.hs-kal { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: #0A0A0A; color: #fff; border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 600; }
.hs-kal svg { width: 11px; height: 11px; }
.hs-zahlen { display: flex; gap: 10px; margin-top: 8px; font-size: 10.5px; color: #6b6b6b; }
.hs-zahlen b { color: #111; }
.hs-zahlen .an { color: var(--gut); }
.hs-liste { padding: 4px 12px 18px; background: #fff; display: grid; gap: 7px; }
.hs-notiz { font-size: 10px; padding: 5px 8px; border-radius: 8px; background: #FFF8D6; border: 1px solid #EBD98A; display: flex; justify-content: space-between; }
.hs-notiz span { color: #7A6A1E; }
.hs-stunde { font-size: 10px; color: #9a9a9a; margin: 2px 0 -3px 2px; }
.hs-karte { background: #F6F6F6; border-left: 3px solid #9a9a9a; border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(16,16,16,.05); }
.hs-karte.da { border-left-color: var(--gut); background: #E7F2EB; }
.hs-k1 { display: flex; gap: 8px; align-items: center; }
.hs-k1 b { font-size: 12px; }
.hs-k1 > span:nth-of-type(1) { font-weight: 600; flex: 1; min-width: 0; }
.hs-k1 .ok { font-style: normal; color: var(--gut); font-weight: 700; }
.hs-k1 .p { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: #111; font-size: 11px; }
.hs-person { width: 9px; height: 9px; background: #8a8a8a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.hs-k2 { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.hs-tag { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: #0A0A0A; color: #fff; }
.hs-notiz-k { margin-top: 6px; font-size: 10px; padding: 4px 7px; border-radius: 6px; background: #EDEDED; color: #333; }
.hs-knoepfe { display: flex; gap: 4px; margin-top: 7px; align-items: center; }
.hs-knoepfe .rechts { flex: 1; }
.hs-knoepfe span { font-size: 9.5px; padding: 4px 7px; border-radius: 7px; border: 1px solid #cfe8da; color: var(--gut); background: #fff; }
.hs-knoepfe span.rot { border-color: #efc9c4; color: #b13a2c; }
.hs-knoepfe span.tel, .hs-knoepfe span.ic { display: grid; place-items: center; width: 22px; height: 20px; padding: 0; }
.hs-knoepfe span.tel { background: var(--gut); color: #fff; border-color: var(--gut); }
.hs-knoepfe span.ic { border-color: #E2E2E2; color: #333; }
.hs-knoepfe svg { width: 11px; height: 11px; }
.schwebe {
  position: absolute; background: #fff; border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.28); font-size: .82rem; line-height: 1.35;
  display: flex; align-items: center; gap: 10px; animation: schweben 6s ease-in-out infinite;
}
.schwebe b { display: block; font-size: .86rem; }
.schwebe small { color: var(--grau); }
.schwebe .punkt { width: 30px; height: 30px; border-radius: 50%; background: var(--schwarz); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.schwebe.eins { left: -2%; top: 18%; }
.schwebe.zwei { right: -3%; bottom: 16%; animation-delay: -3s; }
@keyframes schweben { 50% { transform: translateY(-8px); } }
@media (max-width: 560px) { .schwebe { display: none; } }

/* ---------- Kennzahlen-Leiste ---------- */
.leiste-fakten { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.leiste-fakten ul { list-style: none; margin: 0 auto; padding: 22px var(--rand); display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .leiste-fakten ul { grid-template-columns: repeat(4, 1fr); } }
.leiste-fakten b { display: block; font: 650 1.35rem/1.2 var(--titel); letter-spacing: -.02em; }
.leiste-fakten span { font-size: .88rem; color: var(--grau); }

/* ---------- Demo ---------- */
.demo-rahmen { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .demo-rahmen { grid-template-columns: 340px 1fr; gap: 48px; } }
.demo-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.demo-wahl button {
  font: 600 .88rem/1 var(--text); padding: 10px 15px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--linie); background: var(--weiss); color: var(--tinte);
}
.demo-wahl button[aria-pressed="true"] { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.demo-erklaerung { min-height: 4.8em; color: var(--grau); font-size: .95rem; }
.browser { border-radius: 14px; overflow: hidden; border: 1px solid #DADADA; box-shadow: 0 30px 70px -40px rgba(0,0,0,.45); background: #fff; }
.browser-leiste { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #F1F1F0; border-bottom: 1px solid #E2E2E2; }
.browser-leiste i { width: 11px; height: 11px; border-radius: 50%; background: #D5D5D5; }
.browser-adresse { margin-left: 12px; flex: 1; max-width: 360px; background: #fff; border-radius: 7px; padding: 4px 10px; font-size: .78rem; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser iframe { display: block; width: 100%; height: clamp(520px, 72vh, 720px); border: 0; background: #fff; }

/* ---------- Kacheln (Funktionen) ---------- */
.kacheln { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kacheln.drei-spalten { grid-template-columns: repeat(3, 1fr); } }
.kachel { padding: 26px; border-radius: var(--rund); background: var(--weiss); border: 1px solid var(--linie); }
.grau .kachel { border-color: transparent; }
.dunkel .kachel { background: #161616; border-color: #262626; }
.kachel p { margin: 0; color: var(--grau); font-size: .96rem; }
.dunkel .kachel p { color: #A8A8A8; }
.zeichen { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--flaeche); }
.grau .zeichen { background: var(--weiss); }
.dunkel .zeichen { background: #262626; }
.zeichen svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Problem -> Loesung */
.vergleich { display: grid; gap: 16px; }
@media (min-width: 860px) { .vergleich { grid-template-columns: repeat(3, 1fr); } }
.vergleich .kachel h3 { display: flex; gap: 10px; align-items: baseline; }
.vergleich .vorher { color: var(--grau-2); text-decoration: line-through; text-decoration-thickness: 1px; font-size: .92rem; margin-bottom: 8px !important; }

/* ---------- Zwei Spalten mit Bild ---------- */
.zweispaltig { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .zweispaltig { grid-template-columns: 1fr 1fr; gap: 72px; } .zweispaltig.umgekehrt > :first-child { order: 2; } }
.haken { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.haken li { display: flex; gap: 12px; align-items: flex-start; }
.haken li::before { margin-top: 4px; }

/* Google-Karte (nachgebaut) */
.google-karte { max-width: 420px; margin: 0 auto; background: #fff; color: #202124; border-radius: 18px; box-shadow: 0 30px 70px -36px rgba(0,0,0,.5); overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
.gk-bild { height: 150px; background: url("bilder/design-nero.jpg") center/cover; }
.gk-inhalt { padding: 16px 18px 18px; }
.gk-name { font-size: 22px; margin: 0 0 4px; }
.gk-meta { font-size: 13px; color: #5f6368; margin-bottom: 14px; }
.gk-meta .offen { color: #188038; font-weight: 600; }
.gk-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.gk-buttons span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid #dadce0; color: #1a73e8; font-size: 13.5px; font-weight: 600; }
.gk-buttons span.haupt { background: #1a73e8; color: #fff; border-color: #1a73e8; box-shadow: 0 0 0 4px rgba(26,115,232,.18); }
.gk-hinweis { font-size: .8rem; color: var(--grau-2); text-align: center; margin-top: 12px; }

/* Code-Zeile */
.code {
  background: #111; color: #EDEDED; border-radius: 14px; padding: 18px 20px;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre;
}
.code .s { color: #9FD9B5; } .code .a { color: #B4C6FF; }
.stile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.stile span { padding: 7px 13px; border-radius: 999px; background: var(--flaeche); font-size: .86rem; font-weight: 500; }
.dunkel .stile span { background: #222; color: #ddd; }

/* ---------- Homepage-Designs ---------- */
.designs { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 760px) { .designs { grid-template-columns: repeat(3, 1fr); } }
.design { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--linie); }
.design img { aspect-ratio: 16/10; height: auto; object-fit: cover; object-position: top; width: 100%; transition: transform .4s; }
.design:hover img { transform: scale(1.03); }
.design figcaption { padding: 12px 16px; font-size: .9rem; display: flex; justify-content: space-between; color: var(--grau); }
.design figcaption b { color: var(--tinte); }
.pflege { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 700px) { .pflege { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pflege { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Preise ---------- */
.zahlweise { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--flaeche); gap: 4px; margin: 0 auto 36px; }
.zahlweise button { font: 600 .92rem/1 var(--text); padding: 11px 18px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; color: var(--grau); }
.zahlweise button[aria-pressed="true"] { background: var(--schwarz); color: var(--weiss); }
.zahlweise .geschenk { font-weight: 500; opacity: .75; }
.preise { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 980px) { .preise { grid-template-columns: repeat(3, 1fr); } }
.preis {
  position: relative; display: flex; flex-direction: column;
  padding: 32px 28px 28px; border-radius: 22px; border: 1px solid var(--linie); background: var(--weiss);
}
.preis.empfohlen { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); box-shadow: 0 30px 70px -36px rgba(0,0,0,.6); }
@media (min-width: 980px) { .preis.empfohlen { transform: translateY(-12px); } }
.preis-schild { position: absolute; top: -13px; left: 28px; background: var(--weiss); color: var(--schwarz); border: 1.5px solid var(--schwarz); border-radius: 999px; padding: 4px 12px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
.preis h3 { font-size: 1.35rem; margin-bottom: 4px; }
.preis-fuer { color: var(--grau); font-size: .93rem; margin-bottom: 22px; min-height: 2.9em; }
.empfohlen .preis-fuer, .empfohlen .klein { color: #B5B5B5; }
.preis-betrag { display: flex; align-items: baseline; gap: 8px; }
.preis-betrag b { font: 700 3rem/1 var(--titel); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.preis-betrag span { color: var(--grau); font-size: .95rem; }
.empfohlen .preis-betrag span { color: #B5B5B5; }
.preis-neben { font-size: .87rem; color: var(--grau); margin: 8px 0 0; min-height: 1.4em; }
.empfohlen .preis-neben { color: #C9C9C9; }
.preis-einmal { margin: 16px 0 20px; padding: 12px 14px; border-radius: 12px; background: var(--flaeche); font-size: .9rem; }
.empfohlen .preis-einmal { background: #1D1D1D; }
.preis-einmal s { color: var(--grau-2); margin-right: 6px; }
.preis .haken { margin: 0 0 26px; gap: 10px; font-size: .95rem; flex: 1; }
.preis .haken li::before { margin-top: 3px; }
.empfohlen .haken li::before { background-color: var(--weiss); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.empfohlen .button { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.empfohlen .button:hover { background: #E8E8E8; }
.ersparnis { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 8px; background: #fff; color: var(--schwarz); font-size: .82rem; font-weight: 700; }
.preis-hinweis { max-width: 760px; margin: 36px auto 0; text-align: center; font-size: .8rem; color: var(--grau); }
/* Angebot (Preis in der Verwaltung mit Enddatum): Hinweis oben rechts, alter Preis durchgestrichen */
.preis-angebot { position: absolute; top: -13px; right: 28px; background: #B4261A; color: #fff; border-radius: 999px; padding: 5px 12px; font-size: .76rem; font-weight: 700; letter-spacing: .02em; }
.preis-alt { color: var(--grau-2); font: 500 1.35rem/1 var(--titel); align-self: center; }
.empfohlen .preis-alt { color: #8C8C8C; }
.mini-preis s { color: var(--grau-2); font-weight: 500; font-size: .7em; }
.mini-angebot { justify-self: start; margin-top: 6px; background: #B4261A; color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .76rem; font-weight: 700; }

/* ---------- Ablauf ---------- */
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 860px) { .ablauf { grid-template-columns: repeat(4, 1fr); } }
.ablauf li { counter-increment: s; padding: 26px; border-radius: var(--rund); background: var(--weiss); }
.ablauf li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--schwarz); color: #fff; font: 700 1rem/1 var(--titel); margin-bottom: 16px; }
.ablauf p { margin: 0; color: var(--grau); font-size: .95rem; }

/* ---------- Fragen ---------- */
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 600 1.08rem/1.4 var(--titel); letter-spacing: -.01em; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 var(--text); color: var(--grau); transition: transform .2s; }
.fragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragen details p { color: var(--grau); margin: -6px 0 22px; padding-right: 30px; }

/* ---------- Schluss und Fuss ---------- */
.schluss { text-align: center; }
.schluss .start-buttons { justify-content: center; margin-top: 30px; }
.fuss { background: var(--schwarz); color: #B5B5B5; padding: 56px 0 40px; font-size: .9rem; }
.fuss .innen { display: grid; gap: 30px; }
@media (min-width: 600px) and (max-width: 859px) { .fuss .innen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .fuss .innen { grid-template-columns: 1.3fr .8fr 1.3fr .9fr; } }

.fuss h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.fuss a { color: #B5B5B5; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss-unten { grid-column: 1 / -1; border-top: 1px solid #262626; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: .84rem; }

/* Einblenden beim Scrollen - ohne JavaScript bleibt alles sichtbar */
.js .auftauchen { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .auftauchen.da { opacity: 1; transform: none; }

/* ==================================================================
   Bestellablauf (bestellen.php)
   ================================================================== */
.bestellen { background: var(--flaeche); min-height: 100vh; }
.b-rahmen { display: grid; gap: 28px; padding: 34px 0 80px; align-items: start; }
@media (min-width: 1000px) { .b-rahmen { grid-template-columns: 1fr 360px; gap: 40px; } }
.b-schritte { list-style: none; padding: 0; margin: 0 0 22px; display: flex; gap: 6px; flex-wrap: wrap; }
.b-schritte li { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--grau-2); padding: 7px 12px 7px 7px; border-radius: 999px; background: var(--weiss); }
.b-schritte li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche); font-size: .78rem; }
.b-schritte li.aktiv { color: var(--schwarz); }
.b-schritte li.aktiv span { background: var(--schwarz); color: #fff; }
.b-schritte li.fertig span { background: var(--gut); color: #fff; }
.b-karte { background: var(--weiss); border-radius: 22px; padding: clamp(22px, 4vw, 40px); }
.b-karte h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.b-karte h2 { font-size: 1.3rem; margin-top: 28px; }
.b-teil { border: 0; padding: 0; margin: 0; min-width: 0; }
.js .b-teil:not(.aktiv) { display: none; }
.b-teil legend { padding: 0; }
.produkte { display: grid; gap: 12px; margin: 18px 0 8px; }
@media (min-width: 760px) { .produkte { grid-template-columns: repeat(3, 1fr); } }
.produkt { position: relative; display: block; cursor: pointer; padding: 20px 18px; border: 1.5px solid var(--linie); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.produkt input { position: absolute; opacity: 0; pointer-events: none; }
.produkt:has(input:checked) { border-color: var(--schwarz); box-shadow: 0 0 0 1.5px var(--schwarz); }
.produkt:has(input:focus-visible) { outline: 2px solid var(--schwarz); outline-offset: 3px; }
.produkt b { display: block; font: 650 1.08rem/1.25 var(--titel); margin-bottom: 4px; }
.produkt .p-preis { font-weight: 700; font-size: 1.05rem; }
.produkt .p-angebot { display: block; margin-top: 4px; color: #B4261A; font-size: .78rem; font-weight: 700; }
.produkt .p-text { display: block; color: var(--grau); font-size: .86rem; margin-top: 6px; }
.produkt .p-schild { position: absolute; top: -10px; right: 12px; background: var(--schwarz); color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.weisen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.weise { display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 13px 16px; border: 1.5px solid var(--linie); border-radius: 14px; font-size: .95rem; }
.weise:has(input:checked) { border-color: var(--schwarz); }
.weise input { accent-color: var(--schwarz); width: 18px; height: 18px; margin: 0; }
.b-feld { margin-bottom: 16px; }
.b-feld label, .b-label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 6px; }
.b-feld .opt { font-weight: 400; color: var(--grau-2); }
.b-feld input, .b-feld textarea, .b-feld select {
  width: 100%; font: inherit; font-size: 1rem; padding: 13px 14px; border-radius: 12px;
  border: 1.5px solid var(--linie); background: #fff; color: var(--tinte);
}
.b-feld input:focus, .b-feld textarea:focus { outline: none; border-color: var(--schwarz); }
.b-feld.fehlt input, .b-feld.fehlt textarea { border-color: #C0392B; }
.b-fehler { color: #B3261E; font-size: .84rem; margin: 6px 0 0; }
.b-hinweis { color: var(--grau); font-size: .82rem; margin: 6px 0 0; }
.b-paar { display: grid; gap: 0 14px; }
@media (min-width: 620px) { .b-paar { grid-template-columns: 1fr 1fr; } .b-paar.plz { grid-template-columns: 140px 1fr; } }
#iban { font-variant-numeric: tabular-nums; letter-spacing: .06em; text-transform: uppercase; }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--grau); margin-bottom: 14px; cursor: pointer; }
.zustimmung input { flex: none; width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--schwarz); }
.zustimmung a { color: var(--tinte); }
.b-weiter { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.b-zurueck { background: none; border: 0; font: 600 .95rem var(--text); color: var(--grau); cursor: pointer; padding: 10px 4px; }
.b-zurueck:hover { color: var(--schwarz); }
.b-sicher { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--grau); margin-top: 14px; }
.zusammen { position: sticky; top: 90px; background: var(--weiss); border-radius: 22px; padding: 26px; }
.zusammen h2 { font-size: 1.1rem; margin-bottom: 14px; }
.z-zeile { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .93rem; }
.z-zeile span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.z-zeile.klein { color: var(--grau); font-size: .83rem; padding-top: 0; }
.z-zeile.klein span:last-child { font-weight: 400; }
.z-trenn { border-top: 1px solid var(--linie); margin: 10px 0; }
.z-liste { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: .84rem; color: var(--grau); }
.pruefen-tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 6px 0 22px; }
.pruefen-tabelle th { text-align: left; font-weight: 500; color: var(--grau); padding: 8px 14px 8px 0; vertical-align: top; width: 38%; }
.pruefen-tabelle td { padding: 8px 0; border-bottom: 1px solid var(--flaeche); }
.danke { text-align: center; padding: clamp(30px, 6vw, 60px) clamp(16px, 4vw, 40px); }
.danke-haken { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--gut); display: grid; place-items: center; }
.danke-liste { text-align: left; max-width: 520px; margin: 24px auto; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: d; }
.danke-liste li { counter-increment: d; display: flex; gap: 12px; }
.danke-liste li::before { content: counter(d); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--schwarz); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Grid-Spalten duerfen nicht ueber den Bildschirm wachsen (Code-Zeile, Schritte) */
.zweispaltig > *, .demo-rahmen > *, .b-rahmen > *, .start .innen > * { min-width: 0; }
.z-zeile span:only-child { white-space: normal; font-weight: 700; }

/* Live-Demo: Text oben, Fenster ueber die ganze Breite (seit 1.10.2026) */
.demo-rahmen { grid-template-columns: 1fr !important; gap: 34px; }
.demo-text { max-width: 820px; margin: 0 auto; text-align: center; }
.demo-text .vorspann { margin-left: auto; margin-right: auto; }
.demo-text .demo-wahl { justify-content: center; }
.demo-text .demo-erklaerung { min-height: 3.2em; max-width: 620px; margin: 0 auto 18px; }
.demo-auf { margin: 0; }
.browser iframe { height: clamp(560px, 82vh, 860px); }

/* Groessere Ueberschriften (Wunsch 1.10.2026) */
h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h3 { font-size: 1.42rem; }
.preis h3 { font-size: 1.6rem; }
.b-karte h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.b-karte h2 { font-size: 1.5rem; }
.fragen summary { font-size: 1.22rem; }
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 400px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } }

/* Kanaele fuer den Buchungslink: Haken = eingerichtet/empfohlen, TikTok ohne Haken */
.kanaele { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.kanaele li { display: grid; grid-template-columns: 16px 1fr; column-gap: 12px; align-items: start; }
.kanaele li::before {
  content: ""; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%;
  background: var(--schwarz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.kanaele li.ohne::before { background: none; }
.kanaele li.ohne { color: var(--grau); }
.kanaele b { display: block; font-weight: 600; }
.kanaele span { color: var(--grau); font-size: .95rem; }
.kanaele b, .kanaele span { grid-column: 2; }

/* Einbau-Beispiel: angedeutete Kunden-Website mit dem Platzhalter-Button */
.einbau-bild { border-radius: 14px; overflow: hidden; border: 1px solid #DADADA; background: #fff; box-shadow: 0 30px 70px -40px rgba(0,0,0,.45); }
.eb-leiste { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #F1F1F0; border-bottom: 1px solid #E2E2E2; }
.eb-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #D5D5D5; }
.eb-leiste span { margin-left: 10px; font-size: .76rem; color: var(--grau); background: #fff; border-radius: 6px; padding: 3px 10px; }
.eb-seite { position: relative; padding: 18px 22px 92px; min-height: 300px; }
.eb-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.eb-nav b { font: 700 1rem var(--titel); margin-right: auto; color: #8a5a3c; }
.eb-nav span { width: 46px; height: 7px; border-radius: 4px; background: #E9E4DF; }
.eb-titel { width: 62%; height: 22px; border-radius: 6px; background: #E3DCD5; margin-bottom: 14px; }
.eb-zeile { width: 88%; height: 9px; border-radius: 5px; background: #EFEBE7; margin-bottom: 9px; }
.eb-zeile.kurz { width: 54%; }
.eb-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.eb-kacheln span { height: 70px; border-radius: 10px; background: linear-gradient(135deg, #EDE6DF, #E1D8CF); }
.eb-button {
  position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 11px; border-radius: 999px; background: var(--schwarz); color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 12px 30px rgba(0,0,0,.3); font-size: .9rem; line-height: 1.2;
  animation: schweben 6s ease-in-out infinite;
}
.eb-button b { display: block; font-weight: 600; }
.eb-button small { display: block; font-size: .74rem; opacity: .85; }
.eb-p { width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.eb-p svg { width: 28px; height: 28px; }

/* SEO: Die H1 traegt das Keyword (klein, wie die Zeile vorher), der Slogan bleibt gross */
.start-h1 { font-family: var(--text); font-size: .74rem; font-weight: 600; line-height: 1; letter-spacing: .16em; margin: 0 0 14px; }
.slogan { font-family: var(--titel); font-weight: 650; letter-spacing: -.03em; line-height: 1.12; font-size: clamp(2.6rem, 5.6vw, 4.4rem); margin: 0 0 .5em; color: var(--tinte); }
@media (max-width: 400px) { .slogan { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } }
/* ---------- Unterseiten (Landingpages / Ratgeber, _bausteine.php) ---------- */
.krumen { padding-top: 22px; font-size: .84rem; color: var(--grau-2); display: flex; flex-wrap: wrap; gap: 6px; }
.krumen a { color: var(--grau); text-decoration: none; padding: 3px 0; }
.krumen a:hover { color: var(--schwarz); text-decoration: underline; }
.u-start { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.u-start .innen { display: grid; gap: 44px; align-items: center; }
.u-start .innen > * { min-width: 0; }
@media (min-width: 960px) { .u-start-zwei { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.u-start h1 { margin: 14px 0 22px; }
.u-start .vorspann { margin-bottom: 30px; }
.u-bild { min-width: 0; }
.fliesstext p { margin: 0 0 1.1em; max-width: 68ch; }
.fliesstext p:last-child { margin-bottom: 0; }
.fliesstext a, .fragen a { color: inherit; }
.gross-liste { font-size: 1.05rem; gap: 16px; margin-top: 0; }
.gross-liste li span { min-width: 0; }
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--weiss); }
.vergleich-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.vergleich-tabelle th, .vergleich-tabelle td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.vergleich-tabelle thead th { font-family: var(--titel); font-weight: 600; background: var(--flaeche); }
.vergleich-tabelle tbody tr:last-child > * { border-bottom: 0; }
.vergleich-tabelle tbody th { font-weight: 600; width: 34%; }
.mini-preise { display: grid; gap: 14px; }
@media (min-width: 760px) { .mini-preise { grid-template-columns: repeat(3, 1fr); } }
.mini-preis { display: grid; gap: 4px; padding: 24px; border-radius: var(--rund); border: 1px solid var(--linie); background: var(--weiss); color: var(--tinte); text-decoration: none; transition: border-color .15s, transform .15s; }
.mini-preis:hover { border-color: var(--schwarz); transform: translateY(-2px); }
.grau .mini-preis { border-color: transparent; }
.mini-preis span { font-family: var(--titel); font-weight: 600; font-size: 1.15rem; }
.mini-preis b { font-family: var(--titel); font-size: 2rem; font-weight: 700; line-height: 1.2; }
.mini-preis b small { font-size: .95rem; font-weight: 500; color: var(--grau); }
.mini-preis em { font-style: normal; font-size: .88rem; color: var(--grau); }
.mini-preis.empfohlen { background: var(--schwarz); color: var(--weiss); border-color: var(--schwarz); }
.mini-preis.empfohlen b small, .mini-preis.empfohlen em { color: #B5B5B5; }
.mini-preis i { font-style: normal; font-size: .9rem; line-height: 1.45; color: var(--grau); margin-bottom: 6px; }
.mini-preis.empfohlen i { color: #B5B5B5; }
/* Titel immer zweizeilig hoch, damit die Preise nebeneinander auf einer Linie stehen */
@media (min-width: 760px) { .mini-preis span { line-height: 1.35; min-height: 2.7em; } }
.verwandt .teil-kopf { margin-bottom: 18px; }
.verwandt-liste { display: grid; gap: 12px; }
@media (min-width: 700px) { .verwandt-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .verwandt-liste { grid-template-columns: repeat(3, 1fr); } }
.verwandt-liste a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--weiss); color: var(--tinte); text-decoration: none; font-weight: 600; transition: transform .15s; }
.verwandt-liste a:hover { transform: translateY(-2px); }
.verwandt-liste .zeichen { flex: none; margin: 0; }
.u-fakt { display: grid; gap: 12px; }
.u-fakt div { padding: 22px 24px; border-radius: var(--rund); background: var(--flaeche); }
.u-fakt b { display: block; font-family: var(--titel); font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.1; color: var(--schwarz); }
.u-fakt span { color: var(--grau); font-size: .95rem; }
/* "Homepage + Reservierungssystem" bricht in zwei Zeilen - alle Kartentitel gleich hoch, damit die Preise auf einer Linie stehen */
@media (min-width: 980px) { .preis h3 { min-height: 2.5em; line-height: 1.25; display: flex; align-items: flex-end; } }
/* Lange Button-Texte ("Homepage + Reservierungssystem bestellen") auf schmalen Handys kompakt umbrechen */
@media (max-width: 480px) { .button.gross { padding: 14px 20px; font-size: 1rem; line-height: 1.3; text-align: center; } }
.schluss .start-buttons.schluss-tool { margin-top: 0; }
/* Schluss: drei Buttons untereinander, gleich breit */
.schluss .start-buttons { flex-direction: column; align-items: center; margin-bottom: 12px; }
.schluss .start-buttons .button { width: min(100%, 420px); }
.danke-unterlagen { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: .95rem; }
.danke-unterlagen li { display: list-item; counter-increment: none; }
.danke-unterlagen li::before { content: none; }
/* Breite Vergleichstabellen (5 Spalten) */
.vergleich-tabelle:has(thead th:nth-child(5)) { min-width: 860px; }
.vergleich-tabelle:has(thead th:nth-child(5)) tbody th { width: auto; white-space: nowrap; }
/* Querverweise zu den Unterseiten */
.mehr-link { margin: 16px 0 0; font-weight: 600; }
.mehr-link a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.mehr-link a:hover { text-decoration-thickness: 2.5px; }
.teil-kopf.mitte .mehr-link { text-align: center; }
/* Downloads (Reservierungsbuch-Vorlage) */
.downloads { display: grid; gap: 14px; }
@media (min-width: 760px) { .downloads { grid-template-columns: 1fr 1fr; } }
.download { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--rund); background: var(--weiss); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; transition: border-color .15s, transform .15s; }
.download:hover { border-color: var(--schwarz); transform: translateY(-2px); }
.download .zeichen { margin: 0; flex: none; }
.download span { display: grid; gap: 2px; min-width: 0; }
.download b { font-family: var(--titel); font-size: 1.12rem; }
.download small { color: var(--grau); font-size: .88rem; }
.grau .download { border-color: transparent; }
@media (min-width: 960px) { .u-start-zwei h1 { font-size: clamp(2.4rem, 4.2vw, 3.7rem); } }
@media (max-width: 480px) { h1, h2 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; } }
@media (max-width: 480px) { .u-start h1 { font-size: 9.4vw; } h2 { font-size: 8.4vw; } }

/* ---------- Weicher Seitenwechsel (View Transitions, wie hauptstadt-medien.de) ----------
   Alte Seite blendet aus, neue gleitet weich herein; feste Leisten bleiben stehen.
   Browser ohne Unterstuetzung wechseln einfach normal. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms ease-out both seite-raus; }
::view-transition-new(root) { animation: 220ms ease-in both seite-rein; }
@keyframes seite-raus { to { opacity: 0; } }
@keyframes seite-rein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}.kopf { view-transition-name: ph-kopf; }

/* ---------- Kopf: Anmelden + Hamburger-Menue (unter 860 px) ---------- */
.kopf-login { display: inline-flex; align-items: center; gap: 7px; color: var(--grau); text-decoration: none; font-size: .93rem; font-weight: 500; white-space: nowrap; }
.kopf-login svg { width: 18px; height: 18px; }
.kopf-login:hover { color: var(--schwarz); }
.kopf-menue-knopf, .ph-schleier, .ph-menue { display: none; }
@media (max-width: 860px) {
  .kopf .innen { gap: 10px; height: 62px; }
  .kopf-login { display: none; }
  .kopf .button { margin-left: auto; padding: 9px 14px; font-size: .86rem; }
  .kopf-menue-knopf { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 2px 8px 8px; border: 0; background: transparent;
    font: 600 .92rem var(--text); color: var(--schwarz); cursor: pointer; }
  .kopf-menue-knopf svg { width: 21px; height: 21px; }
  .kopf-menue-knopf:active { opacity: .6; }
  .ph-schleier { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(10,10,10,.42); backdrop-filter: blur(2px); animation: ph-schleier .18s ease-out; }
  .ph-schleier[hidden] { display: none; }
  .ph-menue { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(88vw, 360px);
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--weiss); box-shadow: -8px 0 40px rgba(0,0,0,.18);
    overflow-y: auto; overscroll-behavior: contain; transform: translateX(104%); visibility: hidden; transition: transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s .24s; }
  .ph-menue.offen { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2,.8,.2,1); }
  .ph-menue-kopf { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 20px 8px; color: var(--schwarz); }
  .ph-menue-zu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--flaeche); color: var(--schwarz); cursor: pointer; }
  .ph-menue-zu svg { width: 20px; height: 20px; }
  .ph-menue nav { display: flex; flex-direction: column; gap: 2px; }
  .ph-menue nav a, .ph-menue-fuss a { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 12px; color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 1.08rem; }
  .ph-menue nav a:active, .ph-menue-fuss a:active { background: var(--flaeche); }
  .ph-menue svg { width: 22px; height: 22px; flex: none; }
  .ph-menue-aktion { display: grid; gap: 10px; margin: 20px 0 8px; }
  .ph-menue-aktion .button { margin: 0; padding: 15px 18px; font-size: 1rem; }
  .ph-menue-fuss { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie); display: grid; gap: 2px; }
  .ph-menue-fuss a { font-size: 1rem; font-weight: 500; }
  .ph-menue-login span { display: grid; line-height: 1.25; }
  .ph-menue-login small { color: var(--grau); font-weight: 500; font-size: .84rem; }
  html.ph-menue-auf { overflow: hidden; }
}
@media (max-width: 339px) { .kopf .button { display: none; } .kopf-menue-knopf { margin-left: auto; } }
@keyframes ph-schleier { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ph-menue { transition: none !important; } .ph-schleier { animation: none; } }@media (max-width: 400px) { .kopf .innen { gap: 6px; } .kopf .button { padding: 8px 12px; font-size: .84rem; } .kopf-menue-knopf { padding-left: 4px; } }

/* Hinweis unter den Homepage-Designs */
.designs-hinweis { margin: 14px 0 0; text-align: center; color: var(--grau, #6b6b6b); font-size: .92rem; }
.designs-hinweis a { color: inherit; }

/* Handy-Abbildung: groesser und mit echten Handy-Proportionen (ca. 9:19,5), Kamera-Aussparung,
   unten "Eintragen" und die Leiste wie in der App */
.handy { width: min(370px, 88vw); border-radius: 54px; padding: 13px; }
.handy::before { content: ""; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #121212; z-index: 2; }
.handy-schirm { position: relative; aspect-ratio: 9 / 19.5; display: flex; flex-direction: column; border-radius: 42px; font-size: 13px; }
.hs-oben { padding-top: 50px; }
.hs-liste { flex: 1; overflow: hidden; align-content: start; padding-bottom: 110px; }
.hs-unten { position: absolute; left: 0; right: 0; bottom: 0; }
.hs-eintragen { position: absolute; right: 14px; bottom: 74px; background: #0A0A0A; color: #fff; font-weight: 700; font-size: 11px; padding: 9px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.hs-navi { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px 22px; background: rgba(255,255,255,.96); box-shadow: 0 -6px 18px -12px rgba(0,0,0,.35); }
.hs-navi span { display: grid; justify-items: center; gap: 2px; font-size: 9px; color: #8a8a8a; }
.hs-navi span.an { color: #0A0A0A; font-weight: 700; }
.hs-navi svg { width: 17px; height: 17px; }
@media (min-width: 960px) { .handy { width: 380px; } }
.hs-unten { z-index: 3; } .hs-navi { background: #fff; }
/* Telefon, E-Mail, Bearbeiten als Kreise (wie in der App) */
.hs-knoepfe span.tel, .hs-knoepfe span.ic { width: 24px; height: 24px; border-radius: 50%; }
@media (min-width: 1100px) { .pflege { grid-template-columns: repeat(3, 1fr); } }
/* Faktenzeile unter dem Start-Bereich: schwarz mit weisser Schrift */
.leiste-fakten { background: #0A0A0A; color: #fff; border-color: #0A0A0A; }
.leiste-fakten b { color: #fff; }
.leiste-fakten span { color: rgba(255,255,255,.68); }
/* Faktenzeile mit Symbolen */
.leiste-fakten li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.leiste-fakten li .zeichen { grid-row: span 2; margin: 0; width: 42px; height: 42px; background: #262626; color: #fff; }
.leiste-fakten li b, .leiste-fakten li span { grid-column: 2; }
@media (max-width: 480px) { .leiste-fakten li { column-gap: 10px; } .leiste-fakten li .zeichen { width: 36px; height: 36px; } .leiste-fakten li .zeichen svg { width: 19px; height: 19px; } }
/* Symbol links neben Zahl und Text, ohne Hintergrund */
.leiste-fakten li > span.zeichen { grid-column: 1; grid-row: 1 / span 2; width: auto; height: auto; background: none; border-radius: 0; color: #fff; }
.leiste-fakten li > span.zeichen svg { width: 30px; height: 30px; stroke-width: 1.6; }
@media (max-width: 480px) { .leiste-fakten li > span.zeichen svg { width: 24px; height: 24px; } }
@media (max-width: 560px) { .leiste-fakten ul { grid-template-columns: 1fr; gap: 14px; } }
/* Symbole ueberall ohne Kaestchen - nur das Zeichen, etwas groesser (wie in der Faktenzeile) */
.zeichen, .grau .zeichen, .dunkel .zeichen { width: auto; height: auto; background: none; border-radius: 0; place-items: start; justify-content: start; margin-bottom: 14px; }
.zeichen svg { width: 30px; height: 30px; stroke-width: 1.6; }
.verwandt-liste .zeichen svg, .download .zeichen svg { width: 26px; height: 26px; }
.start-h1 { line-height: 1.5; }
/* Grosse H1 der Startseite (laenger als der fruehere Slogan) etwas kleiner */
h1.slogan { font-size: clamp(2rem, 4vw, 3.3rem); }
h1.slogan { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
@media (min-width: 960px) { h1.slogan { font-size: clamp(2.4rem, 3.4vw, 3.2rem); } }

/* Ueberschriften insgesamt eine Stufe groesser (2.10.2026) */
h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
h2 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h1.slogan { font-size: clamp(2.5rem, 5.2vw, 4.2rem); }
@media (min-width: 960px) { .u-start-zwei h1 { font-size: clamp(2.7rem, 4.6vw, 4.1rem); } h1.slogan { font-size: clamp(2.7rem, 3.9vw, 3.7rem); } }
@media (max-width: 480px) { .u-start h1, h1.slogan { font-size: 10.2vw; } h2 { font-size: 9vw; } }
.demo-text { max-width: 1000px; } .demo-text .vorspann { max-width: 760px; }

/* Bestellung: nur der erste Schritt ist H1, die weiteren H2 - gleich gross */
.b-karte .b-titel { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.03em; }

/* ---------- Hilfsklassen (statt style-Attributen im HTML) ---------- */
.abstand-12 { margin-top: 12px; }
.abstand-14 { margin-top: 14px; }
.abstand-18 { margin-top: 18px; }
.abstand-24 { margin-top: 24px; }
.abstand-minus-6 { margin-top: -6px; }
.mitte-auto { margin-left: auto; margin-right: auto; }
.vorspann.mitte-auto { margin: 0 auto; }
.text-mitte { text-align: center; }
.tinte { color: var(--tinte); }
.ph-logo.logo-26 { --h: 26px; }
.ph-logo.logo-12 { --h: 12px; }
.fuss .ph-logo.fuss-logo { --h: 34px; }
.fuss a.hell { color: #fff; }
.fuss .fuss-titel { color: #fff; font: 600 .95rem/1.3 var(--titel); margin: 0 0 10px; }
.b-rahmen.einspaltig { grid-template-columns: 1fr; }
.b-fehler.b-fehler-oben { margin: 0 0 18px; font-size: .95rem; }
/* Hauptstadt-Medien-Logo klein in der Fusszeile (weisse Fassung, Turm rot) */
.fuss .fuss-produkt-von { display: block; }
.fuss a.fuss-hm { display: table; margin-top: 0; opacity: .85; transition: opacity .15s; }
.fuss a.fuss-hm:hover { opacity: 1; }
.fuss-hm img { display: block; height: 24px; width: auto; }

/* "Made with ♥ in Berlin": rotes Herz, schlaegt wie ein Herzschlag (doppelter Schlag, dann Pause) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mit-liebe { display: inline-flex; align-items: center; gap: .3em; }
.mit-liebe .herz { width: 1.05em; height: 1.05em; color: #E3262F; transform-origin: 50% 55%; animation: herzschlag 1.2s ease-in-out infinite; }
@keyframes herzschlag {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.25); }
  20% { transform: scale(1.02); }
  30% { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .mit-liebe .herz { animation: none; } }
/* Kopfleiste: "Jetzt bestellen" immer in einer Zeile */
.kopf .button { white-space: nowrap; flex: none; }
/* Schmale Handys: nur das Menue-Symbol, damit Logo, Button und Menue in eine Zeile passen (Name steht in aria-label) */
@media (max-width: 420px) { .kopf-menue-knopf span { display: none; } .kopf-menue-knopf { padding-left: 6px; } }
/* Handy: Button "Jetzt bestellen" in der Kopfleiste kleiner */
@media (max-width: 860px) { .kopf .button { font-size: .78rem; padding: 7px 12px; } }
/* Handy: Preis-Kopf und Umschalter einzeilig bzw. aufgeraeumt */
@media (max-width: 480px) {
  .nur-breit { display: none; }
  .zahlweise button { line-height: 1.15; }
  .zahlweise .geschenk { display: block; font-size: .72rem; font-weight: 500; }
}
/* Button "Nach oben" (unten rechts, erscheint nach dem Scrollen) */
.nach-oben { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--weiss); color: var(--schwarz); cursor: pointer; box-shadow: 0 6px 22px -6px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.04); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, visibility .25s, transform .25s, background .15s, color .15s; }
.nach-oben.da { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--schwarz); color: var(--weiss); }
.nach-oben:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }
.nach-oben svg { width: 20px; height: 20px; }
html.ph-menue-auf .nach-oben { visibility: hidden; }
@media (max-width: 600px) { .nach-oben { right: 14px; bottom: 14px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: none; } }/* Menue-Knopf: immer nur das Symbol (Name steht in aria-label) */
.kopf-menue-knopf span { display: none; }
.kopf-menue-knopf { padding-left: 6px; }
/* Kopf-Menue nie umbrechen; auf mittleren Bildschirmen enger und "Anmelden" nur als Symbol */
.kopf-navi a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1120px) {
  .kopf .innen { gap: 16px; }
  .kopf-navi { gap: 16px; font-size: .88rem; }
  .kopf-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 861px) and (max-width: 960px) { .kopf .innen { gap: 12px; } .kopf-navi { gap: 12px; font-size: .84rem; } }
/* Kopf am Computer: Menue mittig zwischen Logo und Buttons, "Anmelden" nur als Symbol (Text bleibt fuer Screenreader, title zeigt ihn beim Ueberfahren) */
@media (min-width: 861px) {
  .kopf-navi { flex: 1; justify-content: center; margin-left: 0; }
  .kopf-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kopf-login { padding: 8px; margin-right: -4px; }
  .kopf-login svg { width: 20px; height: 20px; }
}