/* ==========================================================================
   style.css – Vilsimker (vilsimker.de)
   --------------------------------------------------------------------------
   Enthält:
   - Root-Variablen, Layout/Typografie
   - Header/Navigationsleiste (Burger + immer sichtbarer "Kasse"-Button)
   - Hero-Bereich
   - Buttons (Standard, Outline, Danger, .btn-inline, .btn-small)
   - Hinweis-/CTA-Boxen (inkl. Firefox-Fix)
   - Produktkarten / Grid
   - Checkout-Tabelle + Mobile-Card-Ansicht
   - Notices / Rechtliches / Footer
   - Toast & Inline-Feedback (AJAX)
   - Responsive Breakpoints
   ========================================================================== */

/* ============================= Variablen ============================== */
:root{
  /* Farben */
  --honey-500:#E6B800; --honey-600:#d4a700;
  --cacao-800:#5A4634;
  --linen-50:#FAF8F2; --paper:#FFFFFF;
  --sage-600:#6B8E23; --danger-600:#D14343;

  /* Radius & Schatten */
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);

  /* Abstände */
  --container-pad:20px;   /* globaler Seitenabstand */
  --content-inset:18px;   /* Innenabstand in Karten/Boxen */
}

/* ============================ Grundlayout ============================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--cacao-800); background:var(--linen-50);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Container mit konsistentem Seiteninset */
.container{max-width:1200px; margin:0 auto; padding-inline:var(--container-pad)}

/* ====================== Header / Navigation ====================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  box-shadow:0 1px 0 rgba(0,0,0,.06)
}

/* Header-Layout: 
   Desktop:  Brand | Nav (flex) | CTA(Kasse) | Burger(rechts am Rand)
   Mobil:    Brand | (CTA zentriert) | Burger (ganz rechts)
*/
.header-row{
  display:grid; align-items:center; min-height:64px;
  grid-template-columns: auto 1fr auto auto; /* Brand | Nav | CTA | Burger */
  column-gap:12px;
}

/* Branding */
.brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:700}
.brand span{font-family:'Playfair Display',serif; font-size:1.25rem}

/* Navigation (Desktop sichtbar, Mobil einklappbar) */
.main-nav{display:flex; gap:18px; align-items:center; justify-self:start;}
.main-nav a{text-decoration:none; color:var(--cacao-800); font-weight:600}
.main-nav a.active{border-bottom:2px solid var(--honey-500)}

/* Immer sichtbarer "Kasse"-Button rechts (vor dem Burger) */
.header-cta{display:flex; align-items:center; gap:12px; justify-self:end}

/* Burger – IMMER sichtbar, ganz rechts; an den Displayrand geschoben */
.burger{
  display:flex; flex-direction:column; justify-content:center;
  width:28px; height:22px; gap:5px; cursor:pointer;
  justify-self:end;
  margin-right:calc(-1 * var(--container-pad)); /* bis an den Rand */
}
.burger span{display:block; height:3px; background:var(--cacao-800); border-radius:2px; transition:0.3s}

/* Warenkorb-Zähler (kleines Badge) */
.cart-badge{
  display:inline-flex; min-width:20px; padding:0 6px; height:20px;
  align-items:center; justify-content:center; font-size:.75rem;
  border-radius:999px; background:var(--honey-500); margin-left:6px
}

/* ========================= Hero / Intro ========================== */
.hero{
  background:
    linear-gradient(180deg,#fff,rgba(255,255,255,0)),
    url('../images/texture-wax.png') center/cover no-repeat;
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
  padding-block:36px; max-width:1200px; margin:0 auto
}
.hero-inner:not(.container){padding-inline:var(--container-pad)}
.hero-copy{max-width:680px; padding-left:var(--content-inset) !important}
.hero h1{font-family:'Playfair Display',serif; font-size:clamp(28px,4vw,44px); line-height:1.15; margin:0 0 12px}
.lead{font-size:clamp(16px,2.2vw,20px); line-height:1.45; margin:0 0 16px}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-block; background:var(--paper); border:1px solid rgba(0,0,0,.06); padding:6px 10px; border-radius:999px; font-weight:600}
.badge-sage{background:rgba(107,142,35,.12); border-color:rgba(107,142,35,.25)}
.hero-img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}

