/* drivebro — App (app.html). Klassen mit Präfix ap-. Telefonrahmen (st-telefon) kommt aus start.css. Korrektur 2: nichts schwebt. */
.ap-held{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.ap-buehne h1{font-size:clamp(40px,4.8vw,70px)}
.ap-stores{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 22px}
.ap-store{min-height:54px;padding:8px 20px 8px 16px;gap:11px;text-align:left;cursor:default}
.ap-store span{display:grid;font-size:11.5px;font-weight:500;line-height:1.2;color:var(--grau)}
.ap-store b{font-size:15.5px;font-weight:700;color:var(--tinte)}
.glas-knopf.ap-store .ic{width:22px;height:22px}
.ap-store:focus-visible{outline:3px solid color-mix(in srgb,var(--akzent) 45%,transparent)}

/* Ein Telefon in der Bühne, ruhig und aufrecht */
.ap-buehne .innen{padding-block:clamp(40px,5vw,72px)}
.ap-paar{display:grid;place-items:center;min-width:0}
.ap-vorne{--b:clamp(240px,20vw,280px)}
.ap-treffer-zeile{display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--b)*.055) calc(var(--b)*.03);font-size:calc(var(--b)*.044);color:var(--grau)}
.ap-treffer-zeile b{color:var(--tinte)}
.ap-treffer-zeile span{display:inline-flex;align-items:center;gap:4px;color:var(--akzent);font-weight:700}
.ap-treffer-zeile .ic{width:calc(var(--b)*.048);height:calc(var(--b)*.048)}
.ap-tabs{margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:calc(var(--b)*.03) calc(var(--b)*.04) calc(var(--b)*.07);background:#fff;border-top:1px solid var(--linie);color:var(--grau-hell)}
.ap-tabs span{display:grid;place-items:center}
.ap-tabs .ic{width:calc(var(--b)*.075);height:calc(var(--b)*.075)}
.ap-tabs .an{color:var(--akzent)}
.ap-tabs .plus{width:calc(var(--b)*.15);height:calc(var(--b)*.15);margin:auto;border-radius:50%;background:var(--akzent);color:#fff}
.ap-vorne .st-bildschirm{position:relative}
.ap-vorne .st-mini-liste{overflow:hidden}

/* Sperrbildschirm */
.ap-sperr{background:var(--flaeche);color:var(--tinte)}
.ap-uhr{display:grid;justify-items:center;padding-top:calc(var(--b)*.04);text-align:center}
.ap-uhr span{font-size:calc(var(--b)*.05);font-weight:600;color:var(--sub)}
.ap-uhr b{font-size:calc(var(--b)*.25);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--tinte)}
.ap-mitteilungen{display:grid;gap:calc(var(--b)*.03);margin-top:auto;padding:0 calc(var(--b)*.04) calc(var(--b)*.12)}
.ap-meldung{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--b)*.035);align-items:start;padding:calc(var(--b)*.04);border-radius:calc(var(--b)*.065);background:#fff;box-shadow:0 1px 2px rgba(40,40,35,.05),0 8px 20px -8px rgba(40,40,35,.18);font-size:calc(var(--b)*.044);line-height:1.3;color:var(--text)}
.ap-meldung img{width:calc(var(--b)*.1);height:calc(var(--b)*.1);border-radius:calc(var(--b)*.025)}
.ap-meldung-kopf{display:flex;justify-content:space-between;gap:6px;font-size:calc(var(--b)*.04);color:var(--grau)}
.ap-meldung b{display:block;font-size:calc(var(--b)*.046);color:var(--tinte)}
.ap-meldung .ap-meldung-bild{grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--b)*.035)}

