/* =====================================================================
   PFOTENMUT – Öffentliche Seite
   Der Weg der Seite bildet den Weg des Besuchers ab: Sie beginnt im
   Dunkeln (Waldgrün) und öffnet sich nach unten ins Helle (Papier).
   Keine extern geladenen Schriften.
   ===================================================================== */

:root{
  --wald:        #232B1B;
  --wald-tief:   #1A2015;
  --oliv:        #3F4A2E;
  --oliv-hell:   #5C6B44;
  --oliv-blass:  #EDF0E4;

  --papier:      #F4F1E8;
  --papier-warm: #EAE5D6;
  --linie:       #DDD6C4;
  --weiss:       #FFFFFF;

  --creme:       #EDEADF;
  --creme-matt:  rgba(237,234,223,.72);

  --tinte:       #23282B;
  --text:        #2F2F29;
  --grau:        #6E6A5F;
  --grau-hell:   #98927F;

  --orange:      #C0632B;
  --orange-hell: #D98A4E;
  --orange-blass:#FBF0E2;

  --stufe1:#7BA063; --stufe2:#A8AE55; --stufe3:#D9A441;
  --stufe4:#C0632B; --stufe5:#A6402B;

  --breit: 1120px;
  --schmal: 720px;
  --rund: 12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--text);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--oliv); text-underline-offset:3px}

.bahn{max-width:var(--breit); margin:0 auto; padding:0 24px}
.bahn.schmal{max-width:var(--schmal)}

/* --- Etikett: das Strukturmittel aus dem Workbook ------------------- */
.etikett{
  font-size:11.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grau-hell); margin:0 0 12px;
}
.etikett.hell{color:rgba(237,234,223,.5)}

h1,h2,h3{color:var(--tinte); letter-spacing:-.025em; margin:0}
h1{font-size:clamp(34px,6vw,60px); line-height:1.05; font-weight:800}
h2{font-size:clamp(26px,3.6vw,38px); line-height:1.15; font-weight:700}
h3{font-size:19px; line-height:1.3; font-weight:700}

.vorspann{font-size:clamp(17px,1.9vw,20px); line-height:1.6; color:var(--grau)}

section{padding:clamp(56px,8vw,104px) 0}

/* =====================================================================
   Kopf
   ===================================================================== */
.kopfleiste{
  position:sticky; top:0; z-index:20;
  padding:13px 0; background:rgba(244,241,232,.93);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--linie);
}
.kopfleiste .bahn{display:flex; align-items:center; gap:clamp(14px,3vw,34px)}
.wortmarke{color:var(--tinte); font-size:20px; font-weight:800; letter-spacing:-.02em;
           text-decoration:none; flex:0 0 auto}
.wortmarke small{display:block; font-size:9.5px; font-weight:600; letter-spacing:.16em;
                 text-transform:none; color:var(--grau-hell); margin-top:1px}
