/* =====================================================================
   A.K.ONTO · öffentliche Website
   Designsystem: ruhig, editorial, viel Weißraum. Serifen-Headlines,
   moderne Sans-Serif für alles andere, ein dunkles Anthrazit-Grün als
   Hauptfarbe, dezentes Salbeigrün als einziger Akzent.

   Abstände folgen einer festen Skala (8 · 12 · 16 · 24 · 32 · 48 · 64 ·
   80 · 96 · 120 px) – Werte darunter stehen als --s-* zur Verfügung.
   Lädt NACH base.css und überschreibt dessen Farb-Token nur für die Website.
   ===================================================================== */

:root {
  /* Farben */
  --paper:       #ffffff;
  --paper-2:     #ffffff;
  --bar:         #f6f7f4;
  --bar-soft:    #f3f5f1;
  --ink:         #12201a;
  --ink-2:       #17251f;
  --ink-soft:    #4f5c56;
  --ink-faint:   #8a938e;
  --rule:        #e2e6e2;
  --rule-soft:   #eef1ee;
  --sage:        #7f9a88;
  --sage-deep:   #5c7866;
  --sage-soft:   #e8efe9;
  --sage-tint:   #f1f5f1;
  --accent:      #a8321e;            /* nur Fehler / Pflichtfeld */
  --accent-soft: #f6e9e6;

  /* Schrift */
  --font-display: "Cormorant Garamond", "Cormorant", "Libre Baskerville", Baskerville,
                  "Baskerville Old Face", "Palatino Linotype", "Book Antiqua", Palatino,
                  "Iowan Old Style", Georgia, serif;
  --font-body:    Inter, Manrope, "DM Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
                  system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num:     var(--font-body);

  /* Maße
     --wrap  = Breite des Inhalts. Auf großen Bildschirmen wird die Fläche
               genutzt; die Ränder wachsen mit, damit nichts klebt.
     --wrap-nr = schmale Spalte für reinen Lesetext (Impressum, Datenschutz).
                 Fließtext bleibt bewusst schmal – über ~80 Zeichen je Zeile
                 verliert das Auge beim Rücksprung die Zeile. */
  --wrap: 1680px;
  --wrap-nr: 820px;
  --radius: 12px;
  --radius-sm: 7px;
  --shadow:    0 1px 2px rgba(18, 32, 26, .04), 0 10px 30px -18px rgba(18, 32, 26, .18);
  --shadow-lg: 0 2px 6px rgba(18, 32, 26, .05), 0 30px 70px -30px rgba(18, 32, 26, .28);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --step: .3s var(--ease);

  /* Abstandsskala */
  --s-1: 8px;  --s-2: 12px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 80px; --s-9: 96px; --s-10: 120px;
  --section: clamp(var(--s-7), 4vw + 2rem, var(--s-10));
  --header-h: 84px;
}

/* --- Grundtypografie --------------------------------------------------- */
body {
  background: var(--paper);
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.site-main { flex: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 1.35rem + 2vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.65rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--sage-deep); }
strong, b { font-weight: 600; }
::selection { background: var(--sage-soft); color: var(--ink); }

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

.num, time, .money { font-family: var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.wrap { max-width: var(--wrap); padding-inline: clamp(1.25rem, 4vw, 4.5rem); }
.wrap--narrow { max-width: var(--wrap-nr); }

.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink-soft); line-height: 1.6; }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }

/* Kleines Label über Headlines */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sage-deep);
  margin: 0 0 var(--s-3);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--sage); flex: none; }
/* Die Zeile über der Hauptüberschrift soll nicht umbrechen – auf schmalen
   Geräten rückt sie dafür etwas enger zusammen. */
@media (min-width: 700px) {
  .hero .eyebrow { white-space: nowrap; letter-spacing: .13em; }
}
.eyebrow--plain::before, .eyebrow--plain::after { display: none; }
.eyebrow::after { display: none; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; line-height: 1;
  padding: .95rem 1.45rem; border-radius: var(--radius-sm);
  background: var(--ink-2); color: #fff; border: 1px solid var(--ink-2);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--step), color var(--step), border-color var(--step), transform .2s var(--ease), box-shadow var(--step);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 8px 20px -12px rgba(18, 32, 26, .5); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: var(--bar); border-color: var(--ink-faint); color: var(--ink); box-shadow: none; }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--bar); border-color: var(--bar); color: var(--ink); }
.btn--sm { padding: .6rem 1rem; font-size: .86rem; }
.btn--lg { padding: 1.05rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn .arrow { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ink);
}
.link-arrow .arrow { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--sage-deep); }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* Line-Icons (inline SVG, 1.5px Strich) */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { width: 18px; height: 18px; }
.icon-box {
  width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center;
  background: var(--sage-soft); color: var(--sage-deep);
}

/* --- Informationsleiste ------------------------------------------------- */
.topbar {
  background: var(--ink); color: rgba(255, 255, 255, .82);
  font-size: .78rem; letter-spacing: .01em;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 36px; }