/* Kamera */
.ap-kamera{background:var(--flaeche);color:var(--tinte)}
.ap-sucher{position:absolute;inset:0}
.ap-sucher img{width:100%;height:100%;object-fit:cover}
.ap-kamera-oben{position:relative;z-index:2;display:grid;justify-items:center;gap:2px;margin-top:calc(var(--b)*.15);padding:calc(var(--b)*.03) calc(var(--b)*.06);align-self:center;border-radius:99px;background:#fff;box-shadow:0 6px 16px -6px rgba(40,40,35,.3);font-size:calc(var(--b)*.04);text-align:center}
.ap-kamera-oben span{color:var(--grau)}
.ap-kamera-oben b{font-size:calc(var(--b)*.055);color:var(--tinte)}
.ap-rahmen{position:absolute;z-index:2;left:9%;right:9%;top:36%;height:30%}
.ap-rahmen i{position:absolute;width:18%;height:22%;border:0 solid #fff;filter:drop-shadow(0 1px 3px rgba(40,40,35,.45))}
.ap-rahmen i:nth-child(1){left:0;top:0;border-width:3px 0 0 3px;border-top-left-radius:8px}
.ap-rahmen i:nth-child(2){right:0;top:0;border-width:3px 3px 0 0;border-top-right-radius:8px}
.ap-rahmen i:nth-child(3){left:0;bottom:0;border-width:0 0 3px 3px;border-bottom-left-radius:8px}
.ap-rahmen i:nth-child(4){right:0;bottom:0;border-width:0 3px 3px 0;border-bottom-right-radius:8px}
.ap-kamera-unten{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:calc(var(--b)*.04);padding:calc(var(--b)*.045) calc(var(--b)*.05) calc(var(--b)*.08);background:#fff;border-top:1px solid var(--linie)}
.ap-daumen{display:flex;gap:calc(var(--b)*.02)}
.ap-daumen img,.ap-daumen span{width:calc(var(--b)*.13);height:calc(var(--b)*.13);border-radius:calc(var(--b)*.025);object-fit:cover;box-shadow:0 0 0 1.5px var(--akzent)}
.ap-daumen span{display:block;box-shadow:0 0 0 1.5px var(--linie);background:var(--flaeche)}
.ap-ausloeser{width:calc(var(--b)*.2);height:calc(var(--b)*.2);border-radius:50%;background:var(--akzent);box-shadow:0 0 0 calc(var(--b)*.012) #fff,0 0 0 calc(var(--b)*.024) var(--akzent-hell)}

/* Nachrichten */
.ap-chat{background:var(--weiss)}
.ap-chat-kopf{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--b)*.035);align-items:center;margin:0 calc(var(--b)*.045);padding:calc(var(--b)*.03);border-radius:calc(var(--b)*.045);background:#fff;box-shadow:0 0 0 1px var(--linie)}
.ap-chat-kopf img{width:calc(var(--b)*.2);aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--b)*.025)}
.ap-chat-kopf div{min-width:0;display:grid}
.ap-chat-kopf b{font-size:calc(var(--b)*.048);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-chat-kopf span{font-size:calc(var(--b)*.042);color:var(--grau)}
.ap-chat-kopf .ap-anruf{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:calc(var(--b)*.02);padding:calc(var(--b)*.022);border-radius:calc(var(--b)*.03);background:var(--akzent-flaeche);color:var(--akzent-dunkel);font-weight:700;font-size:calc(var(--b)*.042)}
.ap-chat-kopf .ap-anruf .ic{width:calc(var(--b)*.05);height:calc(var(--b)*.05)}
.ap-verlauf{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--b)*.025);padding:calc(var(--b)*.04) calc(var(--b)*.045);overflow:hidden}
.ap-blase{max-width:80%;padding:calc(var(--b)*.03) calc(var(--b)*.04);border-radius:calc(var(--b)*.05);font-size:calc(var(--b)*.045);line-height:1.35;background:#fff;box-shadow:0 0 0 1px var(--linie);color:var(--tinte)}
.ap-blase.ich{align-self:flex-end;background:var(--akzent);color:#fff;box-shadow:none;border-bottom-right-radius:calc(var(--b)*.015)}
.ap-blase.partner{border-bottom-left-radius:calc(var(--b)*.015)}
.ap-blase time{display:block;margin-top:2px;font-size:calc(var(--b)*.034);opacity:.7}
.ap-eingabe{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 calc(var(--b)*.045) calc(var(--b)*.08);padding:calc(var(--b)*.03) calc(var(--b)*.03) calc(var(--b)*.03) calc(var(--b)*.05);border-radius:99px;background:#fff;box-shadow:0 0 0 1px var(--linie);font-size:calc(var(--b)*.044);color:var(--grau-hell)}
.ap-eingabe i{display:grid;place-items:center;width:calc(var(--b)*.1);height:calc(var(--b)*.1);border-radius:50%;background:var(--akzent);color:#fff}
.ap-eingabe .ic{width:55%;height:55%}

/* Funktionszeilen */
.ap-zeilen{display:grid;gap:clamp(56px,6vw,96px)}
.ap-zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center}
.ap-zeile.ap-um .ap-zeile-bild{order:-1}
.ap-zeile-text{max-width:560px}
.ap-zeile-text h3{font-size:clamp(24px,2.3vw,32px);margin:22px 0 12px}
.ap-zeile-text h3.ap-unter{font-size:20px;margin-top:26px}
.ap-zeile-text p{font-size:17px;color:var(--grau)}
.ap-symbol{--s:64px}
.ap-punkte{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.ap-punkte li{display:flex;gap:10px;font-size:15.5px;color:var(--text)}
.ap-punkte .ic{width:19px;height:19px;margin-top:2px;color:var(--akzent)}
.ap-zeile-bild{position:relative;display:grid;place-items:center;padding:clamp(28px,3vw,48px) 0;border-radius:var(--radius-gross);background:var(--flaeche);overflow:hidden}
.ap-telefon{--b:clamp(220px,19vw,264px)}

/* Home-Bildschirm */
.ap-installiert{margin-bottom:22px;background:var(--gruen-flaeche);color:var(--gruen)}
.ap-anleitungen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ap-anleitung{display:flex;flex-direction:column;gap:6px;padding:clamp(22px,2.6vw,32px)}
.ap-anleitung.ap-markiert{box-shadow:0 0 0 2px var(--akzent),var(--schatten-klein)}
.ap-anleitung-kopf{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ap-anleitung-kopf>.ic{width:26px;height:26px;color:var(--tinte)}
.ap-anleitung-kopf h3{font-size:21px;margin:0}
.ap-ihr{margin-left:auto;padding:4px 10px;border-radius:99px;background:var(--akzent-flaeche);color:var(--akzent-dunkel);font-size:12.5px;font-weight:700}
.ap-schritte{list-style:none;margin:0;padding:0}
.ap-schritte li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--linie)}
.ap-schritte b{display:block;font-size:16.5px;color:var(--tinte)}
.ap-schritte p{margin:4px 0 0;font-size:15px;color:var(--grau)}
.ap-nr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:800;font-size:14.5px;color:#fff;background:var(--akzent)}
.ap-taste{display:inline-grid;place-items:center;width:28px;height:28px;margin:0 2px;vertical-align:middle;border-radius:7px;background:var(--flaeche);color:var(--akzent)}
.ap-taste .ic{width:17px;height:17px}
.ap-installieren{margin-top:14px}
.ap-installiert[hidden],.ap-installieren[hidden],.ap-ihr[hidden]{display:none}

@media (max-width:1100px){
  .ap-held{grid-template-columns:minmax(0,1fr)}
  .ap-zeile,.ap-zeile.ap-um{grid-template-columns:minmax(0,1fr)}
  .ap-zeile.ap-um .ap-zeile-bild{order:0}
  .ap-zeile-text{max-width:none}
}
@media (max-width:760px){
  .ap-buehne h1{font-size:clamp(36px,10vw,44px)}
  .ap-stores{margin:22px 0 18px}
  .ap-vorne{--b:230px}
  .ap-telefon{--b:228px}
  .ap-anleitungen{grid-template-columns:minmax(0,1fr)}
  .ap-anleitung-kopf h3{font-size:19px}
}