/* Flash / Hinweis oberhalb Produkte */
.flash{
  max-width:1200px; margin:12px auto; padding:12px 16px;
  background:#f5fde8; border-left:4px solid var(--sage-600); border-radius:10px
}

/* ============================== Buttons ============================== */
.btn,
.btn:link,
.btn:visited{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px;
  padding:10px 16px; border-radius:12px;
  font-weight:700; line-height:1; border:0;
  background:var(--honey-500); color:#1f170f;
  text-decoration:none; cursor:pointer;
  transition:transform .04s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--honey-600)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* Dezent (Kontur) */
.btn-outline{
  background:transparent; color:var(--cacao-800);
  border:2px solid var(--honey-500);
  padding:11px 16px;
}
.btn-outline:hover{background:rgba(230,184,0,.14)}

/* Danger-Outline */
.btn-danger-outline{
  background:transparent; color:var(--danger-600);
  border:2px solid var(--danger-600);
}
.btn-danger-outline:hover{background:rgba(209,67,67,.08)}
.btn-danger-outline.btn-inline{border-width:1px}

/* Kompakter Inline-Button */
.btn-inline{
  display:inline-block; vertical-align:baseline;
  min-height:0 !important; height:auto !important;
  line-height:1.35; padding:.15em .55em; border-radius:.6em; font-weight:700;
}
.btn-outline.btn-inline{ border-width:1px; padding:.2em .6em }

/* Kleiner Button (für Header-CTA „Kasse“) */
.btn-small{
  min-height:34px; padding:6px 10px; border-radius:10px; font-weight:700;
}

/* Fokus sichtbar */
.btn:focus-visible,
.btn-inline:focus-visible{ outline:3px solid rgba(230,184,0,.35); outline-offset:2px }

/* ===================== Hinweise / CTA-Boxen ====================== */
.hint{
  margin-top:12px; padding:14px 16px; background:#fffdf3;
  border:1px solid #f0e3a6; border-radius:12px;
}
/* CTA kompakt (inkl. Firefox-Fix) */
.hint-cta{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  gap:10px; height:auto !important;
}
.hint-cta > *{ flex:0 0 auto !important; }
.hint-cta .hint-text{ margin:0 !important; }
.hint-cta .btn{ margin:0 !important; width:auto; }

/* ====================== Produktliste / Karten ====================== */
.products{padding:28px 0 48px}
.section-title{font-family:'Playfair Display',serif; font-size:clamp(22px,3vw,28px); margin:8px 0 16px}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}