.topbar__group { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; white-space: nowrap; }
.topbar__item .icon { width: 14px; height: 14px; opacity: .8; }
.topbar a:hover { color: #fff; }
.topbar__claim { font-family: var(--font-display); font-style: italic; font-size: .95rem; color: #fff; letter-spacing: 0; }
@media (max-width: 900px) {
  .topbar__claim, .topbar__hours, .topbar__mail { display: none; }
  .topbar__inner { justify-content: center; }
}

/* --- Kopfzeile ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--step), background var(--step), box-shadow var(--step);
}
.site-header.is-scrolled { background: rgba(255, 255, 255, .9); border-bottom-color: var(--rule); box-shadow: 0 6px 24px -20px rgba(18, 32, 26, .35); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-header .brand__logo { height: 58px; width: auto; display: block; transition: height var(--step); }
.site-header.is-scrolled .brand__logo { height: 50px; }
.brand__logo--footer { height: auto; width: 200px; max-width: 100%; display: block; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a:not(.btn) {
  font-size: .93rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  padding: .55rem .85rem; border-radius: var(--radius-sm); position: relative;
  transition: color var(--step), background var(--step);
}
.nav a:not(.btn):hover { color: var(--ink); background: var(--bar); }
.nav a:not(.btn).is-current { color: var(--ink); font-weight: 600; }
.nav a:not(.btn).is-current::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 1.5px; background: var(--sage);
}
.nav__cta { margin-left: .9rem; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--ink);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 1.5px; background: currentColor;
  margin-inline: auto; transition: transform var(--step), opacity var(--step);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: relative; }
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top: 4px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 980px) {
  :root { --header-h: 72px; }
  .site-header .brand__logo, .site-header.is-scrolled .brand__logo { height: 48px; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--header-h);
    max-height: calc(100vh - var(--header-h)); overflow: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--rule);
    padding: .5rem clamp(1.25rem, 4vw, 3rem) 1.5rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity var(--step), transform var(--step), visibility 0s .3s;
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--step), transform var(--step); }
  .nav a:not(.btn) { font-size: 1.1rem; padding: 1rem .2rem; border-bottom: 1px solid var(--rule-soft); border-radius: 0; }
  .nav a:not(.btn).is-current::after { display: none; }
  .nav__cta { margin: 1rem 0 0; }
  .nav__cta .btn { width: 100%; }
  body.nav-open { overflow: hidden; }
}

/* --- Abschnitte ---------------------------------------------------------- */
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(var(--s-6), 3vw + 1rem, var(--s-8)) 0; }
.section--bar { background: var(--bar); }
.section--sage { background: var(--sage-tint); }
.section--flush-top { padding-top: 0; }

.section__head { max-width: 62ch; margin-bottom: clamp(var(--s-5), 3vw, var(--s-7)); }
.section__head p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
.section__head--center .eyebrow::before { display: none; }

.section__row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
  margin-bottom: clamp(var(--s-5), 3vw, var(--s-7));
}
.section__row .section__head { margin-bottom: 0; }
@media (max-width: 720px) { .section__row { flex-direction: column; align-items: flex-start; } }

/* --- Hero ------------------------------------------------------------------- */
.hero { padding: clamp(var(--s-6), 5vw, var(--s-9)) 0 clamp(var(--s-6), 4vw, var(--s-8)); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--s-4), 4vw, var(--s-8)); align-items: center;
}
.hero h1 { margin-bottom: var(--s-4); }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--sage-deep); }
.hero__lead { max-width: 50ch; margin-bottom: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }

.trust { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.trust li { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-soft); }
.trust .icon { width: 16px; height: 16px; color: var(--sage-deep); }

.hero__media { position: relative; margin: 0; }
figure { margin: 0; }
.hero__media img {
  /* Der Schriftzug an der Wand reicht im Bild bis an den rechten Rand
     (76–98 % der Breite). Deshalb flacher Ausschnitt und rechtsbündig –
     sonst wird der Rahmen angeschnitten. */
  width: 100%; height: auto; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: 100% 50%;
  border-radius: var(--radius); display: block; background: var(--bar);
}
.hero__card {
  position: absolute; left: clamp(-1.5rem, -2vw, -2.5rem); bottom: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 19rem; padding: 1.15rem 1.35rem;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: var(--shadow-lg); backdrop-filter: blur(6px);
}
.hero__card p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.25; color: var(--ink); }
.hero__card span { display: block; margin-top: .55rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-deep); font-weight: 600; }
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { margin-top: var(--s-3); }
  .hero__media img { aspect-ratio: 16 / 10; object-position: 100% 50%; }
  /* Karte rutscht unter das Bild und überlappt es nur leicht */
  .hero__card { position: relative; left: auto; right: auto; bottom: auto; max-width: none; margin: -1.6rem var(--s-3) 0; }
  .hero__card p { font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .hero__media img { aspect-ratio: 4 / 3; object-position: 95% 50%; }
  .hero__card { margin: -1.2rem var(--s-2) 0; padding: 1rem 1.1rem; }
  .hero__card p { font-size: 1.1rem; }
  .hero__actions .btn { width: 100%; }
}

