/* AMARNA – gemeinsame mobile-first Ebene (wird nach den Seiten-Styles geladen)
   Reihenfolge: Grundlagen für alle Größen -> Telefon/Tablet (Touch) -> Tablet quer -> Desktop */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video{max-width:100%;height:auto}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
input,select,textarea{font-size:16px}               /* verhindert Auto-Zoom auf iOS */
:focus-visible{outline:2px solid #B08A3E;outline-offset:2px}

/* ---- gut lesbare Mindestgröße für kleine Beschriftungen (alle Bildschirme) ---- */
.eyebrow,.hero-eyebrow,.gc-badge,.badge,.imp-label,.imp-eyebrow,.ds-eyebrow,.pd-eyebrow,.pk-fee,.st,.acc-tag,
.pd-cnt,.pz-c,.cp,.d-remove,.d-pers,.d-pers em,.gc-btn,.add,.ribbon span,.card-num,.card-cat,.pz-h span,.ck-label small{font-size:12px!important}
small{font-size:max(.75rem,80%)}

/* ---- Menü-Schaltfläche + Seitenmenü ---- */
.nav-toggle,.hicons .nav-toggle{display:none!important;background:none;border:none;color:#A9863C;cursor:pointer}
.nav-toggle svg,.mnav-x svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7}
.mnav-bg{position:fixed;inset:0;background:rgba(40,32,18,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:180}
.mnav{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);background:#FBF7F0;z-index:190;transform:translateX(100%);visibility:hidden;
  transition:transform .3s ease,visibility .3s;display:flex;flex-direction:column;overflow-y:auto;box-shadow:-18px 0 40px rgba(40,32,18,.18);
  padding-bottom:env(safe-area-inset-bottom)}
html.mnav-open .mnav{transform:none;visibility:visible}
html.mnav-open .mnav-bg{opacity:1;visibility:visible}
html.mnav-open,html.mnav-open body{overflow:hidden}
.mnav-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 24px;border-bottom:1px solid #E8DCC2}
.mnav-head span{font-family:var(--serif,Georgia,serif);font-size:1.1rem;letter-spacing:.24em;text-transform:uppercase;color:#A9863C}
.mnav-x{width:48px;height:48px;border:none;background:none;color:#2E2519;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mnav-main a{display:flex;align-items:center;min-height:56px;padding:0 24px;font-family:var(--serif,Georgia,serif);font-size:1.35rem;color:#2E2519;border-bottom:1px solid #EFE4D2}
.mnav-main a.active{color:#A9863C}
.mnav-sub{padding:10px 0 20px}
.mnav-sub a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 24px;font-size:1rem;color:#4A4238}
.mnav-sub svg{width:20px;height:20px;stroke:#A9863C;fill:none;stroke-width:1.6;flex:none}

/* ---- Suche ---- */
.srch{position:fixed;left:0;right:0;top:0;z-index:200;background:#FBF7F0;border-bottom:1px solid #E8DCC2;box-shadow:0 14px 34px rgba(40,32,18,.16);
  padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));transform:translateY(-110%);visibility:hidden;transition:transform .25s,visibility .25s}
html.srch-open .srch{transform:none;visibility:visible}
.srch form{max-width:760px;margin:0 auto;display:flex;gap:8px;align-items:center}
.srch input{flex:1;min-width:0;height:48px;border:1px solid #D9C7A0;border-radius:10px;padding:0 14px;font-family:var(--sans,system-ui);background:#fff;color:#2E2519}
.srch input:focus{outline:none;border-color:#A9863C;box-shadow:0 0 0 3px rgba(169,134,60,.15)}
.srch button{height:48px;min-width:48px;border-radius:10px;border:1px solid #A9863C;background:#A9863C;color:#fff;font-family:var(--sans,system-ui);font-weight:600;padding:0 16px;cursor:pointer}
.srch button.srch-x{background:none;color:#2E2519;border-color:#D9C7A0;padding:0;font-size:1.4rem}

/* ================= Telefon & Tablet (Touch) ================= */
@media (max-width:1024px){
  /* Kopfzeile: 44-px-Tippflächen */
  .hicons{gap:2px!important}
  .hicons button,.hicons a.hic{width:44px;height:44px;padding:0!important;display:flex;align-items:center;justify-content:center}
  .nav-toggle{width:44px;height:44px;padding:0!important;align-items:center;justify-content:center}
  .brand{min-height:44px;display:flex;align-items:center}
  .mainnav a{padding-top:12px;padding-bottom:12px}
  /* Produktkarten & Wunschliste */
  .wish,.gc .wish{width:44px!important;height:44px!important}
  .gc-body h3 a,.card-body h3 a{display:block;padding:8px 0}
  .gs-quick button{min-height:44px}
  /* Warenkorb-Schublade */
  .d-qty button{width:40px!important;height:40px!important;border-radius:8px}
  .d-remove{min-height:40px;padding:10px 0 10px 12px!important}
  /* Brotkrumen, Inhaltsverzeichnis, Konto-Links */
  .crumbs a{display:inline-block;padding:12px 0}
  .ds-toc a{padding:10px 0;margin:0!important}
  .ad-act a,.acc-back,.acc-link,.acc-box>a,.wl .ad-act a{display:inline-flex;align-items:center;min-height:44px}
  .cp{min-height:40px;padding:6px 12px!important}
  /* Kontrollkästchen: ganze Zeile antippbar */
  .ck-check,.acc-check,.pz-row,.cats label,.chk{min-height:44px;align-items:center!important}
  .ck-check input,.acc-check input,.pz-row input{width:20px!important;height:20px!important;flex:none}
  .ck-mini{min-height:44px}
  .agb-b{min-height:44px;display:inline-flex;align-items:center}
  /* Fußzeile */
  .f2-links li{margin-bottom:0!important}
  .f2-links a{display:inline-flex;align-items:center;min-height:44px}
  .f2-legal a{display:inline-flex;align-items:center;min-height:44px}
  .f2-social a{width:48px!important;height:48px!important}
  .f2-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  /* Kundenkonto: Rasterspalte darf schrumpfen (verhindert seitliches Scrollen) */
  .acc-grid{grid-template-columns:minmax(0,1fr)!important}
  .acc-nav a{min-height:44px}
}
@media (min-width:1025px){ .acc-grid{grid-template-columns:250px minmax(0,1fr)!important} }
.paybox td{overflow-wrap:anywhere}

/* ================= nur Telefon/kleines Tablet: Menü-Schaltfläche statt Leiste ================= */
@media (max-width:980px){
  .nav-toggle,.hicons .nav-toggle{display:flex!important}
  .mainnav{display:none!important}
  .hwrap{padding-left:16px!important;padding-right:16px!important;gap:10px!important}
  .brand{margin-right:auto}
}
@media (max-width:400px){
  .lockup-h{height:36px!important;width:117px!important}
  .ds-toc{columns:1!important}
}

/* ---- Runde 2: verbleibende Befunde ---- */
.fee-note .big{line-height:1.1}
.pd-usps span,.ck-sums small,.tl-s small,.oc-info span,.pd-badges.v2 span{font-size:12px!important}
.ds-toc a{break-inside:avoid}
@media (max-width:1024px){
  .gc-body h3 a,.card-body h3 a{padding:11px 0}
  .drawer-head button{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .f2-links a,.f2-legal a{min-width:44px}
}
@media (max-width:900px){
  .acc-nav{display:grid!important;grid-template-columns:1fr 1fr;gap:4px}
  .acc-nav .acc-hello{grid-column:1/-1}
  .acc-nav a{padding:10px 12px}
}
@media (max-width:520px){
  .ds-toc{columns:1!important}
  .paybox table,.paybox tbody,.paybox tr,.paybox td{display:block;width:auto}
  .paybox tr{padding:5px 0;border-bottom:1px solid #EFE4D2}
  .paybox td{padding:0!important}
  .paybox td:first-child{font-size:12px}
  .paybox .cp{margin:6px 0 0!important;display:inline-flex;align-items:center}
  .pd-badges.v2 span{letter-spacing:.06em}
}

/* ---- Runde 3 ---- */
.ov-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.ov-stats span{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:1024px){ .mainnav a{min-width:44px;display:inline-flex;justify-content:center;align-items:center} }
@media (max-width:480px){
  .ov-stats a{padding:14px 8px!important}.ov-stats b{font-size:1.6rem!important}.ov-stats span{font-size:12px}
  .pd-badges.v2{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:22px!important;max-width:none}
}

/* ---- Runde 4 (Sichtprüfung) ---- */
@media (max-width:620px){
  .thumbs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px!important}
  .thumb{width:auto!important;height:auto!important;aspect-ratio:1/1}
  .hero-feats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important}
  .feat{max-width:none!important}
  .feat i{width:54px!important;height:54px!important}
  .feat b{font-size:.8rem!important}.feat span{font-size:12px!important}
}
.ck-recap b,.od-sum b,.d-price,.ck-p,.oi-p,.gc-price,.price,.pd-price,.oc-right b,.pk-price{white-space:nowrap}
@media (max-width:620px){
  .ck-steps{flex-wrap:nowrap!important;gap:4px!important;align-items:flex-start!important;margin-bottom:24px!important}
  .ck-step{flex-direction:column;gap:6px!important;text-align:center;font-size:12px!important;flex:0 0 auto;max-width:96px}
  .ck-line{flex:1 1 auto;width:auto!important;min-width:10px;margin-top:17px}
  .tl{padding:18px 8px!important;overflow:visible!important}
  .tl-s{min-width:0!important}
  .tl-s i{width:30px!important;height:30px!important}
  .tl-s b{font-size:12px!important;line-height:1.25;padding:0 2px}
  .tl-s:not(:last-child):after{left:calc(50% + 17px)!important;right:calc(-50% + 17px)!important;top:15px!important}
}

/* ---- Runde 5: Tablet/Desktop ---- */
@media (min-width:980px) and (max-width:1280px){
  .hero-bg{width:50%!important}
  .hero-copy{max-width:47%!important}
  .hero h1{font-size:clamp(2.3rem,3.9vw,3.1rem)!important}
  .hero-feats{gap:18px!important}.feat{max-width:128px!important}
}
@media (min-width:700px) and (max-width:980px){
  .pd-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px!important}
}
/* Bestellstatus als senkrechte Liste auf kleinen Telefonen */
@media (max-width:520px){
  .tl{flex-direction:column!important;gap:12px;padding:16px 18px!important}
  .tl-s{display:grid!important;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;text-align:left!important}
  .tl-s i{margin:0!important}
  .tl-s b{font-size:.9rem!important;padding:0!important}
  .tl-s small{text-align:right}
  .tl-s:not(:last-child):after{left:15px!important;right:auto!important;top:32px!important;width:2px!important;height:12px!important}
}