/* Edelmetallhandel Cürlis — von Hand geschrieben, kein Framework,
   keine Webfonts, keine fremden Skripte.

   Farbwelt: warmes Schwarz wie Samt im Schaufenster, echtes Gold als
   einziger Akzent, cremiger Hintergrund statt kaltem Weiss. Gold wird
   sparsam eingesetzt — es soll teuer wirken, nicht billig glitzern. */

:root{
  --gold:#b8912f;
  --gold-h:#a07d24;
  --gold-l:#d8b65c;
  --ink:#15130f;
  --ink-2:#2a2620;
  --body:#57514a;
  --body-l:#7a736a;
  --cream:#faf8f4;
  --tint:#f3efe6;
  --line:#e6e1d6;
  --line-d:#3a352d;
  --white:#fff;
  --gruen:#2c6e49;
  --rot:#a4321f;
  --wrap:1120px;
  --r:12px;
  --sh:0 1px 2px rgba(21,19,15,.04), 0 8px 28px rgba(21,19,15,.06);
  --f:-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  -webkit-tap-highlight-color:rgba(184,145,47,.14)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--f);font-size:16.5px;line-height:1.66;
  color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-h);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.14;margin:0 0 .5em;
  letter-spacing:-.022em;overflow-wrap:break-word}
h1{font-size:clamp(2.2rem,5.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.12rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin:.35em 0}
strong{color:var(--ink-2)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
[id]{scroll-margin-top:88px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:0}

/* ------------------------------------------------------------- Bausteine */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px;border-radius:999px;font-weight:700;font-size:1rem;
  border:1.5px solid transparent;cursor:pointer;transition:.18s ease;
  letter-spacing:-.01em;line-height:1.2;text-align:center;
}
.btn-1{background:var(--gold);color:#fff}
.btn-1:hover{background:var(--gold-h);color:#fff;transform:translateY(-1px)}
.btn-2{background:transparent;color:var(--ink);border-color:#cfc8ba}
.btn-2:hover{border-color:var(--ink);color:var(--ink)}
.btn-d{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-d:hover{background:rgba(255,255,255,.16);color:#fff}
.btn-sm{padding:11px 20px;font-size:.94rem}
.eyebrow{
  font-size:.8rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
.lead{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--body);max-width:62ch}
.sec{padding:clamp(60px,8vw,104px) 0}
.sec-tint{background:var(--cream)}
.sec-head{max-width:70ch;margin-bottom:clamp(34px,4vw,52px)}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.karte{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;transition:.18s ease;
}
.karte h3{margin-bottom:.35em}
.karte p{margin:0;font-size:.97rem}
.karte:hover{border-color:#d5cdbc;box-shadow:var(--sh)}
.ico{
  width:42px;height:42px;border-radius:10px;background:var(--tint);
  display:grid;place-items:center;margin-bottom:16px;color:var(--gold-h);
}
.ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- Kopf */

.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.logo{display:flex;flex-direction:column;line-height:1.05;color:var(--ink)}
.logo-1{font-weight:800;font-size:1.16rem;letter-spacing:-.02em}
.logo-2{font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink-2);font-size:.95rem;font-weight:600}
.nav a:hover{color:var(--gold-h)}
.nav .btn{color:#fff}
.tel-mobil{display:none}
.burger{display:none;background:0;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;
  transition:.2s;border-radius:2px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:block}
  .nav{
    position:fixed;inset:74px 0 auto;background:var(--white);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 22px 26px;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .22s ease;max-height:calc(100vh - 74px);
    overflow:auto;
  }
  .nav.offen{transform:translateY(0)}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav .btn{margin-top:16px;border-bottom:0}
}

/* ---------------------------------------------------------------- Hero */

.hero{position:relative;background:var(--ink);color:#cfc7ba;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 90% at 78% 18%, rgba(184,145,47,.30), transparent 62%),
    radial-gradient(50% 70% at 12% 92%, rgba(184,145,47,.12), transparent 70%);
}
.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;
  align-items:center;padding:clamp(60px,8vw,108px) 22px}
.hero h1{color:#fff;margin-bottom:.32em}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero .lead{color:#c4bcae;font-size:clamp(1.06rem,1.7vw,1.24rem)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 18px}
.hero-note{font-size:.9rem;color:#9a9287;display:flex;align-items:center;gap:9px}
.hero-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-l)}

/* Kursbox im Hero */
.kursbox{
  background:rgba(255,255,255,.055);border:1px solid rgba(216,182,92,.3);
  border-radius:16px;padding:28px 26px;backdrop-filter:blur(6px);
}
.kursbox .kb-t{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-l);margin:0 0 6px}
.kursbox .kb-s{font-size:.9rem;color:#9a9287;margin:0 0 18px}
.kb-preis{display:flex;align-items:baseline;gap:6px;color:#fff;
  font-size:clamp(2.4rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.kb-preis .eh{font-size:1.1rem;font-weight:600;color:#9a9287;letter-spacing:0}
.kb-stand{font-size:.82rem;color:#8c8478;margin:14px 0 0}
.kb-link{display:inline-block;margin-top:16px;color:var(--gold-l);font-weight:700;font-size:.95rem}
.kb-link:hover{color:#fff}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:34px}
}

/* -------------------------------------------------------------- Kurse */

.kurstabelle{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kurstabelle caption{text-align:left;padding:0 0 12px;color:var(--body-l);font-size:.9rem}
.kurstabelle th,.kurstabelle td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left}
.kurstabelle thead th{background:var(--tint);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.kurstabelle tbody tr:last-child td{border-bottom:0}
.kurstabelle tbody tr:hover{background:#fdfcfa}
.kurstabelle .leg{font-weight:700;color:var(--ink);display:block}
.kurstabelle .zus{font-size:.86rem;color:var(--body-l)}
.kurstabelle .preis{text-align:right;font-weight:800;color:var(--ink);
  font-size:1.22rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.kurstabelle .preis .eh{font-size:.82rem;font-weight:600;color:var(--body-l)}
.kurs-kopf{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:flex-end;
  justify-content:space-between;margin-bottom:18px}
.kurs-stand{font-size:.9rem;color:var(--body-l);margin:0}
.kurs-stand b{color:var(--ink)}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gruen);
  margin-right:7px;vertical-align:middle}
.punkt.alt{background:#c9a227}
.spotzeile{font-size:.88rem;color:var(--body-l);margin:14px 0 0;font-variant-numeric:tabular-nums}
.hinweisbox{background:var(--tint);border-radius:var(--r);padding:22px 24px;
  border-left:3px solid var(--gold)}
.hinweisbox h3{margin-bottom:.4em}
.hinweisbox p{margin:0;font-size:.95rem}
.warnbox{background:#fdf3e0;border-left-color:#c9a227}

/* ------------------------------------------------------------ Rechner */

.rechner{background:var(--ink);color:#cfc7ba;border-radius:16px;padding:clamp(26px,4vw,40px);
  display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.rechner h2{color:#fff}
.rechner .lead{color:#a79f93}
.rechner label{display:block;font-size:.85rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold-l);margin:0 0 8px}
.rechner input,.rechner select{
  width:100%;font:inherit;font-size:1.05rem;padding:14px 16px;border-radius:10px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;
}
.rechner select option{background:var(--ink);color:#fff}
.rechner input:focus,.rechner select:focus{outline:2px solid var(--gold-l);outline-offset:1px}
.rechner-feld{margin-bottom:18px}
.rechner-out{border-top:1px solid rgba(255,255,255,.16);margin-top:24px;padding-top:22px}
.rechner-out .lbl{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:#9a9287}
.rechner-out .val{font-size:clamp(2.2rem,5vw,3rem);font-weight:800;color:#fff;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.rechner .klein{font-size:.85rem;color:#8c8478;margin:12px 0 0}
@media (max-width:820px){.rechner{grid-template-columns:1fr;gap:24px}}

/* --------------------------------------------------------------- Rest */

.schritte{counter-reset:s;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.schritt{position:relative;padding-top:52px}
.schritt::before{
  counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--gold-l);
  display:grid;place-items:center;font-weight:800;font-size:1rem;
}
.schritt h3{margin-bottom:.3em}
.schritt p{font-size:.95rem;margin:0}

.band{background:var(--ink);color:#cfc7ba;text-align:center}
.band h2{color:#fff}
.band .lead{margin:0 auto 28px;color:#a79f93}
.band-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:700;
  color:var(--ink);position:relative;font-size:1.04rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 18px;max-width:72ch;font-size:.98rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.info{display:grid;gap:2px}
.info dt{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--body-l);
  margin-top:16px;font-weight:700}
.info dd{margin:0;color:var(--ink);font-weight:600}
.zeiten{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.zeiten td{padding:9px 0;border-bottom:1px solid var(--line);font-size:.97rem}
.zeiten td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.zeiten tr:last-child td{border-bottom:0}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;
  padding:7px 14px;border-radius:999px;background:var(--tint);color:var(--ink-2)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--body-l)}
.status.auf{background:#e8f3ec;color:var(--gruen)}
.status.auf::before{background:var(--gruen)}
.status.zu{background:var(--tint);color:var(--body)}

/* ------------------------------------------------------------ Formular */

.form-karte{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.4vw,36px)}
.feld{margin-bottom:18px}
.feld label{display:block;font-weight:700;font-size:.92rem;color:var(--ink);margin-bottom:7px}
.feld input,.feld select,.feld textarea{
  width:100%;font:inherit;padding:13px 15px;border:1px solid #d8d1c3;border-radius:10px;
  background:var(--white);color:var(--ink);
}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,145,47,.16)}
.feld .hint{font-size:.85rem;color:var(--body-l);margin:6px 0 0}
.zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;margin:20px 0}
.zustimmung input{margin-top:4px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--gold)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{padding:16px 18px;border-radius:10px;margin:0 0 18px;font-size:.95rem;display:none}
.form-status.an{display:block}
.form-status.ok{background:#e8f3ec;color:var(--gruen)}
.form-status.fehler{background:#fbeae7;color:var(--rot)}

/* ---------------------------------------------------------------- Fuss */

.ftr{background:var(--ink);color:#8c8478;padding:clamp(48px,6vw,72px) 0 28px;font-size:.94rem}
.ftr h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.ftr a{color:#b3aba0}
.ftr a:hover{color:var(--gold-l)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin:0 0 9px}
.ftr-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px}
.ftr .logo{color:#fff}
.ftr .logo-1{color:#fff}
.ftr-tag{margin:14px 0 6px;max-width:34ch}
.ftr-btm{border-top:1px solid var(--line-d);margin-top:38px;padding-top:22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.87rem}
@media (max-width:860px){.ftr-g{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.ftr-g{grid-template-columns:1fr}}

/* -------------------------------------------------------------- Seiten */

.seitenkopf{background:var(--cream);border-bottom:1px solid var(--line);
  padding:clamp(44px,6vw,76px) 0 clamp(34px,4vw,54px)}
.seitenkopf h1{margin-bottom:.3em}
.seitenkopf .lead{margin:0}
.text-seite{padding:clamp(44px,6vw,76px) 0}
.text-seite .inhalt{max-width:72ch}
.text-seite h2{font-size:1.32rem;margin:2.2em 0 .6em}
.text-seite h2:first-child{margin-top:0}
.text-seite p,.text-seite li{font-size:.99rem}
.text-seite address{font-style:normal;margin:0 0 1.1em}

.mini{font-size:.88rem;color:var(--body-l)}
.zentriert{text-align:center}
.mt-0{margin-top:0}

/* ---------------------------------------------------------------- Bilder */

.bild{
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--tint);
}
.bild img{width:100%;display:block}
.bild figcaption{
  font-size:.86rem;color:var(--body-l);padding:11px 15px;background:var(--white);
  border-top:1px solid var(--line);
}
.bild-hoch img{aspect-ratio:3/4;object-fit:cover}
.bild-quer img{aspect-ratio:4/3;object-fit:cover}
.bild-paar{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
@media (max-width:700px){.bild-paar{grid-template-columns:1fr}}

/* ------------------------------------------- Rechner in der Kurstabelle */

.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.nur-lesegeraet{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* Vier Tabellen, ein Raster. Ohne feste Spaltenbreiten richtet jede
   Tabelle sich nach dem eigenen Inhalt: Gold mit dreistelligen Preisen
   anders als Silber mit einstelligen — untereinander sieht das verrutscht
   aus. Feste Breiten fuer die beiden rechten Spalten stellen alle vier
   Tabellen auf dasselbe Raster; die erste Spalte nimmt den Rest. */
.kurstabelle{table-layout:fixed}
.kurstabelle th.preis-kopf{text-align:right;width:210px}
.kurstabelle th.gramm-kopf{text-align:right;width:190px}
/* Die Spalte muss buendig unter ihrer Ueberschrift stehen. Dafuer zwei
   Dinge: die Zelle rechtsbuendig (mit genug Gewicht, sonst gewinnt die
   allgemeine Zellenregel weiter oben), und die Einheit gehoert IN den
   Rahmen — stuende das "g" daneben, waere das Feld um dessen Breite
   nach links versetzt. */
.kurstabelle .rechner-zelle{white-space:nowrap;text-align:right}
.gramm-feld{
  display:inline-flex;align-items:baseline;gap:4px;
  padding:8px 10px;border:1px solid #d8d1c3;border-radius:8px;
  background:var(--white);text-align:right;
}
.gramm-feld:focus-within{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,145,47,.16)}
.rechner-zelle .gramm{
  width:62px;font:inherit;font-size:.98rem;padding:0;text-align:right;
  border:0;background:transparent;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.rechner-zelle .gramm:focus{outline:0}
.rechner-zelle .einheit{font-size:.85rem;color:var(--body-l)}
.rechner-zelle .ergebnis{
  display:block;margin-top:5px;font-weight:800;color:var(--gold-h);
  font-variant-numeric:tabular-nums;font-size:1rem;min-height:1.3em;
}
.kurstabelle tfoot td{
  background:var(--tint);font-weight:700;color:var(--ink);border-top:2px solid var(--line)}
.kurstabelle tfoot .summe{
  text-align:right;font-size:1.15rem;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.kurstabelle tfoot tr.leer{display:none}
.rechner-fuss{font-size:.88rem;color:var(--body-l);margin:10px 0 0}

/* ============================================================== Handy

   Alles, was nur auf dem Telefon gilt. Gemessen wird gegen 320 px
   (kleines iPhone SE) und 375 px (das haeufigste Format). Die Kurs-
   tabelle muss bei 375 ohne Seitwaertsschieben hineinpassen.        */

/* Auf Fingergeraeten gibt es kein Zeigen — Schwebezustaende wuerden
   nach einem Tipp haengenbleiben. */
@media (hover:none){
  .karte:hover{border-color:var(--line);box-shadow:none}
  .kurstabelle tbody tr:hover{background:transparent}
  .btn-1:hover{transform:none}
  a:hover{color:var(--gold-h)}
  .nav a:hover{color:var(--ink-2)}
}

/* Anrufen ohne Umweg ueber das Menue: gold, immer sichtbar. */
@media (max-width:900px){
  .hdr-in{gap:12px}
  /* Das Logo ist auch ein Link — auf dem Handy mit Daumenflaeche. */
  .logo{padding:7px 0}
  .tel-mobil{
    display:inline-flex;align-items:center;gap:7px;margin-left:auto;
    background:var(--gold);color:#fff;font-weight:700;font-size:.9rem;
    padding:15px 16px;border-radius:999px;line-height:1;letter-spacing:-.01em;
  }
  .tel-mobil svg{width:16px;height:16px;fill:currentColor}
  .tel-mobil:hover,.tel-mobil:active{color:#fff;background:var(--gold-h)}
  .nav{max-height:calc(100dvh - 74px)}
  /* Dunkler Schleier hinter dem offenen Menue; ein Tipp darauf schliesst es. */
  body.menue-offen{overflow:hidden}
  body.menue-offen::after{
    content:"";position:fixed;inset:0;background:rgba(21,19,15,.45);z-index:40}
}

@media (max-width:600px){
  /* Lange deutsche Woerter wie "Ankaufsbedingungen" passen sonst in
     keine Handyzeile. Getrennt wird nur hier, nicht am Rechner. */
  h1,h2,h3{-webkit-hyphens:auto;hyphens:auto}

  /* Kopf etwas flacher — 12 px mehr Inhalt auf jedem Bildschirm. */
  .hdr-in{height:62px}
  .nav{inset:62px 0 auto;max-height:calc(100dvh - 62px)}
  [id]{scroll-margin-top:74px}

  .kurstabelle th,.kurstabelle td{padding:12px 10px}
  .kurstabelle th.preis-kopf{width:116px}
  .kurstabelle th.gramm-kopf{width:112px}
  .kurstabelle .zus{display:none}
  /* 16 px ist die Grenze, unter der iOS beim Antippen hineinzoomt. */
  .rechner-zelle .gramm{width:46px;font-size:16px}
  .gramm-feld{padding:8px 8px}
  /* Die Summe darf nicht umbrechen und bestimmt damit die Breite der
     dritten Spalte. Damit die Tabelle bei 375 px trotzdem ganz hinein
     passt, geben Preis und Summe auf dem Handy etwas Schriftgroesse ab. */
  .kurstabelle tfoot .summe{font-size:1rem}
  .kurstabelle tfoot td{padding:12px 10px}
  .kurstabelle .preis{font-size:1.06rem}

  /* Grosse Knoepfe: volle Breite, kein Zielen noetig. */
  .hero-btns,.band-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn,.band-btns .btn{width:100%}
  .btn{padding:16px 24px}

  /* Fusszeilenlinks brauchen Platz zum Treffen. */
  .ftr li{margin:0}
  .ftr li a{display:inline-block;padding:9px 0}

  /* Telefonnummer und Mailadresse sind auf dem Handy die wichtigsten
     Links der Seite — sie brauchen eine Daumenflaeche. */
  .kontaktlinks a{display:inline-block;padding:11px 0;font-weight:700}
  .zustimmung input{width:22px;height:22px}

  .sec{padding:56px 0}
  .kurs-kopf{gap:10px 20px}
}

/* Sehr schmale Geraete (iPhone SE und aehnlich): Rand schmaler,
   Tabelle enger, Anrufknopf nur noch als Symbol. */
@media (max-width:370px){
  .wrap{padding:0 16px}
  .hero-in{padding:56px 16px}
  .kurstabelle th,.kurstabelle td{padding:11px 7px}
  .kurstabelle th.preis-kopf{width:104px}
  .kurstabelle th.gramm-kopf{width:100px}
  .kurstabelle tfoot td{padding:11px 7px}
  .kurstabelle .preis{font-size:1rem}
  .kurstabelle tfoot .summe{font-size:.95rem}
  .rechner-zelle .gramm{width:42px}
  .gramm-feld{padding:8px 6px;gap:3px}
}
@media (max-width:360px){
  .tel-mobil span{display:none}
  .tel-mobil{padding:14px}
}