/* --- Leistungs-Karten ---------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s-4); }
@media (max-width: 600px)  { .svc-grid { grid-template-columns: 1fr; } }
.svc {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(18, 32, 26, .03);
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), border-color var(--step), box-shadow var(--step);
}
.svc:hover { transform: translateY(-4px); border-color: var(--sage); box-shadow: var(--shadow); color: inherit; }
.svc h3 { margin: .2rem 0 0; font-size: 1.45rem; }
.svc p { margin: 0; color: var(--ink-soft); font-size: .96rem; flex: 1; }
.svc .link-arrow { margin-top: .4rem; font-size: .9rem; }
.svc:hover .link-arrow { color: var(--sage-deep); }
.svc:hover .link-arrow .arrow { transform: translateX(3px); }

/* Karten mit Bild (Leistungsübersicht)
   auto-fit statt fester Spaltenzahl: Die Karten verteilen sich auf so viele
   Spalten, wie bei mindestens 23rem Kartenbreite hineinpassen – auf einem
   breiten Bildschirm also drei nebeneinander statt zwei mit Lücke daneben. */
.svc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: var(--s-5); }
.svc--media { padding-top: 0; }
.svc__img { display: block; margin: 0 calc(-1 * var(--s-4)); aspect-ratio: 16 / 8; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--bar); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.svc:hover .svc__img img { transform: scale(1.03); }
.svc__head { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.svc__head h2, .svc__head h3 { margin: 0; font-size: 1.7rem; }
.svc--media .list-check { margin: .2rem 0 .4rem; }
.svc--media .list-check li { font-size: .95rem; color: var(--ink-soft); }

/* --- Vorteile ------------------------------------------------------------- */
/* Immer vier Vorteile: vier nebeneinander, darunter 2x2 – nie 3+1. */
.benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
@media (max-width: 1240px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .benefits { grid-template-columns: 1fr; } }
.benefit { display: grid; gap: var(--s-3); }
.benefit h3 { font-size: 1.3rem; margin: 0; }
.benefit p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.benefit .icon-box { background: #fff; border: 1px solid var(--rule); }

/* --- Drei Schritte ---------------------------------------------------------- */
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--s-4); align-items: start; }
.step { display: grid; gap: var(--s-3); }
.step__no {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-soft); color: var(--sage-deep);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
}
.step h3 { font-size: 1.4rem; margin: 0; }
.step p { margin: 0; color: var(--ink-soft); font-size: .96rem; max-width: 34ch; }
.steps__arrow { color: var(--rule); padding-top: 1rem; }
.steps__arrow .icon { width: 28px; height: 28px; stroke: var(--ink-faint); }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .steps__arrow { display: none; }
  .step { grid-template-columns: 56px 1fr; column-gap: var(--s-3); }
  .step__no { grid-row: 1 / 3; }
}

/* --- Über uns -------------------------------------------------------------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(var(--s-5), 5vw, var(--s-9)); align-items: center; }
.about__text { color: var(--ink-soft); font-size: 1.05rem; max-width: 56ch; }
.about__text p { margin-bottom: 1em; }
.about__media { position: relative; }
.about__media img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); display: block; background: var(--bar); }
.about__facts {
  margin: calc(-1 * var(--s-6)) var(--s-4) 0; position: relative;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.about__facts > div { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.15rem; }
.about__facts > div:nth-child(odd) { border-right: 1px solid var(--rule-soft); }
.about__facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
.about__facts .icon { color: var(--sage-deep); width: 20px; height: 20px; margin-top: .15rem; }
.about__facts b { display: block; font-size: .95rem; }
.about__facts span { font-size: .84rem; color: var(--ink-soft); }
@media (max-width: 980px) {
  .about { grid-template-columns: 1fr; }
  .about__media { order: -1; }
}
@media (max-width: 560px) {
  .about__facts { grid-template-columns: 1fr; margin: calc(-1 * var(--s-5)) var(--s-2) 0; }
  .about__facts > div:nth-child(odd) { border-right: 0; }
  .about__facts > div:not(:last-child) { border-bottom: 1px solid var(--rule-soft); }
}

/* --- Kundenstimmen ------------------------------------------------------------ */
/* Drei Stimmen: nebeneinander oder untereinander – nie 2+1. */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1040px) { .quotes { grid-template-columns: 1fr; } }
.quote { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; color: var(--ink); flex: 1; }
.quote blockquote::before { content: "„"; color: var(--sage); }
.quote blockquote::after { content: "“"; color: var(--sage); }
.quote footer { font-size: .88rem; color: var(--ink-soft); }
.quote footer b { display: block; color: var(--ink); font-weight: 600; }