.wortmarke.hell{color:#fff}
.wortmarke.hell small{color:rgba(237,234,223,.45)}

.hauptmenue{display:flex; gap:clamp(14px,2.4vw,28px); margin-left:auto}
.hauptmenue a{
  color:var(--grau); text-decoration:none; font-size:15px; font-weight:600;
  padding:5px 0; border-bottom:2px solid transparent;
}
.hauptmenue a:hover{color:var(--oliv); border-bottom-color:var(--oliv-hell)}

.kopf-rechts{display:flex; align-items:center; gap:16px; flex:0 0 auto}
.kopf-tel{
  color:var(--tinte); text-decoration:none; font-size:15.5px; font-weight:700;
  white-space:nowrap;
}
.kopf-tel small{display:block; font-size:11px; font-weight:600; color:var(--grau-hell);
                letter-spacing:.05em}
.kopf-tel:hover{color:var(--oliv)}
.knopf.kompakt{padding:10px 18px; font-size:15px}

/* =====================================================================
   Auftakt – hell und offen, das Bild trägt die rechte Seite
   ===================================================================== */
.auftakt{
  background:
    radial-gradient(70% 90% at 88% 12%, rgba(192,99,43,.09), transparent 62%),
    linear-gradient(178deg, #FAF8F2 0%, var(--papier) 58%, var(--papier-warm) 100%);
  padding:clamp(44px,6vw,74px) 0 clamp(52px,7vw,86px);
  position:relative; overflow:hidden;
}
.auftakt-raster{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,5vw,64px); align-items:center;
}
.auftakt h1{max-width:15ch}
.auftakt h1 em{font-style:normal; color:var(--orange)}
.auftakt .vorspann{max-width:46ch; margin:20px 0 0}
.auftakt-hand{
  font-size:clamp(17px,2vw,20px); color:var(--tinte); margin:26px 0 0;
  padding-left:18px; border-left:3px solid var(--orange); line-height:1.5;
  font-weight:600;
}

/* Bildseite mit aufgesetztem Hinweis */
.auftakt-bild{position:relative}
.auftakt-bild .rahmen{
  aspect-ratio:1/1; border-radius:var(--rund); overflow:hidden;
  background:var(--oliv) 56% 42%/cover no-repeat;
  background-image:url('/assets/img/auftakt.jpg');
  box-shadow:0 3px 8px rgba(35,40,43,.05), 0 22px 54px rgba(35,40,43,.13);
}
.abzeichen{
  position:absolute; left:-18px; bottom:26px;
  background:var(--weiss); border:1px solid var(--linie);
  border-radius:11px; padding:15px 20px;
  box-shadow:0 3px 8px rgba(35,40,43,.06), 0 16px 38px rgba(35,40,43,.13);
  max-width:240px;
}
.abzeichen b{
  display:block; font-size:16px; font-weight:800; color:var(--oliv);
  letter-spacing:-.01em; margin-bottom:2px;
}
.abzeichen span{display:block; font-size:13.5px; line-height:1.45; color:var(--grau)}

@media (max-width:900px){
  .auftakt-raster{grid-template-columns:1fr; gap:34px}
  .auftakt-bild{max-width:440px; margin:0 auto; width:100%}
  .auftakt-bild .rahmen{aspect-ratio:4/3}
  .abzeichen{left:14px; bottom:-16px}
  .hauptmenue{display:none}
}

.knopf-reihe{display:flex; gap:13px; flex-wrap:wrap; margin-top:36px}

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:8px; font-size:16px; font-weight:700;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  font-family:inherit; transition:background .15s,border-color .15s,color .15s;
}
.knopf.haupt{background:var(--orange); color:#fff; border-color:var(--orange)}
.knopf.haupt:hover{background:#AA5624; border-color:#AA5624}
.knopf.geist{background:transparent; color:var(--creme); border-color:rgba(237,234,223,.32)}
.knopf.geist:hover{border-color:var(--creme); background:rgba(237,234,223,.07)}
.knopf.dunkel{background:var(--oliv); color:#fff; border-color:var(--oliv)}
.knopf.dunkel:hover{background:var(--oliv-hell); border-color:var(--oliv-hell)}
.knopf.linie{background:transparent; color:var(--oliv); border-color:var(--linie)}
.knopf.linie:hover{border-color:var(--oliv-hell); background:var(--oliv-blass)}
.knopf.breit{width:100%; padding:16px}

/* Vertrauensmerkmale unter dem Auftakt */
.merkmale{
  display:flex; gap:clamp(18px,3.5vw,44px); flex-wrap:wrap;
  margin-top:38px; padding-top:24px; border-top:1px solid var(--linie);
}
.merkmal b{display:block; color:var(--tinte); font-size:23px; font-weight:800; letter-spacing:-.02em}
.merkmal span{font-size:13.5px; color:var(--grau)}

/* =====================================================================
   Angst-Landkarte – das Herzstück
   ===================================================================== */
.landkarte{background:var(--papier-warm); border-top:1px solid var(--linie)}
.landkarte-kopf{max-width:var(--schmal); margin:0 auto 40px; text-align:center}
.landkarte-kopf .vorspann{margin:14px auto 0; max-width:52ch}

.karten-blatt{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--rund);
  box-shadow:0 2px 4px rgba(35,40,43,.03), 0 14px 40px rgba(35,40,43,.06);
  max-width:780px; margin:0 auto; overflow:hidden;
}
.blatt-kopf{
  padding:18px 26px; background:var(--oliv); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.blatt-kopf b{font-size:15.5px}
.blatt-kopf span{font-size:12.5px; color:rgba(255,255,255,.62)}

.zeile{
  padding:17px 26px; border-bottom:1px solid var(--linie);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.zeile:last-of-type{border-bottom:0}
.zeile-text{flex:1; min-width:200px}
.zeile-text b{display:block; font-size:11.5px; font-weight:700; letter-spacing:.13em;
              text-transform:uppercase; color:var(--tinte); margin-bottom:2px}
.zeile-text span{font-size:14.5px; color:var(--grau); line-height:1.45}

/* Die Zehnerskala */
.punkte{display:flex; gap:5px; align-items:center}
.punkte button{
  width:26px; height:26px; padding:0; cursor:pointer;
  border:1.5px solid var(--linie); background:var(--papier);
  border-radius:50%; font:600 11px/1 inherit; color:var(--grau-hell);
  transition:transform .12s, background .12s, border-color .12s, color .12s;
}
.punkte button:hover{transform:scale(1.16); border-color:var(--oliv-hell)}
.punkte button.an{color:#fff; border-color:transparent}
.punkte button.an.s1{background:var(--stufe1)}
.punkte button.an.s2{background:var(--stufe2)}
.punkte button.an.s3{background:var(--stufe3)}
.punkte button.an.s4{background:var(--stufe4)}
.punkte button.an.s5{background:var(--stufe5)}

.skala-hinweis{
  display:flex; justify-content:space-between; padding:9px 26px 0;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grau-hell); font-weight:700;
}

/* Die Rückmeldung – warm, ohne Bewertung */
.spiegel{
  padding:24px 26px 28px; background:var(--oliv-blass);
  border-top:1px solid var(--linie);
}
.spiegel[hidden]{display:none}
.spiegel p{margin:0 0 16px; font-size:16.5px; line-height:1.6; color:var(--oliv)}
.spiegel p b{color:var(--tinte)}
.spiegel .schutz{
  font-size:13px; color:var(--grau); margin:0 0 18px;
  padding-left:16px; border-left:2px solid var(--linie);
}

/* =====================================================================
   Wiedererkennen
   ===================================================================== */
.zweispalt{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start}

.hakenliste{list-style:none; margin:22px 0 0; padding:0}
.hakenliste li{
  padding:11px 0 11px 32px; position:relative;
  border-bottom:1px solid var(--linie); font-size:16.5px;
}
.hakenliste li:last-child{border-bottom:0}
.hakenliste li::before{
  content:""; position:absolute; left:6px; top:19px;
  width:9px; height:9px; border-radius:50%; background:var(--orange);
}

.trost{
  background:var(--wald); color:var(--creme); border-radius:var(--rund);
  padding:34px 32px; align-self:start;
}
.trost p{margin:0 0 15px; font-size:18px; line-height:1.6; color:var(--creme-matt)}
.trost p:last-child{margin-bottom:0}
.trost strong{color:#fff; font-weight:700}

/* =====================================================================
   Ablauf – vier Schritte, weil die Reihenfolge zählt
   ===================================================================== */
.ablauf{background:var(--wald); color:var(--creme)}
.ablauf h2{color:#fff}
.ablauf .vorspann{color:var(--creme-matt)}
.schritte{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(237,234,223,.14);
  border:1px solid rgba(237,234,223,.14); border-radius:var(--rund);
  overflow:hidden; margin-top:44px;
}
.schritt{background:var(--wald); padding:28px 24px 30px}
.schritt .nr{
  font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--orange);
  margin-bottom:14px;
}
.schritt h3{color:#fff; margin-bottom:9px}
.schritt p{margin:0; font-size:15px; line-height:1.6; color:rgba(237,234,223,.62)}

/* =====================================================================
   Die Huskys
   ===================================================================== */
.rudel-liste{
  display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; padding:0; list-style:none;
}
.rudel-liste li{
  padding:7px 15px; background:var(--weiss); border:1px solid var(--linie);
  border-radius:30px; font-size:15px; font-weight:600; color:var(--oliv);
}

/* =====================================================================
   Preise
   ===================================================================== */
.preise{background:var(--papier-warm); border-top:1px solid var(--linie)}

/* Erstgespräch: kostenfrei, deshalb steht es zuerst und für sich */
.einstieg{
  background:var(--oliv); color:var(--creme); border-radius:var(--rund);
  padding:clamp(26px,4vw,36px); margin-top:44px;
  display:flex; align-items:center; gap:clamp(22px,4vw,44px); flex-wrap:wrap;
}
.einstieg div{flex:1; min-width:250px}
.einstieg h3{color:#fff; font-size:22px; margin-bottom:8px}
.einstieg p{margin:0; font-size:16px; color:rgba(237,234,223,.75); line-height:1.6}
.einstieg .preisblock{flex:0 0 auto; text-align:center; min-width:170px}
.einstieg .betrag{
  font-size:clamp(34px,4.4vw,44px); font-weight:800; color:#fff;
  letter-spacing:-.03em; line-height:1;
}
.einstieg .betrag small{display:block; font-size:13.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--orange-hell); margin-top:8px}
.einstieg .knopf{margin-top:16px}

/* Das eine Paket */
.paket{
  background:var(--weiss); border:2px solid var(--oliv); border-radius:var(--rund);
  margin-top:20px; overflow:hidden;
  box-shadow:0 3px 8px rgba(35,40,43,.04), 0 18px 44px rgba(35,40,43,.08);
}
.paket-kopf{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:26px; padding:clamp(24px,3.4vw,32px); flex-wrap:wrap;
  border-bottom:1px solid var(--linie);
}
.paket-kopf .name{font-size:clamp(22px,2.8vw,28px); font-weight:800; color:var(--tinte);
                  letter-spacing:-.025em; margin-bottom:4px}
.paket-kopf .was{font-size:16px; color:var(--grau); margin:0}
.paket-kopf .preisblock{text-align:right; flex:0 0 auto}
.paket-kopf .betrag{font-size:clamp(38px,5vw,52px); font-weight:800; color:var(--tinte);
                    letter-spacing:-.035em; line-height:1}
.paket-kopf .je{font-size:14.5px; color:var(--grau); margin-top:5px}
.paket-kopf .spar{
  display:inline-block; margin-top:9px; font-size:13.5px; font-weight:700;
  color:#2E5A2E; background:#EAF3E8; padding:4px 11px; border-radius:20px;
}

.dabei{
  list-style:none; margin:0; padding:clamp(22px,3vw,28px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px;
}
.dabei li{padding-left:29px; position:relative; font-size:16px; line-height:1.5}
.dabei li::before{
  content:""; position:absolute; left:2px; top:8px; width:11px; height:11px;
  border-radius:50%; background:var(--oliv-blass);
  border:3px solid var(--oliv-hell); box-sizing:border-box;
}
.dabei li b{display:block; color:var(--tinte); font-weight:700}
.dabei li span{color:var(--grau); font-size:14.5px}

.paket-fuss{
  padding:clamp(20px,3vw,26px); background:var(--papier);
  border-top:1px solid var(--linie);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.paket-fuss p{margin:0; font-size:15px; color:var(--grau); flex:1; min-width:230px}

.preis-fuss{margin-top:24px; font-size:15px; color:var(--grau); text-align:center}

@media (max-width:700px){
  .dabei{grid-template-columns:1fr}
  .paket-kopf .preisblock{text-align:left}
  .einstieg .preisblock{text-align:left; min-width:0}
}

/* =====================================================================
   Anmeldung
   ===================================================================== */
.anmeldung{background:var(--papier)}
.formular-blatt{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--rund);
  box-shadow:0 2px 4px rgba(35,40,43,.03), 0 14px 40px rgba(35,40,43,.06);
  max-width:640px; margin:40px auto 0; padding:clamp(26px,4vw,38px);
}
.feld{margin-bottom:17px}
.feld label{display:block; font-weight:700; font-size:14.5px; color:var(--tinte); margin-bottom:6px}
.feld .tipp{display:block; font-size:13.5px; color:var(--grau-hell); font-weight:400; margin-top:4px}
.feld input,.feld textarea,.feld select{
  width:100%; padding:12px 14px; font:16px/1.5 inherit; color:var(--text);
  background:#FCFBF7; border:1.5px solid #D8D2C4; border-radius:8px;
}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none; border-color:var(--oliv-hell); box-shadow:0 0 0 3px rgba(92,107,68,.14);
}
.feld textarea{min-height:110px; resize:vertical}
.feld-paar{display:grid; grid-template-columns:1fr 1fr; gap:15px}

.wahl{display:flex; gap:9px; flex-wrap:wrap}
.wahl label{
  flex:1; min-width:96px; text-align:center; padding:10px 12px; cursor:pointer;
  border:1.5px solid #D8D2C4; border-radius:8px; background:#FCFBF7;
  font-size:14.5px; font-weight:600; color:var(--grau); margin:0;
}
.wahl input{position:absolute; opacity:0; width:0; height:0}
.wahl input:checked + span{color:var(--oliv)}
.wahl label:has(input:checked){border-color:var(--oliv); background:var(--oliv-blass); color:var(--oliv)}
.wahl label:has(input:focus-visible){outline:2.5px solid var(--oliv-hell); outline-offset:2px}

.zustimmung{
  display:flex; gap:11px; align-items:flex-start; margin:22px 0 0;
  padding:15px; background:var(--papier); border-radius:8px;
}
.zustimmung input{width:19px; height:19px; margin:2px 0 0; flex:0 0 19px; accent-color:var(--oliv)}
.zustimmung label{font-size:14px; line-height:1.55; color:var(--grau); font-weight:400}

.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.danke{
  background:var(--oliv-blass); border:1px solid var(--oliv-hell); border-radius:var(--rund);
  max-width:640px; margin:40px auto 0; padding:40px 34px; text-align:center;
}
.danke h3{font-size:23px; color:var(--oliv); margin-bottom:12px}
.danke p{color:var(--text); font-size:16.5px; margin:0 auto; max-width:44ch}

.fehlerfeld{
  background:#F7E9E5; color:#8A3524; border-left:4px solid #A6402B;
  padding:13px 16px; border-radius:8px; margin-bottom:22px; font-size:15px;
}

/* =====================================================================
   Klarstellung + Fuß
   ===================================================================== */
.klarstellung{
  background:var(--papier-warm); border-top:1px solid var(--linie);
  padding:32px 0;
}
.klarstellung p{
  max-width:var(--schmal); margin:0 auto; font-size:14.5px; line-height:1.6;
  color:var(--grau); text-align:center;
}

.seitenfuss{background:var(--wald-tief); color:rgba(237,234,223,.55); padding:52px 0 34px}
.fuss-raster{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:30px}
.seitenfuss .wortmarke{margin-bottom:12px; display:inline-block}
.seitenfuss p{margin:0; font-size:14.5px; line-height:1.65}
.seitenfuss h4{
  color:rgba(237,234,223,.4); font-size:11.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; margin:0 0 13px;
}
.seitenfuss a{color:rgba(237,234,223,.7); text-decoration:none; display:block; margin-bottom:8px;
              font-size:14.5px}
.seitenfuss a:hover{color:#fff}
.fuss-linie{
  margin-top:38px; padding-top:22px; border-top:1px solid rgba(237,234,223,.12);
  font-size:13.5px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* =====================================================================
   Mobil
   ===================================================================== */
@media (max-width:900px){
  .zweispalt{grid-template-columns:1fr}
  .schritte{grid-template-columns:repeat(2,1fr)}
  .preis-raster{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .fuss-raster > :first-child{grid-column:1 / -1}
}
@media (max-width:640px){
  .bahn{padding:0 18px}
  .kopf-tel{display:none}
  .schritte{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr}
  .feld-paar{grid-template-columns:1fr}
  .zeile{gap:12px; padding:15px 18px}
  .blatt-kopf,.skala-hinweis,.spiegel{padding-left:18px; padding-right:18px}
  .punkte{gap:4px; width:100%; justify-content:space-between}
  .punkte button{width:28px; height:28px}
  .knopf{width:100%}
  .merkmale{gap:22px}
}

/* --- Zugänglichkeit ------------------------------------------------- */
:focus-visible{outline:2.5px solid var(--orange); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* =====================================================================
   Rechtstexte (Impressum, Datenschutz)
   ===================================================================== */
.recht-kopf{
  background:linear-gradient(178deg,#FAF8F2 0%,var(--papier) 100%);
  padding:clamp(38px,6vw,66px) 0 clamp(28px,4vw,40px);
  border-bottom:1px solid var(--linie);
}
.recht-kopf h1{font-size:clamp(30px,4.6vw,44px)}
.recht-kopf p{margin:10px 0 0; color:var(--grau); font-size:16.5px}

.rechtstext{max-width:760px; margin:0 auto; padding:clamp(34px,5vw,56px) 24px clamp(50px,7vw,84px)}
.rechtstext h2{
  font-size:20px; margin:38px 0 12px; padding-top:22px;
  border-top:1px solid var(--linie);
}
.rechtstext h2:first-of-type{border-top:0; padding-top:0; margin-top:0}
.rechtstext h3{font-size:16.5px; margin:22px 0 7px; color:var(--oliv)}
.rechtstext p{margin:0 0 13px; font-size:16px; line-height:1.72}
.rechtstext ul{margin:0 0 15px; padding-left:22px}
.rechtstext li{margin-bottom:7px; font-size:16px; line-height:1.65}
.rechtstext a{color:var(--oliv); font-weight:600}

.anschrift{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--rund);
  padding:22px 26px; margin:18px 0 26px;
}
.anschrift p{margin:0 0 3px; font-size:16px}
.anschrift strong{color:var(--tinte); font-size:17px}

.merksatz{
  background:var(--oliv-blass); border-left:4px solid var(--oliv-hell);
  border-radius:0 8px 8px 0; padding:17px 20px; margin:20px 0 26px;
}
.merksatz p{margin:0; font-size:15.5px; color:var(--oliv)}
.merksatz p + p{margin-top:9px}

.stand{margin-top:40px; padding-top:20px; border-top:1px solid var(--linie);
       font-size:14.5px; color:var(--grau-hell)}

/* =====================================================================
   Zwischen den Terminen – die App
   ===================================================================== */
.app-teil{background:var(--papier-warm); border-top:1px solid var(--linie)}
.app-raster{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,72px); align-items:center;
}

.app-punkte{list-style:none; margin:26px 0 0; padding:0}
.app-punkte li{
  display:flex; gap:15px; align-items:flex-start;
  padding:15px 0; border-bottom:1px solid var(--linie);
}
.app-punkte li:last-child{border-bottom:0}
.app-punkte .zeichen{
  width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  background:var(--oliv); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.app-punkte b{display:block; font-size:17px; color:var(--tinte); line-height:1.35}
.app-punkte span{display:block; font-size:15px; color:var(--grau); margin-top:3px; line-height:1.55}

/* --- Nachgebautes Handy --------------------------------------------- */
.handy{
  width:clamp(240px,72%,300px); margin:0 auto;
  background:#23282B; border-radius:38px; padding:11px;
  box-shadow:0 4px 12px rgba(35,40,43,.10), 0 26px 60px rgba(35,40,43,.20);
}
.handy-innen{
  background:var(--papier); border-radius:28px; overflow:hidden;
  font-size:12px; line-height:1.45;
}
.handy-kopf{
  background:var(--oliv); color:#fff; padding:14px 15px 12px;
  display:flex; align-items:center; gap:9px;
}
.handy-kopf b{font-size:14px; font-weight:800; letter-spacing:-.01em}
.handy-kopf small{
  display:block; font-size:7.5px; letter-spacing:.15em;
  color:rgba(255,255,255,.5); text-transform:uppercase; margin-top:1px;
}
.handy-pfote{
  width:24px; height:24px; border-radius:50%; margin-left:auto;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28);
}
.handy-leib{padding:13px 13px 17px}

.handy-karte{
  background:var(--weiss); border:1px solid var(--linie);
  border-radius:11px; padding:12px 13px; margin-bottom:9px;
}
.handy-karte.dunkel{background:var(--oliv); border-color:var(--oliv); color:#fff}
.handy-karte .marke{
  font-size:7.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--grau-hell);
}
.handy-karte.dunkel .marke{color:rgba(237,234,223,.5)}
.handy-karte .gross{font-size:15px; font-weight:800; color:var(--tinte);
  letter-spacing:-.02em; margin-top:3px}
.handy-karte.dunkel .gross{color:#fff}
.handy-karte .klein{font-size:11px; color:var(--grau); margin-top:2px}
.handy-karte.dunkel .klein{color:rgba(237,234,223,.7)}

.handy-skala{display:flex; gap:2px; margin-top:7px}
.handy-skala i{flex:1; height:11px; border-radius:2px; background:var(--papier-tief)}
.handy-skala i.an{background:#D9A441}
.handy-skala i.gut{background:#7BA063}

.handy-kacheln{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px}
.handy-kachel{
  background:var(--weiss); border:1px solid var(--linie);
  border-radius:10px; padding:10px 10px 11px;
}
.handy-kachel .sym{
  width:20px; height:20px; border-radius:6px; background:var(--oliv-blass);
  margin-bottom:6px;
}
.handy-kachel .sym.warm{background:var(--orange-blass)}
.handy-kachel b{display:block; font-size:11px; color:var(--tinte); line-height:1.25}
.handy-kachel span{display:block; font-size:9.5px; color:var(--grau-hell); margin-top:1px}

@media (max-width:900px){
  .app-raster{grid-template-columns:1fr; gap:34px}
  .handy{order:-1}
}