.card{
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column
}
.card-media img{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover}
.card-body{padding:var(--content-inset)}
.card-title{font-family:'Playfair Display',serif; font-size:1.2rem; margin:0 0 6px}
.card-desc{margin:0 0 10px; color:#6c5b4b}
.price{font-weight:700; font-size:1.05rem; margin:0 0 6px}
.tax-suffix{font-size:.92rem; color:#6c5b4b; margin:0 0 6px}
.stock{margin:4px 0 12px; font-size:.92rem}
.stock.ok{color:#2f8f2f}
.stock.low{color:#9e6b00}
.stock.out{color:var(--danger-600)}
.add-form{display:flex; gap:10px; align-items:center}
.qty{width:68px; padding:8px 10px; border:1px solid #e5ddd4; border-radius:10px; font-weight:600}

/* =================== Checkout – Tabelle & Notices =================== */
.cart-table{width:100%; border-collapse:collapse}
.cart-table th,.cart-table td{padding:10px; border-bottom:1px solid #eee; text-align:left; vertical-align:middle}
.cart-table th{font-weight:700}

/* kleines Produktbild */
.cart-thumb{
  width:56px; height:56px;
  object-fit:cover; border-radius:10px;
  box-shadow:var(--shadow);
  display:block;
  flex-shrink:0;
}

.cart-actions{display:flex; align-items:center; gap:8px}

.qty-sm{
  width:64px; padding:6px 8px; border:1px solid #e5ddd4; border-radius:10px; font-weight:600;
}

/* Summen */
.cart-total{display:flex; justify-content:flex-end; gap:16px; align-items:center; margin-top:12px}
.cart-total .sum{font-weight:700; font-size:1.1rem}

/* Notices */
.notice-ok{background:#f5fde8; border-left:4px solid var(--sage-600); padding:12px 16px; border-radius:10px}
.notice-err{background:#fff5f5; border-left:4px solid var(--danger-600); padding:12px 16px; border-radius:10px}

/* ========================= Rechtliche Hinweise ======================== */
.legal-note{font-size:.92rem; color:#6c5b4b}

/* ============================ Footer ============================ */
.site-footer{background:var(--cacao-800); color:#fff; margin-top:24px; padding-top:28px}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; padding-bottom:12px}
.site-footer a{color:var(--honey-500); text-decoration:none}
.copy{text-align:center; padding:14px; border-top:1px solid rgba(255,255,255,.12); font-size:.9rem}

/* ============================== A11y ============================== */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* ======================== Toast & Inline-Feedback ======================= */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#f5fde8; color:#304c10; border-left:4px solid var(--sage-600);
  padding:10px 14px; border-radius:12px; box-shadow:var(--shadow);
  z-index:2000; transition:opacity .25s ease; opacity:0;
}
.mini-flash{
  margin-top:10px; padding:8px 10px; border-radius:10px;
  font-size:.92rem; box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.mini-flash.mini-ok{ background:#f5fde8; border-left:4px solid var(--sage-600); }
.mini-flash.mini-err{ background:#fff5f5; border-left:4px solid var(--danger-600); }

/* =========================== Responsive =========================== */

/* ---- Mobile Header: Brand | Kasse (zentriert) | Burger (am Rand) ---- */
@media (max-width: 768px){
  /* Container im Header etwas schmaler, damit der Burger noch näher an den Rand kann */
  .site-header .container{ padding-inline:12px; }

  .header-row{
    grid-template-columns: auto 1fr auto; /* Brand | Mitte | Burger */
  }

  /* Brand links */
  .brand{ justify-self:start; }

  /* Kasse in die Mitte */
  .header-cta{
    justify-self:center;
  }

  /* Burger ganz rechts – an den Displayrand „ziehen“ */
  .burger{
    justify-self:end;
    margin-right:-12px; /* gleicht das 12px-Header-Padding aus → bündig am Rand */
  }

  /* Navigation einklappbar */
  .main-nav{
    position:absolute; top:64px; right:0; left:0;
    flex-direction:column; align-items:flex-start;
    background:var(--paper); width:100%;
    max-height:0; overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.1); transition:max-height .3s ease;
  }
  .main-nav.open{max-height:300px; padding:10px var(--container-pad)}
  .main-nav a{margin:10px 0; display:block}

  /* Hero untereinander */
  .hero-inner{grid-template-columns:1fr; gap:20px}

  /* CTA-Box mobil: Button vollbreit */
  .hint-cta .btn{ width:100%; }
}

/* ---- Desktop: 4-Spalten-Header + Burger rechts vom CTA ---- */
@media (min-width: 769px){
  .header-row{ grid-template-columns: auto 1fr auto auto; }
  .brand{ justify-self:start; }
  .main-nav{ justify-self:start; }
  .header-cta{ justify-self:end; }
  .burger{
    justify-self:end;
    margin-right:calc(-1 * var(--container-pad)); /* bündig zum Displayrand */
  }
  /* Kasse-Button etwas kompakter als Standard */
  .header-cta .btn{ min-height:36px; padding:8px 12px; border-radius:10px; }
}

/* ===== Mobile-Optimierung Checkout (Card-Ansicht) – bis 900px ===== */
@media (max-width: 900px){
  .cart-table{ border:0; }
  .cart-table thead{ display:none; }
  .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }

  .cart-table tr{
    background:var(--paper);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:12px;
    margin-bottom:12px;
  }
  .cart-table td{ border:0; padding:8px 0; }

  .cart-table td::before{
    content:attr(data-label);
    display:block;
    font-weight:700; color:#6c5b4b; margin-bottom:4px;
  }

  .cart-table td[data-label="Artikel"]{
    display:grid !important;
    grid-template-columns:80px 1fr;
    gap:12px; align-items:center; padding-top:0;
  }
  .cart-table td[data-label="Artikel"] img,
  .cart-table td[data-label="Artikel"] .cart-thumb{
    width:80px !important; height:80px !important;
    object-fit:cover !important; display:block;
    border-radius:10px; box-shadow:var(--shadow);
  }

  .cart-table td[data-label="Menge"] .cart-actions{ justify-content:flex-start; gap:10px; }
  .qty-sm{ width:86px; padding:8px 10px; font-size:1rem; }

  .cart-table td[data-label="Aktion"]{ display:flex; justify-content:flex-end; padding-bottom:0; }
}

/* --- Checkout: Produktbild zusätzlich ZWINGEND klein halten --- */
.cart-table td[data-label="Artikel"] img.cart-thumb{
  width:72px !important;
  height:72px !important;
  object-fit:cover !important;
  display:block;
  border-radius:10px;
  box-shadow:var(--shadow);
}

/* Text-Buttons in der Kasse kompakt & tappbar */
.cart-actions .btn-inline{
  padding:.35em .75em;
  font-weight:700;
}

/* Kleinste Screens */
@media (max-width: 380px){
  .brand span{font-size:1.1rem}
  .badge{padding:5px 8px}
  .qty{width:60px}
  .qty-sm{width:56px}
}

/* ====================== Aufräumen / Entferntes ====================== */
/* Alle FAB-/Sticky-Cart-Reste sicherheitshalber deaktivieren */
.fab-cart, .sticky-cartbar{ display:none !important; visibility:hidden !important; }


/* === Header-Randabstände feinjustieren === */

/* Abstand zwischen Kasse (Mitte) und Burger (rechts) auf Mobil */
@media (max-width:768px){
  .header-row{
    column-gap: 16px; /* hier größer/kleiner stellen */
  }
}
/* === Burger-Größe & Strichdicke === */
:root{
  --burger-box: 36px;   /* Kantenlänge der klickbaren Fläche (Breite/Höhe). Größere Klickfläche? Erhöhe --burger-box (z. B. 36px) */
  --burger-bar: 5px;    /* Dicke der drei Linien. Dünnere/dickere Linien? Passe --burger-bar an (z. B. 2px oder 4px). */
  --burger-gap: 5px;    /* Abstand zwischen den Linien */
  --header-min-h: 64px; /* Gesamthöhe des Headers (Zeile). Mehr Luft oben/unten im gesamten Header? Erhöhe --header-min-h. */
}

.header-row{
  min-height: var(--header-min-h);
}

.burger{
  width: var(--burger-box);
  height: var(--burger-box);
  gap: var(--burger-gap);
}

.burger span{
  height: var(--burger-bar);
  border-radius: 2px;
}

@media (max-width:768px){
  .site-header .container{
    padding-left:  max(var(--header-pad-mobile), env(safe-area-inset-left));
    padding-right: max(var(--header-pad-mobile), env(safe-area-inset-right));
  }
}

/* =========================
   1) Header-Randabstand (links/rechts)
   - Steuert, wie nah der Inhalt (inkl. Burger) am Displayrand sitzt
   ========================= */
:root{
  /* Desktop- und Mobile-Padding separat einstellbar */
  --header-pad-desktop: 40px;  /* ↑ größer = weiter weg vom Rand Desktop-Rand links/rechts */
  --header-pad-mobile:  35px;  /* Mobil-Rand links/rechts (enger = Burger näher am Rand) */
}
.site-header .container{
  padding-inline: var(--header-pad-desktop);
}
@media (max-width:768px){
  .site-header .container{
    padding-inline: var(--header-pad-mobile); /* z.B. 6–12px, wenn der Burger näher an den Rand soll */
  }
}
/* =========================
   2) Kasse-Button (Größe & „Gefühl“)
   - Höhe über min-height/padding, Breite über padding/min-width
   - Greift NUR für den Button im Header
   ========================= */
.header-cta .btn,
.header-cta .btn-small{
  font-size: .95rem;   /* Textgröße */
  min-height: 34px;    /* Gesamthöhe (mit Padding) */
  padding: 8px 12px;   /* ↑ steuert Höhe, ←→ steuert Breite */
  min-width: 110px;    /* Mindestbreite, damit er mittig „ruhig“ wirkt */
  border-radius: 10px; /* Optik */
}

/* Optional: pixelgenaue feste Maße (falls gewünscht) */
.header-cta .btn-small{
  height: 36px;        /* fixe Höhe */
  padding-top: 0;
  padding-bottom: 0;
  width: 120px;        /* fixe Breite */
}
/* =========================
   3) Desktop-Header-Ausrichtung
   - Sorgt dafür, dass die Nav links bleibt,
     der Kasse-Button nach rechts schiebt
     und der Burger GANZ rechts steht
   ========================= */
@media (min-width:769px){
  .header-row{
    display:flex;
    align-items:center;
  }
  .main-nav{
    margin-left:16px;   /* Abstand hinter dem Logo */
  }
  .header-cta{
    margin-left:auto;   /* schiebt Kasse nach ganz rechts */
  }
  .burger{
    margin-left:12px;   /* kleiner Abstand zwischen Kasse & Burger */
  }
}
/* =========================
   4) Burger-Größe & Strich-Dicke
   - Wenn der Burger höher/breiter wirken soll
   ========================= */
.burger{
  width: 38px;          /* Breite des Icons */
  height: 34px;         /* „Zeilenhöhe“ – wirkt höher */
  gap: 6px;             /* Abstand zwischen den Strichen */
}
.burger span{
  height: 3px;          /* Strich-Dicke (2–4px) */
  border-radius: 2px;
}

/*
Randabstand zum Display:
--header-pad-mobile (mobil) & --header-pad-desktop (desktop).
Kasse-Button Höhe: min-height oder das vertikale padding in .header-cta .btn(.btn-small).
Kasse-Button Breite: padding-left/right oder min-width (oder width bei fixer Größe).
Burger weiter an den Rand: --header-pad-mobile runter (z.B. 8px), ggf. .burger{ width/height } feinjustieren.
Abstand Kasse ↔ Burger: @media (min-width:769px) .burger{ margin-left:12px; } erhöhen/verkleinern.*/
/* === Header immer sichtbar (fixed) + Platz oben für den Inhalt === */

:root{
  /* Header-Höhen kannst du hier anpassen */
  --header-h-desktop: 64px;
  --header-h-mobile:  64px;
}

.site-header{
  position: fixed;        /* statt sticky */
  top: 0; left: 0; right: 0;
  z-index: 1000;          /* sicher über dem Inhalt */
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Platz für den festen Header schaffen */
body{
  padding-top: var(--header-h-desktop);
}

@media (max-width: 768px){
  body{
    /* safe-area für iPhone-Notch inkludieren */
    padding-top: calc(var(--header-h-mobile) + env(safe-area-inset-top));
  }
}

/* Mobile-Dropdown-Nav: unter dem fixen Header aufklappen */
@media (max-width: 768px){
  .main-nav{
    position: absolute;
    top: var(--header-h-mobile);  /* vorher: 64px */
    left: 0; right: 0;
    /* ...deine weiteren .main-nav-Styles bleiben gültig ... */
  }
}

/* === Button-Utilities: gleiche Breite + Farbvarianten === */

/* visuell gleiche Breite für zwei Buttons */
.btn--equal { inline-size: clamp(220px, 42vw, 320px); text-align:center; }

/* Button-Reihe mittig */
.btn-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* mobil beide vollbreit untereinander 
@media (max-width:560px){
  .btn--equal { inline-size:100%; }
  .btn-row { flex-direction:column; }
}
*/

/* mobil: Buttons nebeneinander, gleiche Breite, kein Zeilenumbruch */
@media (max-width:560px){
  .btn-row{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;         /* kein Umbruch */
    gap:10px;
  }
  .btn--equal{
    flex:1 1 0;               /* 50/50 aufteilen */
    min-width:0;              /* darf schmaler werden */
    inline-size:auto;
    text-align:center;
    white-space:nowrap;       /* verhindert Umbruch im Button */
    font-size:.95rem;         /* dein Wunsch */
    padding-inline:10px;      /* etwas kompakter, hilft gegen Umbruch */
    overflow:hidden;          /* Sicherheitsnetz bei sehr schmalen Screens */
    text-overflow:ellipsis;   /* ... falls es dennoch zu lang wird */
  }
}



/* Farb-Modifier (optional pro Button einsetzbar) */
.btn--honey   { background: var(--honey-500); color:#1f170f; }
.btn--honey:hover{ background: var(--honey-600); }

.btn--outline { background:#fff; color:var(--cacao-800); border:2px solid var(--honey-500); }
.btn--outline:hover{ background:rgba(230,184,0,.12); }

/* weitere Beispiele, falls du willst:
.btn--sage    { background: var(--sage-600); color:#fff; }
.btn--cacao   { background: var(--cacao-800); color:#fff; }
.btn--danger  { background: var(--danger-600); color:#fff; }
*/

/* Artikel-Zeile: Wrapper + Entfernen-Button (Lösung B) */
.cart-table td[data-label="Artikel"] .item{
  display:flex; align-items:center; gap:12px; width:100%;
}
.cart-table td[data-label="Artikel"] .item .name{ flex:1 1 auto; }

/* Entfernen-Icon-Button */
.row-remove{
  background:transparent;
  border:0;
  color:var(--danger-600);
  font-size:20px;
  line-height:1;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
}
.row-remove:hover{ background:rgba(209,67,67,.08); }

/* Mobile: TD nicht mehr zum Grid machen – stattdessen den Wrapper */
@media (max-width:900px){
  .cart-table td[data-label="Artikel"]{ display:block !important; }
  .cart-table td[data-label="Artikel"] .item{
    display:grid;
    grid-template-columns:80px 1fr auto;
    gap:12px; align-items:center;
  }
  .cart-table td[data-label="Artikel"] .cart-thumb{
    width:80px !important; height:80px !important; object-fit:cover !important;
    border-radius:10px; box-shadow:var(--shadow);
  }
  .row-remove{ font-size:22px; padding:8px 10px; justify-self:end; }
}

/* Buttons (Anchor vs. Button) optisch 100% angleichen */
a.btn, button.btn, input[type="submit"].btn {
  font-family: inherit;
  font-size: 14px;      /* gleiche Schriftgröße für beide */
  line-height: 1.2;     /* konsistente Höhe */
  font-weight: 700;     /* falls irgendwo überschrieben wurde */
}

/* gleiche Breite behältst du über .btn--equal */
.btn--equal { inline-size: clamp(220px, 42vw, 320px); }

/* mobil nebeneinander (wie eingestellt) */
@media (max-width:560px){
  .btn-row{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:10px; }
  .btn--equal{
    flex:1 1 0; min-width:0; inline-size:auto; text-align:center;
    white-space:nowrap; font-size: .95rem; padding-inline:10px;
    overflow:hidden; text-overflow:ellipsis;
  }
}