/* --- Abschluss-CTA ------------------------------------------------------------- */
.cta-band {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: var(--s-5); align-items: center;
  padding: clamp(var(--s-5), 4vw, var(--s-7)); border-radius: var(--radius);
  background: var(--sage-tint); border: 1px solid var(--sage-soft);
}
.cta-band h2 { margin: 0; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.cta-band p { margin: 0; color: var(--ink-soft); }
@media (max-width: 980px) { .cta-band { grid-template-columns: 1fr; } }

/* --- Große Bildschirme ---------------------------------------------------------
   Mehr Fläche heißt nicht "alles breiter ziehen": Überschriften und Fließtext
   behalten ihre Lesebreite, dafür stehen die Blöcke luftiger und die Bilder
   dürfen größer werden. -------------------------------------------------------- */
@media (min-width: 1500px) {
  .svc-grid, .benefits, .quotes { gap: var(--s-5); }
  .svc { padding: var(--s-5) var(--s-5) var(--s-4); }
  .svc__img { margin-inline: calc(-1 * var(--s-5)); }
  .section__head { max-width: 68ch; }
  .hero__media img { aspect-ratio: 4 / 3.2; }   /* auf großen Schirmen genauso flach */
  .hero__lead { max-width: 54ch; }
}
@media (min-width: 1800px) {
  body { font-size: 18px; }
}

/* --- Seitenkopf für Unterseiten ------------------------------------------------ */
.page-head { padding: clamp(var(--s-6), 5vw, var(--s-9)) 0 clamp(var(--s-5), 3vw, var(--s-7)); border-bottom: 1px solid var(--rule-soft); }
.page-head__inner { max-width: 68ch; }
.page-head h1 { margin-bottom: var(--s-3); }
.page-head .lead { margin: 0; }

/* --- Leistungsseite --------------------------------------------------------------- */
.service-nav { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--s-5); }
.service-nav a {
  font-size: .86rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
  padding: .5rem .95rem; border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  transition: border-color var(--step), color var(--step), background var(--step);
}
.service-nav a:hover { color: var(--ink); border-color: var(--ink-faint); }
.service-nav a.is-current { background: var(--ink); color: #fff; border-color: var(--ink); }

.service-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s-5), 5vw, var(--s-9)); align-items: center; }
.service-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; background: var(--bar); }
@media (max-width: 900px) { .service-hero { grid-template-columns: 1fr; } .service-hero__media { order: -1; } }

.list-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.list-check li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1rem; }
.list-check .icon { width: 20px; height: 20px; color: var(--sage-deep); margin-top: .2rem; }

.two-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(var(--s-5), 5vw, var(--s-9)); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(var(--s-5), 5vw, var(--s-9)); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* --- Karten und Listen (auch von Unterseiten genutzt) ------------------------------ */
.card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(var(--s-4), 3vw, var(--s-5)); }
.card--flat { box-shadow: none; }

.ledger-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ledger-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--s-4); background: var(--bar);
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.ledger-row { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; padding: 1rem var(--s-4); border-top: 1px solid var(--rule-soft); align-items: start; }
.ledger-row__pos { font-family: var(--font-display); font-size: 1.05rem; color: var(--sage-deep); padding-top: .1rem; }
.ledger-row__title { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 .15rem; }
.ledger-row__text { margin: 0; color: var(--ink-soft); font-size: .93rem; }
.ledger-saldo { display: flex; gap: 1rem; align-items: baseline; padding: 1rem var(--s-4); border-top: 1px solid var(--ink); background: var(--sage-tint); }
.ledger-saldo__label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-deep); }
.ledger-saldo__text { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }
a.ledger-row { text-decoration: none; color: inherit; transition: background var(--step); }
a.ledger-row:hover { background: var(--bar-soft); }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule-soft); }
.contact-list .k { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding-top: .3rem; }
.contact-list .v a { text-decoration: none; font-weight: 500; }
.contact-list .v a:hover { color: var(--sage-deep); }

.info-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 800px) { .info-tiles { grid-template-columns: 1fr; } }
.info-tile { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 1.2rem 1.3rem; display: grid; gap: .5rem; }
.info-tile .k { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.info-tile .v { font-size: 1.05rem; font-weight: 500; }
.info-tile .v a { text-decoration: none; }

/* --- Formulare ---------------------------------------------------------------- */
.form-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(var(--s-4), 3vw, var(--s-6)); }
.form-card h2 { font-size: 1.7rem; margin-bottom: var(--s-4); }
.field { margin-bottom: 1.15rem; }
.field > label, .label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .45rem; color: var(--ink); }
.input, input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: .85rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: #fff;
  transition: border-color var(--step), box-shadow var(--step);
}
textarea { min-height: 9rem; resize: vertical; }
select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234f5c56' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.6rem; }
.input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--sage-soft); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--accent); }
.error-text { color: var(--accent); font-size: .84rem; margin: .35rem 0 0; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); margin: .3rem 0 1rem; }
.check input { margin-top: .25rem; width: 17px; height: 17px; accent-color: var(--ink-2); flex: none; }
.req { color: var(--accent); }
.hint { color: var(--ink-faint); font-size: .82rem; }
.grid { display: grid; gap: 0 var(--s-3); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .grid--2 { grid-template-columns: 1fr; } }

.msg { display: flex; gap: .8rem; padding: 1rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--bar); font-size: .95rem; margin-bottom: var(--s-4); }
.msg--success { border-color: #c6dccb; background: var(--sage-soft); }
.msg--error { border-color: #e6c8c1; background: var(--accent-soft); }

/* --- Textseiten (Impressum, Datenschutz) ----------------------------------------- */
.prose { max-width: 70ch; color: var(--ink-soft); }
.prose h2 { font-size: 1.6rem; margin-top: var(--s-6); color: var(--ink); }
.prose h3 { font-size: 1.2rem; margin-top: var(--s-5); color: var(--ink); }
.prose p, .prose li { font-size: 1rem; }
.prose ul { padding-left: 1.2rem; }
.prose a { color: var(--ink); }
.note { border-left: 2px solid var(--sage); padding: .8rem 1rem; background: var(--bar); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .95rem; }
.todo { border-left-color: var(--accent); background: var(--accent-soft); }

/* --- Partnerprodukte --------------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4); }
.product-grid--compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.product { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color var(--step), transform .3s var(--ease), box-shadow var(--step); text-decoration: none; color: inherit; }
.product:hover { border-color: var(--sage); transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.product--featured { border-color: var(--ink); }
.product__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.product__img { aspect-ratio: 16 / 9; background: var(--bar-soft); border-bottom: 1px solid var(--rule-soft); overflow: hidden; }
.product__img img { width: 100%; height: 100%; object-fit: cover; }
.product__img--empty { display: grid; place-items: center; font-family: var(--font-display); font-size: 2.6rem; color: var(--rule); }
.product__body { padding: var(--s-4) var(--s-4) .8rem; flex: 1; }
.product__title { font-size: 1.35rem; margin-bottom: .35rem; }
.product__teaser { color: var(--ink-soft); font-size: .94rem; margin: 0; }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem var(--s-4); border-top: 1px solid var(--rule); background: var(--bar-soft); }
.product__price { font-size: .9rem; font-weight: 600; }
.product--compact .product__body { padding: var(--s-3) var(--s-4); }

.tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.tabs a { padding: .7rem 1rem; font-size: .9rem; font-weight: 600; white-space: nowrap; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a.is-current { color: var(--ink); border-bottom-color: var(--sage); }

/* --- Fußzeile ---------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .78); margin-top: var(--section); }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); padding: clamp(var(--s-6), 5vw, var(--s-8)) 0 var(--s-6); }
.site-footer h4 { font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; font-size: .95rem; }
.site-footer__claim { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: #fff; line-height: 1.3; margin: var(--s-4) 0 0; max-width: 20ch; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: .8rem var(--s-4); justify-content: space-between; align-items: center; padding: var(--s-4) 0 var(--s-5); border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; color: rgba(255, 255, 255, .55); }
.site-footer__bottom a { color: rgba(255, 255, 255, .55); }
@media (max-width: 980px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* --- Auftritt beim Laden (nur mit JavaScript) ---------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s var(--ease); }
.reveal[data-delay="1"].is-in { transition-delay: .07s; }
.reveal[data-delay="2"].is-in { transition-delay: .14s; }
.reveal[data-delay="3"].is-in { transition-delay: .21s; }
.reveal[data-delay="4"].is-in { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn, .svc, .product, .link-arrow .arrow { transition: none !important; }
}

/* Wartungshinweis für angemeldete Benutzer */
.admin-note { background: var(--accent); color: #fff; text-align: center; padding: .5rem 1rem; font-size: .85rem; }
.admin-note a { color: #fff; margin-left: .6rem; }


/* Pflichthinweis zum Leistungsumfang (§ 6 Nr. 3 und 4 StBerG) */
.site-footer__recht {
  margin: 0 0 1rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; line-height: 1.5; opacity: .75; max-width: 70ch;
}
.page-head__recht {
  margin: 1rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft);
  border-left: 2px solid var(--rule, rgba(0,0,0,.12)); padding-left: .9rem; max-width: 70ch;
}

/* =====================================================================
   KUNDENLOGIN im Kopf
   ===================================================================== */
.nav__portal {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
  padding: .5rem .85rem; border: 1px solid var(--rule); border-radius: 999px;
  transition: border-color var(--step), color var(--step), background var(--step);
}
.nav__portal:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--bar); }
.nav__portal .icon { width: 17px; height: 17px; }

/* =====================================================================
   KUNDENPORTAL – die Seiten für angemeldete Mandanten
   Ruhig und tabellarisch: Der Kunde sucht Zahlen und Dateien, keine Werbung.
   ===================================================================== */
body.portal { background: var(--bar-soft); }

.portal__kopf { background: #fff; border-bottom: 1px solid var(--rule); }
.portal__kopf-inner { display: flex; align-items: center; gap: var(--s-4); padding: .9rem 0; }
.portal__kopf .brand__logo { width: 190px; height: auto; }
.portal__kunde { margin-left: auto; text-align: right; line-height: 1.3; }
.portal__kunde-name { display: block; font-weight: 600; }
.portal__kunde-nr { display: block; font-size: .82rem; color: var(--ink-soft); }
.portal__abmelden { margin-left: var(--s-3); }

.portal__nav { background: #fff; border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 30; }
.portal__nav-inner { display: flex; gap: .2rem; overflow-x: auto; }
.portal__nav a {
  padding: .95rem .95rem; font-size: .95rem; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent;
}
.portal__nav a:hover { color: var(--ink); }
.portal__nav a.is-current { color: var(--ink); border-bottom-color: var(--ink); }

/* Zweite Menüebene (Unterseiten eines Bereichs) */
.portal__unternav { background: var(--bar-soft); border-bottom: 1px solid var(--rule); }
.portal__unternav-inner { display: flex; gap: .2rem; overflow-x: auto; }
.portal__unternav a {
  padding: .6rem .9rem; font-size: .9rem; color: var(--ink-soft); text-decoration: none;
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.portal__unternav a:hover { color: var(--ink); }
.portal__unternav a.is-current { color: var(--ink); font-weight: 600; border-bottom-color: var(--sage); }

/* Liste hinterlegter Dateien */
.portal__erklaerung { color: var(--ink-soft); max-width: 70ch; margin: -.6rem 0 var(--s-4); }
.portal__dateien { list-style: none; margin: 0; padding: 0; }
.portal__datei {
  display: flex; align-items: center; gap: var(--s-3);
  padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap;
}
.portal__datei:last-child { border-bottom: 0; }
.portal__datei-art {
  flex: none; width: 2.9rem; height: 2.9rem; display: grid; place-items: center;
  border-radius: 8px; background: var(--bar); color: var(--ink-soft);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
}
.portal__datei-text { flex: 1 1 16rem; min-width: 0; display: grid; gap: .1rem; }
.portal__datei-knoepfe { display: flex; gap: .4rem; flex: none; }
@media (max-width: 560px) {
  .portal__datei-knoepfe { width: 100%; }
  .portal__datei-knoepfe .btn { flex: 1; justify-content: center; }
}

.portal__inhalt { padding: clamp(var(--s-5), 3vw, var(--s-7)) 0 var(--s-8); }
.portal__titel { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); margin: 0 0 var(--s-5); }

.portal__kacheln {
  /* Fünf gleich breite Spuren: die grosse Kachel nimmt zwei, die drei
     kleinen je eine – so steht alles in einer Reihe. */
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-5);
}
.portal__kachel {
  display: block; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-4); text-decoration: none; color: inherit;
  transition: border-color var(--step), transform .25s var(--ease), box-shadow var(--step);
}
a.portal__kachel:hover { border-color: var(--sage); transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.portal__kachel--gross { grid-column: span 2; border-left: 3px solid var(--rule); }
.portal__kachel--gross.is-offen { border-left-color: var(--accent); }
.portal__kachel--gross.is-gut   { border-left-color: var(--sage); }
.portal__kachel--gross .portal__kachel-v { font-size: 2.6rem; }
.portal__kachel--gross.is-offen .portal__kachel-v { color: var(--accent); }
@media (max-width: 1400px) { .portal__kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .portal__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .portal__kacheln { grid-template-columns: 1fr; }
  .portal__kachel--gross { grid-column: span 1; }
}
.portal__kachel-k { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.portal__kachel-v { display: block; font-size: 2rem; font-family: var(--font-display); line-height: 1.1; margin: .3rem 0 .25rem; }
.portal__kachel-s { display: block; font-size: .87rem; color: var(--ink-soft); line-height: 1.45; }

/* Zahl im Menü */
.portal__zahl {
  display: inline-block; min-width: 1.35rem; margin-left: .15rem; padding: .05rem .4rem;
  border-radius: 999px; background: var(--bar); color: var(--ink-soft);
  font-size: .76rem; font-weight: 700; text-align: center; vertical-align: .08em;
}
.portal__zahl--offen { background: var(--accent-soft); color: var(--accent); }

.portal__spalten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 1000px) { .portal__spalten { grid-template-columns: 1fr; } }

.portal__block { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s-4); margin-bottom: var(--s-4); }
.portal__block-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.portal__block-kopf h2 { margin: 0; font-size: 1.4rem; }
.portal__schmal { max-width: 34rem; }

.portal__tabelle-scroll { overflow-x: auto; }
.portal__tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.portal__tabelle th {
  text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: .5rem .7rem .5rem 0; border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.portal__tabelle td { padding: .7rem .7rem .7rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.portal__tabelle tr:last-child td { border-bottom: 0; }
.portal__tabelle .right { text-align: right; }
.portal__leistung { color: var(--ink-soft); max-width: 22rem; }
.portal__richtung { color: var(--ink-faint); font-size: .82rem; }

.portal__marke {
  display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .5rem;
  border-radius: 999px; background: var(--bar); color: var(--ink-soft); white-space: nowrap;
}
.portal__marke--gut  { background: var(--sage-soft); color: var(--sage-deep); }
.portal__marke--warn { background: #fdf0e6; color: #8a4b12; }

.portal__liste { list-style: none; margin: 0; padding: 0; }
.portal__liste li { display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); }
.portal__liste li:last-child { border-bottom: 0; }
.portal__liste span { color: var(--ink-soft); }

.portal__leer { background: #fff; border: 1px dashed var(--rule); border-radius: var(--radius); padding: var(--s-6) var(--s-4); text-align: center; }
.portal__leer h2 { font-size: 1.4rem; margin: 0 0 .4rem; }
.portal__leer p { margin: 0; color: var(--ink-soft); }

.portal__fuss { border-top: 1px solid var(--rule); background: #fff; padding: var(--s-4) 0; font-size: .88rem; color: var(--ink-soft); }
.portal__fuss p { margin: 0; }

@media (max-width: 720px) {
  .portal__kopf-inner { flex-wrap: wrap; }
  .portal__kunde { margin-left: 0; text-align: left; width: 100%; order: 3; }
  .portal__abmelden { margin-left: auto; }
}

/* =====================================================================
   KUNDENPORTAL AM HANDY – App-Optik
   Feste Leiste unten, Karten statt Tabellen, große Tippflächen.
   Ab 760px Breite greift wieder die normale Ansicht.
   ===================================================================== */
.portal__tabs { display: none; }
.portal__mehr { display: none; }

@media (max-width: 760px) {
  /* Kopf: klein und ruhig, der Name reicht */
  .portal__kopf-inner { padding: .6rem 0; gap: .6rem; }
  .portal__kopf .brand__logo { width: 120px; }
  .portal__kunde { margin-left: auto; text-align: right; width: auto; order: 0; }
  .portal__kunde { min-width: 0; }
  .portal__kunde-name {
    font-size: .95rem; display: block; max-width: 13rem; margin-left: auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .portal__kunde-nr { font-size: .74rem; }
  .portal__abmelden { display: none; }          /* steckt im Blatt „Mehr" */

  /* Die beiden Menüzeilen am Handy weg – unten gibt es die Leiste */
  .portal__nav { display: none; }
  .portal__unternav { position: sticky; top: 0; z-index: 30; }

  .portal__inhalt { padding: var(--s-4) 0 5.5rem; }   /* Platz für die Leiste */
  .portal__titel { font-size: 1.7rem; margin-bottom: var(--s-4); }
  .portal__fuss { margin-bottom: 4.6rem; font-size: .8rem; }

  /* Kacheln: zwei nebeneinander, die große über die volle Breite */
  .portal__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .portal__kachel--gross { grid-column: 1 / -1; }
  .portal__kachel { padding: var(--s-3); }
  .portal__kachel-v { font-size: 1.6rem; }
  .portal__kachel--gross .portal__kachel-v { font-size: 2.2rem; }

  .portal__block { padding: var(--s-3); }
  .portal__spalten { gap: .8rem; }

  /* --- Tabellen werden zu Karten ------------------------------------
     Jede Zeile ist eine Karte; die Spaltenüberschrift steht als kleines
     Wort davor (kommt aus data-label im Markup). */
  .portal__tabelle thead { display: none; }
  .portal__tabelle, .portal__tabelle tbody, .portal__tabelle tr, .portal__tabelle td { display: block; width: 100%; }
  .portal__tabelle tr {
    background: var(--bar-soft); border: 1px solid var(--rule-soft); border-radius: var(--radius);
    padding: .8rem .9rem; margin-bottom: .6rem;
  }
  .portal__tabelle td { border: 0; padding: .15rem 0; text-align: left !important; }
  .portal__tabelle td::before {
    content: attr(data-label) " ";
    display: inline-block; min-width: 6.5rem;
    font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  }
  .portal__tabelle td:empty, .portal__tabelle td.ist-leer { display: none; }
  .portal__tabelle td .btn { width: 100%; justify-content: center; margin-top: .5rem; }
  .portal__tabelle td:last-child::before { content: none; }

  /* Dateien */
  .portal__datei { padding: .7rem 0; }
  .portal__datei-knoepfe { width: 100%; }
  .portal__datei-knoepfe .btn { flex: 1; justify-content: center; min-height: 44px; }

  /* --- Leiste unten --------------------------------------------------- */
  .portal__tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .portal__tabs a, .portal__mehr-knopf {
    position: relative; display: grid; place-items: center; gap: .15rem;
    padding: .55rem .2rem .5rem; min-height: 56px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: .68rem; color: var(--ink-soft); text-decoration: none;
  }
  .portal__tabs a.is-current { color: var(--ink); font-weight: 600; }
  .portal__tabs a.is-current .portal__tab-ico { stroke-width: 2.1; }
  .portal__tab-ico { width: 22px; height: 22px; }
  .portal__tab-punkt {
    position: absolute; top: .45rem; right: 50%; margin-right: -1.15rem;
    width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent);
  }

  /* --- Blatt „Mehr" ---------------------------------------------------- */
  .portal__mehr { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(18, 32, 26, .45); }
  .portal__mehr[hidden] { display: none; }
  .portal__mehr-blatt {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff; border-radius: 16px 16px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-lg);
    animation: blattRein .22s var(--ease);
  }
  @keyframes blattRein { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
  .portal__mehr-titel {
    margin: .2rem 0 .6rem; font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .portal__mehr-blatt a {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .85rem .2rem; border-bottom: 1px solid var(--rule-soft);
    text-decoration: none; color: var(--ink); font-weight: 600; min-height: 48px;
  }
  .portal__mehr-blatt a:last-of-type { border-bottom: 0; }
  .portal__mehr-blatt form { margin-top: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portal__mehr-blatt { animation: none; }
}

/* --- Fußzeile: Gestalter-Hinweis -------------------------------------
   Steht immer auf EINER Zeile: die Schrift wird auf schmalen Geräten
   kleiner, statt umzubrechen. */
.site-footer__by {
  opacity: .85;
  white-space: nowrap;
  font-size: clamp(.58rem, 2.4vw, .82rem);
}
.site-footer__by a { font-weight: 600; letter-spacing: .02em; }
@media (min-width: 700px) { .site-footer__by { font-size: inherit; } }

/* --- Karte (erst nach Einwilligung) ----------------------------------
   Vor der Zustimmung steht hier nur ein Hinweis – es wird nichts von
   Google geladen. Nach dem Klick füllt ein iframe denselben Kasten. */
.karte {
  position: relative; margin-top: var(--s-3, 1.2rem);
  min-height: 320px; display: grid; place-items: center;
  background: var(--paper-2, #f4f6f4);
  border: 1px solid var(--rule, #dfe5e1); border-radius: var(--radius, 10px);
  overflow: hidden;
}
.karte__hinweis { max-width: 36rem; padding: 1.6rem 1.2rem; text-align: center; }
.karte__hinweis p { margin: 0 0 .7rem; }
.karte__hinweis .btn { margin: .2rem .25rem; }
.karte--geladen { display: block; min-height: 0; }
.karte iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (max-width: 560px) { .karte iframe { height: 300px; } }

/* --- Zurück nach oben -------------------------------------------------
   Liegt unten rechts und wird erst sichtbar, wenn der Besucher ein Stück
   gescrollt hat. Ohne JavaScript bleibt der Knopf verborgen. */
.nach-oben {
  position: fixed; right: clamp(.9rem, 3vw, 2rem);
  bottom: calc(clamp(.9rem, 3vw, 2rem) + env(safe-area-inset-bottom));
  z-index: 80;
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--ink, #16211c); color: #fff;
  box-shadow: 0 6px 18px rgba(18, 32, 26, .28);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.nach-oben.is-da { opacity: .92; visibility: visible; transform: none; }
.nach-oben:hover { opacity: 1; }
.nach-oben:focus-visible { outline: 3px solid var(--accent, #a8321e); outline-offset: 3px; }
.nach-oben svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: none; } }


/* =====================================================================
   KUNDENLOGIN AM HANDY
   Auf schmalen Bildschirmen steht der Knopf direkt neben dem Logo, damit
   man ihn ohne Umweg über das Menü findet. Im aufgeklappten Menü taucht
   er dafür nicht mehr auf. Am großen Bildschirm bleibt alles wie bisher:
   dort sitzt der Kundenlogin weiter in der Navigationsleiste.
   ===================================================================== */
.kopf-portal { display: none; }

@media (max-width: 980px) {
  .site-header__inner { gap: .6rem; }
  /* Kundenlogin steht jetzt neben dem Logo, „Erstgespräch vereinbaren" steht
     ohnehin gleich auf der Seite – beides muss nicht noch einmal ins Menü. */
  .nav__portal { display: none; }
  .nav__cta { display: none; }

  .kopf-portal {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-left: auto;
    padding: .55rem .85rem; min-height: 44px;
    border: 1px solid var(--rule); border-radius: var(--radius-sm);
    background: #fff; color: var(--ink);
    font-size: .95rem; font-weight: 600; text-decoration: none;
    white-space: nowrap;
  }
  .kopf-portal .icon { width: 17px; height: 17px; flex: none; }
  .kopf-portal:hover { background: var(--bar); }
}

/* Nur auf sehr schmalen Geräten bleibt allein das Schloss stehen –
   gemessen passt „Kundenlogin" bis hinunter zu rund 360 Pixeln bequem. */
@media (max-width: 359px) {
  .kopf-portal { padding: .55rem .7rem; }
  .kopf-portal span { display: none; }
}


/* Summenzeile auf der Bestellseite für den Kundenzugang */
.bestell-summe {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 1.2rem 0 1rem; padding: .9rem 1.1rem;
  background: var(--bar); border-radius: var(--radius-sm);
}
.bestell-summe strong { font-size: 1.35rem; }
.bestell-summe .muted { font-size: .88rem; }


/* Logo des Anbieters oben auf der Bestellseite */
.anbieter-logo { margin: 0 0 1.2rem; }
.anbieter-logo img { height: 48px; width: auto; max-width: 100%; display: block; }
@media (max-width: 560px) { .anbieter-logo img { height: 38px; } }