/* BeerReal v4 – dunkles Design mit Bier-Gold. Mobil zuerst, läuft in Chrome, Safari, Firefox. */
:root {
  --bg: #0b0b0d;
  --bg2: #121216;
  --flaeche: #17171c;
  --flaeche2: #202027;
  --rand: #2b2b33;
  --text: #f6f3ec;
  --leise: #9d998f;
  --gold: #ffc531;
  --gold2: #ffdb6e;
  --gold-dunkel: #c99410;
  --schaum: #fff6dc;
  --wein: #b3264e;
  --rot: #ff5d5d;
  --gruen: #4fd18b;
  --radius: 20px;
  --nav-h: 70px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --schatten: 0 10px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font: 16px/1.42 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea { font-size: 16px; } /* verhindert Zoom auf dem iPhone */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-appearance: none; appearance: none; }
a { color: var(--gold); text-decoration: none; }
img { display: block; max-width: 100%; }
.versteckt { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- aufsteigende Bläschen im Hintergrund ---------- */
.blasen { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blasen i {
  position: absolute; bottom: -20px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95) 0 14%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle, rgba(255, 197, 49, 0.05) 52%, rgba(255, 216, 120, 0.85) 66%, rgba(255, 197, 49, 0) 72%);
  opacity: 0; animation: aufsteigen var(--d) linear var(--v) infinite; will-change: transform, opacity;
}
@keyframes aufsteigen {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: var(--o); }
  50% { transform: translate3d(var(--w), -55vh, 0); }
  90% { opacity: var(--o); }
  100% { transform: translate3d(0, -110vh, 0); opacity: 0; }
}

/* ---------- Grundgerüst ---------- */
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; z-index: 1; }
.kopf {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + var(--safe-t)) 16px 12px;
  background: linear-gradient(var(--bg) 65%, rgba(11, 11, 13, 0));
}
.kopf h1 { font-size: 23px; margin: 0; flex: 1; letter-spacing: -0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo { font-weight: 850; letter-spacing: -0.045em; }
.logo b { color: var(--gold); }
.logo .punkt-logo { display: inline-block; color: var(--gold); animation: wippen 3.2s ease-in-out infinite; }
@keyframes wippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.inhalt { padding: 0 16px calc(var(--nav-h) + var(--safe-b) + 28px); }
.inhalt > * { animation: einblenden 0.32s ease-out both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }
.zurueck { flex: none; font-size: 24px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche); color: var(--text); }

/* ---------- Navigation unten ---------- */
.nav {
  position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 0; z-index: 30;
  width: 100%; max-width: 560px;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: rgba(11, 11, 13, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--leise); font-size: 11px; font-weight: 600; position: relative; padding: 6px 0; }
.nav a .i { line-height: 0; color: var(--leise); transition: transform 0.2s, color 0.2s; }
.nav a.aktiv { color: var(--text); }
.nav a.aktiv .i { color: var(--gold); animation: hupf 0.4s ease-out; }
@keyframes hupf { 40% { transform: translateY(-4px) scale(1.12); } }
.nav .ausloeser {
  justify-self: center; width: 64px; height: 64px; border-radius: 50%; margin-top: -28px;
  background: radial-gradient(circle at 30% 25%, var(--gold2), var(--gold) 55%, #e9a90f);
  color: #1a1300; font-size: 28px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px var(--bg), 0 8px 26px rgba(255, 197, 49, 0.38);
  animation: leuchten 3.5s ease-in-out infinite;
}
.nav .ausloeser:active { transform: scale(0.94); }
@keyframes leuchten { 50% { box-shadow: 0 0 0 5px var(--bg), 0 8px 34px rgba(255, 197, 49, 0.6); } }
.punkt { position: absolute; top: 1px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rot); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; animation: plopp 0.35s ease-out; }
@keyframes plopp { from { transform: scale(0.3); } 70% { transform: scale(1.2); } }

/* ---------- Bausteine ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px; border-radius: 15px;
  background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1300; font-weight: 750;
  box-shadow: 0 4px 16px rgba(255, 197, 49, 0.18); transition: transform 0.12s, opacity 0.2s;
}
.knopf:active { transform: scale(0.97); }
.knopf:disabled { opacity: 0.45; cursor: default; transform: none; }
.knopf.zweit { background: var(--flaeche2); color: var(--text); font-weight: 650; box-shadow: none; }
.knopf.klein { min-height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.knopf.gefahr { background: transparent; color: var(--rot); border: 1px solid #4a2626; box-shadow: none; }
.knopf.voll { width: 100%; }
.knopf + .knopf.voll { margin-top: 8px; }
.textknopf { color: var(--gold); font-weight: 650; font-size: 14px; padding: 6px 2px; }
.feld { display: block; margin: 0 0 12px; }
.feld > span { display: block; font-size: 13px; color: var(--leise); margin: 0 0 6px 2px; }
.feld input, .feld textarea, input.eingabe, textarea.eingabe {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px;
  background: var(--flaeche); border: 1px solid var(--rand); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s, background 0.2s;
}
.feld input:focus, .eingabe:focus, .feld textarea:focus { border-color: var(--gold-dunkel); background: #1b1a17; }
input[type="date"] { min-height: 50px; display: block; }
.haken { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0; font-size: 14px; color: #d8d4ca; }
.haken input { width: 22px; height: 22px; accent-color: var(--gold); flex: none; margin: 0; }
.karte { background: var(--flaeche); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius); padding: 16px; margin: 0 0 14px; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.fehler { color: #ff8a8a; font-size: 14px; min-height: 1em; margin: 6px 0; }
.titel2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--leise); margin: 22px 4px 10px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.titel2 .rechts { margin-left: auto; text-transform: none; letter-spacing: 0; }
.leer { text-align: center; color: var(--leise); padding: 40px 20px; }
.leer .gross { font-size: 48px; margin-bottom: 8px; display: inline-block; animation: wippen 3s ease-in-out infinite; }

.reiter { display: flex; gap: 4px; background: var(--flaeche); padding: 4px; border-radius: 15px; margin: 0 0 14px; position: relative; }
.reiter button { flex: 1; min-height: 40px; border-radius: 11px; color: var(--leise); font-weight: 650; font-size: 15px; transition: background 0.2s, color 0.2s; }
.reiter button.an { background: var(--flaeche2); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }

/* Avatar mit Profilbild (Initialen darunter als Ersatz) */
.avatar {
  --c: #c99410; position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--c); color: #111; font-weight: 850; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.gross { width: 96px; height: 96px; font-size: 34px; }
.avatar.mittel { width: 56px; height: 56px; font-size: 19px; }
.avatar.ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); animation: ringglut 2.8s ease-in-out infinite; }
@keyframes ringglut { 50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #ff9a3d, 0 0 14px rgba(255, 170, 60, 0.45); } }

.zeile { display: flex; align-items: center; gap: 12px; padding: 10px 4px; width: 100%; text-align: left; color: inherit; }
.zeile + .zeile { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.zeile .mitte { flex: 1; min-width: 0; }
.zeile .name { font-weight: 650; }
.zeile .unter { font-size: 13px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste { padding: 6px 12px; }

/* ---------- Schalter ---------- */
.schalter { position: relative; width: 52px; height: 32px; flex: none; }
.schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.schalter span { position: absolute; inset: 0; border-radius: 16px; background: var(--rand); transition: background 0.2s; }
.schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.schalter input:checked + span { background: var(--gold); }
.schalter input:checked + span::after { transform: translateX(20px); }
.segment { display: flex; gap: 4px; background: var(--bg2); padding: 4px; border-radius: 13px; }
.segment button { flex: 1; min-height: 38px; border-radius: 10px; font-size: 14px; font-weight: 650; color: var(--leise); }
.segment button.an { background: var(--flaeche2); color: var(--text); }

/* ---------- Gerade am Trinken ---------- */
.jetzt { display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.jetzt::-webkit-scrollbar { display: none; }
.jetzt a { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--text); font-size: 12px; width: 62px; flex: none; }
.jetzt .avatar { width: 56px; height: 56px; font-size: 19px; }
.jetzt .emo { position: absolute; right: -6px; bottom: -6px; font-size: 17px; background: var(--bg); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.jetzt span.nm { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Post ---------- */
.post { margin: 0 0 24px; animation: einblenden 0.35s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
.post-kopf { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; }
.post-kopf .mitte { flex: 1; min-width: 0; }
.post-kopf .name { font-weight: 750; color: var(--text); }
.post-kopf .unter { font-size: 13px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doppel { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, #1d1a12, #15151a); box-shadow: var(--schatten); }
.doppel > img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.doppel .klein-bild {
  position: absolute; top: 12px; left: 12px; width: 31%; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  border: 2px solid #000; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); background: #222; padding: 0; transition: transform 0.2s;
}
.doppel .klein-bild:active { transform: scale(0.95); }
.doppel .klein-bild img { width: 100%; height: 100%; object-fit: cover; }
.doppel .marke { position: absolute; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 82%; }
/* Kondenstropfen am Bildrand – ganz dezent */
.doppel .tau { position: absolute; top: 0; right: 18%; width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75), rgba(255, 220, 150, 0.25) 55%, transparent 70%); opacity: 0; animation: tau 9s ease-in var(--tv, 2s) infinite; pointer-events: none; }
@keyframes tau { 0% { opacity: 0; transform: translateY(-4px); } 8% { opacity: 0.8; } 70% { opacity: 0.7; transform: translateY(60px); } 100% { opacity: 0; transform: translateY(110px) scaleY(1.4); } }
.chip {
  color: var(--text); display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 17px;
  background: rgba(14, 14, 17, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 14px; font-weight: 650; border: 1px solid rgba(255, 255, 255, 0.09); white-space: nowrap;
}
.post-text { margin: 10px 4px 0; overflow-wrap: anywhere; }
.post-fuss { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.prost { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 21px; background: var(--flaeche); font-weight: 700; transition: background 0.2s, color 0.2s, transform 0.1s; }
.prost:active { transform: scale(0.95); }
.prost.an { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1300; }
.prost .glaeser { font-size: 19px; display: inline-block; }
.prost.klirr .glaeser { animation: klirr 0.5s ease-out; }
@keyframes klirr { 30% { transform: rotate(-22deg) scale(1.3); } 60% { transform: rotate(12deg) scale(1.15); } }
.tropfen { position: absolute; left: 22px; top: 50%; width: 8px; height: 11px; margin: -5px 0 0 -4px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--tf, var(--gold)); pointer-events: none; animation: spritzen 0.75s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes spritzen { from { transform: translate(0, 0) scale(0.6); opacity: 1; } to { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; } }
.runde { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--flaeche); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text); }
.neu-pille { position: -webkit-sticky; position: sticky; top: 70px; z-index: 15; display: block; margin: 0 auto 12px; background: var(--gold); color: #1a1300; font-weight: 750; padding: 9px 18px; border-radius: 20px; box-shadow: var(--schatten); animation: plopp 0.35s; }
.aufruf { display: flex; align-items: center; gap: 14px; color: inherit; background: linear-gradient(135deg, #2b2108, #17171c 70%); border: 1px solid #3d300c; position: relative; overflow: hidden; }
.aufruf .glas-klein { flex: none; }

/* Bierglas, das sich füllt (Ladeanzeige & Deko) */
.glas { position: relative; width: 34px; height: 44px; border: 3px solid rgba(255, 246, 220, 0.85); border-top: 0; border-radius: 0 0 9px 9px; overflow: hidden; display: inline-block; }
.glas::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(var(--gold2), var(--gold)); animation: fuellen 2.2s ease-in-out infinite; }
.glas::after { content: ""; position: absolute; left: -2px; right: -2px; height: 9px; bottom: 0; background: var(--schaum); border-radius: 5px; animation: schaum 2.2s ease-in-out infinite; }
@keyframes fuellen { 0% { height: 0; } 70%, 100% { height: 82%; } }
@keyframes schaum { 0% { bottom: -9px; } 70%, 100% { bottom: 76%; } }
.lade { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 50px 0; color: var(--leise); font-size: 14px; }
.skelett { border-radius: var(--radius); background: linear-gradient(90deg, var(--flaeche) 25%, var(--flaeche2) 50%, var(--flaeche) 75%); background-size: 200% 100%; animation: schimmer 1.4s infinite; }
@keyframes schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Kamera ---------- */
.kamera { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; }
.kamera .bild-bereich { position: relative; flex: 1; overflow: hidden; }
.kamera video, .kamera .vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera video.spiegel { transform: scaleX(-1); }
.kamera .oben { position: absolute; top: 0; left: 0; right: 0; padding: calc(14px + var(--safe-t)) 16px 18px; display: flex; align-items: center; gap: 10px; background: linear-gradient(rgba(0, 0, 0, 0.65), transparent); z-index: 3; }
.kamera .schritt { flex: 1; text-align: center; font-weight: 750; }
.kamera .schritt small { display: block; font-weight: 500; color: #ddd; font-size: 13px; }
.kamera .x { width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); font-size: 20px; display: flex; align-items: center; justify-content: center; color: #fff; }
.kamera .unten { padding: 18px 16px calc(22px + var(--safe-b)); display: flex; align-items: center; justify-content: space-around; background: #000; }
.kamera .shutter { width: 80px; height: 80px; border-radius: 50%; border: 5px solid #fff; background: transparent; display: flex; align-items: center; justify-content: center; }
.kamera .shutter::after { content: ""; width: 62px; height: 62px; border-radius: 50%; background: #fff; transition: transform 0.12s, background 0.2s; }
.kamera .shutter:active::after { transform: scale(0.86); background: var(--gold); }
.kamera .seiten { width: 56px; height: 56px; border-radius: 50%; background: #1d1d22; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; line-height: 1.05; text-align: center; }
.kamera .mini { position: absolute; top: calc(74px + var(--safe-t)); left: 14px; width: 28%; aspect-ratio: 3 / 4; border-radius: 13px; overflow: hidden; border: 2px solid #000; z-index: 2; animation: reinfliegen 0.4s ease-out; }
@keyframes reinfliegen { from { transform: scale(2.4) translate(30%, 30%); opacity: 0.4; } }
.kamera .mini img { width: 100%; height: 100%; object-fit: cover; }
.kamera .countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 130px; font-weight: 850; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 4; }
.kamera .countdown span { animation: zahl 0.9s ease-out; }
@keyframes zahl { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(0.9); opacity: 0.2; } }
.kamera .blitz { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.kamera .blitz.los { animation: blitz 0.35s ease-out; }
@keyframes blitz { from { opacity: 0.9; } to { opacity: 0; } }
.kamera .problem { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; color: #ddd; }

/* ---------- Posten (Details) ---------- */
.posten { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.posten .innen { max-width: 560px; margin: 0 auto; padding: 0 16px calc(120px + var(--safe-b)); }
.posten .doppel { width: 54%; margin: 0 auto 4px; }
.posten-fuss { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 14px 16px calc(12px + var(--safe-b)); background: linear-gradient(rgba(11, 11, 13, 0), var(--bg) 35%); }
.posten-fuss .innen2 { max-width: 528px; margin: 0 auto; }
.abschnitt { background: var(--flaeche); border-radius: var(--radius); padding: 14px; margin: 12px 0; border: 1px solid rgba(255, 255, 255, 0.05); }
.abschnitt h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.abschnitt h3 .rechts { margin-left: auto; font-weight: 600; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl .chip { background: var(--flaeche2); -webkit-backdrop-filter: none; backdrop-filter: none; transition: transform 0.12s, background 0.2s; }
.wahl .chip:active { transform: scale(0.94); }
.wahl .chip.an { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1300; border-color: var(--gold); animation: plopp 0.3s; }
.wahl .chip.ki { border-color: #6a5414; background: #241e0d; }
.wahl .chip.neu { border-style: dashed; color: var(--gold); background: transparent; }
.wahl .chip .weg { margin-left: 2px; opacity: 0.65; }
.leiste { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.leiste::-webkit-scrollbar { display: none; }
.leiste .chip { flex: none; background: var(--flaeche2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.leiste .chip.an { background: var(--schaum); color: #1a1300; }
.suchfeld { position: relative; margin: 10px 0; }
.suchfeld input { width: 100%; min-height: 44px; padding: 10px 40px 10px 38px; border-radius: 13px; background: var(--bg2); border: 1px solid var(--rand); outline: none; -webkit-appearance: none; appearance: none; }
.suchfeld input:focus { border-color: var(--gold-dunkel); }
.suchfeld > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--leise); pointer-events: none; }
.suchfeld .leeren { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; color: var(--leise); display: flex; align-items: center; justify-content: center; }
.kat-panel { margin-top: 10px; padding: 10px; border-radius: 14px; background: var(--bg2); animation: aufklappen 0.25s ease-out; }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }
.kat-panel .wahl .chip { font-size: 13.5px; min-height: 32px; }
.sicht { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sicht button { min-height: 62px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--rand); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 650; transition: border-color 0.2s, background 0.2s; }
.sicht button .e { font-size: 20px; }
.sicht button.an { border-color: var(--gold); background: #2a2108; }
.ortzeile { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.ortzeile.ok { color: var(--gruen); }
.ortzeile .mitte { flex: 1; min-width: 0; }
.ortknoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ortknoepfe .knopf { min-width: 0; width: 100%; }
.hilfe { font-size: 13px; color: #ffc9c9; background: #2a1515; border-radius: 12px; padding: 10px 12px; margin: 10px 0 0; line-height: 1.45; }
.orte { margin-top: 8px; }
.orte button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--bg2); margin-top: 6px; }
.orte button b { display: block; font-weight: 650; }
.orte button span { font-size: 12.5px; color: var(--leise); }
.empf { max-height: 270px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.empf label { display: flex; align-items: center; gap: 12px; padding: 8px 2px; }
.empf input { width: 22px; height: 22px; accent-color: var(--gold); flex: none; }
.ki-lade { display: inline-flex; align-items: center; gap: 8px; color: var(--leise); font-size: 14px; }
.drehen { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rand); border-top-color: var(--gold); animation: drehen 0.8s linear infinite; display: inline-block; flex: none; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Erfolg nach dem Posten */
.prost-gross { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(11, 11, 13, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: weg 1.5s ease-in forwards; pointer-events: none; }
.prost-gross .e { font-size: 96px; animation: anstossen 0.9s ease-out; }
.prost-gross b { font-size: 30px; margin-top: 8px; letter-spacing: -0.02em; }
.prost-gross i { position: absolute; bottom: 30%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 220, 140, 0.6); animation: hochblubbern 1.2s ease-out var(--v) forwards; opacity: 0; }
@keyframes hochblubbern { 10% { opacity: 1; } to { transform: translateY(-50vh); opacity: 0; } }
@keyframes anstossen { 0% { transform: scale(0.3) rotate(-20deg); } 50% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1); } }
@keyframes weg { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; gap: 6px; padding-bottom: 90px; }
.blase { max-width: 78%; padding: 9px 13px; border-radius: 19px; background: var(--flaeche2); align-self: flex-start; overflow-wrap: anywhere; white-space: pre-wrap; animation: einblenden 0.25s ease-out; color: var(--text); }
.blase.ich { align-self: flex-end; background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #1a1300; }
.blase .z { display: block; font-size: 11px; opacity: 0.6; margin-top: 3px; text-align: right; }
.blase.foto { padding: 6px; width: 66%; display: block; }
.blase.foto .doppel { border-radius: 14px; box-shadow: none; }
.blase.foto .gl { font-size: 13px; padding: 6px 4px 0; font-weight: 650; }
.tag-trenner { text-align: center; font-size: 12px; color: var(--leise); margin: 12px 0 4px; }
.schreiben {
  position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 0; width: 100%; max-width: 560px; z-index: 30;
  display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + var(--safe-b)); background: rgba(11, 11, 13, 0.96); border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.schreiben textarea { flex: 1; resize: none; min-height: 46px; max-height: 120px; border-radius: 23px; padding: 12px 16px; background: var(--flaeche); border: 1px solid var(--rand); outline: none; -webkit-appearance: none; appearance: none; }
.schreiben button { width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: #1a1300; font-size: 20px; flex: none; }

/* ---------- Profil ---------- */
.profil-kopf { text-align: center; padding: 10px 0 6px; }
.profil-kopf .avatar { margin: 0 auto 12px; }
.profil-kopf h2 { margin: 0; font-size: 23px; letter-spacing: -0.02em; }
.avatar-knopf { position: relative; display: inline-block; }
.avatar-knopf .stift { position: absolute; right: -2px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: #1a1300; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 0 0 3px var(--bg); }
.zahlen { display: flex; justify-content: center; gap: 30px; margin: 14px 0; }
.zahlen div { text-align: center; }
.zahlen b { display: block; font-size: 21px; }
.zahlen span { font-size: 12px; color: var(--leise); }
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.raster a { aspect-ratio: 3 / 4; border-radius: 11px; overflow: hidden; background: var(--flaeche2); position: relative; animation: einblenden 0.3s ease-out both; animation-delay: calc(var(--i, 0) * 30ms); }
.raster img { width: 100%; height: 100%; object-fit: cover; }
.raster .e { position: absolute; right: 4px; bottom: 4px; font-size: 13px; background: rgba(0, 0, 0, 0.6); border-radius: 10px; padding: 1px 6px; }
.top3 { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.einst { display: flex; align-items: center; gap: 12px; padding: 12px 2px; }
.einst + .einst { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.einst .mitte { flex: 1; min-width: 0; }
.einst .mitte small { display: block; color: var(--leise); font-size: 12.5px; margin-top: 2px; }

/* Zuschneiden fürs Profilbild */
.zuschnitt { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; margin: 8px auto 14px; border-radius: 50%; overflow: hidden; background: #000; touch-action: none; cursor: grab; box-shadow: 0 0 0 3px var(--gold); }
.zuschnitt img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; user-select: none; -webkit-user-select: none; pointer-events: none; }
input[type="range"] { width: 100%; accent-color: var(--gold); }

/* ---------- Start & Bestätigen ---------- */
.start { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: calc(30px + var(--safe-t)) 20px calc(30px + var(--safe-b)); }
.start .held { text-align: center; margin-bottom: 24px; }
.start .held .logo { font-size: 48px; }
.start .held p { color: var(--leise); margin: 6px 0 0; font-size: 17px; }
.start .glas { width: 54px; height: 70px; border-width: 4px; border-radius: 0 0 13px 13px; margin-bottom: 10px; }
.start .glas::after { height: 13px; }
.codefeld { text-align: center; font-size: 34px !important; letter-spacing: 0.45em; font-weight: 800; padding-left: 0.45em !important; font-family: ui-monospace, Menlo, Consolas, monospace; }
.status { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 12px 14px; border-radius: 14px; background: var(--flaeche); margin: 12px 0; }
.status.ok { color: #bfeed3; }
.status.schlecht { color: #ffc9c9; background: #2a1515; }

/* ---------- Toast & Blatt ---------- */
.toast { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); transform: translate(-50%, calc(-100% - 40px)); visibility: hidden; z-index: 130; background: var(--schaum); color: #1a1300; padding: 12px 18px; border-radius: 16px; font-weight: 650; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0.35s; max-width: calc(100% - 32px); text-align: center; }
.toast.zeigen { transform: translate(-50%, 0); visibility: visible; }
.toast.fehler-t { background: var(--rot); color: #fff; }
.schleier { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; justify-content: center; animation: abdunkeln 0.2s ease-out; }
@keyframes abdunkeln { from { background: rgba(0, 0, 0, 0); } }
.blatt { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--flaeche); border-radius: 24px 24px 0 0; padding: 10px 18px calc(20px + var(--safe-b)); animation: hoch 0.26s cubic-bezier(0.2, 0.9, 0.3, 1); }
.blatt::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--rand); margin: 0 auto 14px; }
.blatt h3 { margin: 0 0 6px; }
.blatt .knopf { margin-top: 8px; }
@keyframes hoch { from { transform: translateY(100%); } }

@media (min-width: 700px) {
  body { background: radial-gradient(1200px 600px at 50% -10%, #1f1806, var(--bg)); }
  #app { border-left: 1px solid #18181d; border-right: 1px solid #18181d; background: var(--bg); }
  .kamera, .posten { max-width: 560px; margin: 0 auto; }
  .schleier { align-items: center; }
  .blatt { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .blasen { display: none; }
}

/* ---------- Icons ---------- */
.ic { display: inline-block; vertical-align: -0.18em; flex: none; }
.runde .ic, .zurueck .ic { margin: auto; }
.nav .ausloeser .ic { color: #1a1300; }

/* ---------- App installieren ---------- */
.install-karte { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #1d2433, #17171c 70%); border: 1px solid #2c3954; padding: 12px 12px 12px 14px; }
.install-karte .mitte { flex: 1; min-width: 0; line-height: 1.3; }
.install-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--gold); color: #1a1300; display: flex; align-items: center; justify-content: center; flex: none; }
.install-ic .ic { margin: auto; }
.install-karte .schliessen { width: 28px; height: 28px; border-radius: 50%; color: var(--leise); flex: none; font-size: 14px; }
.schritte { list-style: none; padding: 0; margin: 14px 0 6px; counter-reset: schritt; }
.schritte li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 15px; }
.schritte li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.schritt-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--flaeche2); display: flex; align-items: center; justify-content: center; flex: none; font-weight: 800; font-size: 18px; color: #6aa8ff; }
.schritt-ic .ic { margin: auto; }
.zeiger-unten { position: fixed; left: 50%; bottom: calc(6px + var(--safe-b)); transform: translateX(-50%); color: var(--gold); z-index: 95; animation: zeigen 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes zeigen { 50% { transform: translate(-50%, 8px); } }

/* ---------- Historie ---------- */
.historie-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; }
.historie-link .runde { background: #2a2108; color: var(--gold); }
.hist-kopf { display: flex; align-items: center; gap: 12px; margin: 2px 2px 14px; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kachel { background: var(--flaeche); border-radius: 16px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.05); animation: einblenden 0.35s ease-out both; }
.kachel b { display: block; font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; }
.kachel span { font-size: 12.5px; color: var(--leise); }
.kachel.gross-k { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, #3a2c08, #17171c 75%); border-color: #4a3a0e; }
.kachel.gross-k .emo-gross { font-size: 46px; line-height: 1; margin-bottom: 8px; color: inherit; animation: wippen 3s ease-in-out infinite; display: inline-block; }
.kachel.gross-k b { font-size: 19px; margin: 2px 0; }
.kachel.gross-k small { color: var(--gold); font-weight: 650; font-size: 12.5px; }
.heat-rahmen { display: flex; gap: 6px; }
.heat-wt { display: grid; grid-template-rows: 16px repeat(7, 14px); gap: 3px; font-size: 10px; color: var(--leise); flex: none; }
.heat-wt span:first-child { grid-row: 2; }
.heat { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.heat::-webkit-scrollbar { display: none; }
.woche-sp { display: grid; grid-template-rows: 16px repeat(7, 14px); gap: 3px; flex: none; }
.woche-sp .monat { font-size: 10px; color: var(--leise); white-space: nowrap; width: 14px; overflow: visible; }
.zelle { width: 14px; height: 14px; border-radius: 4px; background: #232329; display: block; padding: 0; animation: einblenden 0.3s ease-out both; animation-delay: var(--d, 0ms); }
.zelle.l1 { background: #5c460f; }
.zelle.l2 { background: #9a7413; }
.zelle.l3 { background: #d9a51f; }
.zelle.l4 { background: #ffc531; box-shadow: 0 0 6px rgba(255, 197, 49, 0.5); }
.zelle.heute { outline: 1.5px solid var(--schaum); outline-offset: 1px; }
.zelle.gewaehlt { outline: 2px solid #fff; outline-offset: 1px; }
.zelle.leer-z { background: transparent; }
.heat-legende { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 11px; color: var(--leise); margin-top: 10px; }
.heat-legende .zelle { width: 11px; height: 11px; animation: none; }
.tag-detail { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); min-height: 40px; }
.v-getraenke { display: flex; flex-wrap: wrap; gap: 5px; }
.klein-chip { min-height: 26px; padding: 0 9px; font-size: 12.5px; border-radius: 13px; background: var(--flaeche2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.balken { padding: 8px 14px; }
.balken-z { display: grid; grid-template-columns: 26px minmax(0, 1fr) 38% 28px; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; }
.balken-z .b-emo { font-size: 18px; }
.balken-z .b-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken-z b { text-align: right; }
.b-spur { height: 10px; border-radius: 5px; background: var(--bg2); overflow: hidden; }
.b-spur i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, var(--f), #fff6dc); animation: wachsen 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); transform-origin: left; }
@keyframes wachsen { from { transform: scaleX(0); } }
.mix { display: flex; height: 18px; border-radius: 9px; overflow: hidden; gap: 2px; background: var(--bg2); }
.mix i { width: var(--w); background: var(--f); animation: wachsen 0.9s ease-out both; transform-origin: left; }
.mix-legende { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 13px; color: #d8d4ca; }
.mix-legende span { display: inline-flex; align-items: center; gap: 5px; }
.mix-legende i { width: 9px; height: 9px; border-radius: 50%; background: var(--f); }
.woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 110px; }
.woche > div { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.w-spur { flex: 1; width: 100%; max-width: 26px; border-radius: 7px; background: var(--bg2); display: flex; align-items: flex-end; overflow: hidden; }
.w-spur i { display: block; width: 100%; height: var(--h); background: linear-gradient(0deg, #9a7413, var(--gold)); border-radius: 7px; animation: hochwachsen 0.8s ease-out both; animation-delay: calc(var(--i) * 60ms); transform-origin: bottom; }
.woche .top .w-spur i { background: linear-gradient(0deg, var(--gold), var(--schaum)); }
.woche small { font-size: 11px; color: var(--leise); }
.woche .top small { color: var(--gold); font-weight: 800; }
@keyframes hochwachsen { from { transform: scaleY(0); } }
.tageszeit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.tageszeit > div { position: relative; overflow: hidden; text-align: center; background: var(--bg2); border-radius: 12px; padding: 8px 4px; }
.tageszeit span { font-size: 18px; display: block; }
.tageszeit b { display: block; font-size: 16px; }
.tageszeit small { font-size: 10.5px; color: var(--leise); }
.tageszeit i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); background: var(--gold); }
.monat-titel { font-size: 13px; font-weight: 800; color: var(--leise); margin: 18px 4px 8px; text-transform: capitalize; }
.verlauf .zeile { align-items: flex-start; }
.verlauf .datum { width: 40px; flex: none; text-align: center; background: var(--bg2); border-radius: 10px; padding: 5px 0; line-height: 1.1; }
.verlauf .datum b { display: block; font-size: 17px; }
.verlauf .datum small { font-size: 10.5px; color: var(--leise); }
.verlauf .unter { margin-top: 5px; }

/* ---------- Rechtliches ---------- */
.recht { line-height: 1.55; font-size: 14.5px; }
.recht h3 { font-size: 16px; margin: 20px 0 6px; }
.recht h3:first-child { margin-top: 0; }
.recht ul { padding-left: 18px; margin: 6px 0; }
.recht li { margin: 4px 0; }
.recht a { text-decoration: underline; }
.blatt .recht { max-height: 62vh; overflow-y: auto; margin: 10px 0; padding-right: 4px; }
.recht-fuss { text-align: center; font-size: 12px; color: var(--leise); margin: 18px 0 0; line-height: 1.9; }
.recht-fuss a { color: var(--leise); text-decoration: underline; }
.haken a { color: var(--gold); text-decoration: underline; }
.schalter.klein-schalter { width: 44px; height: 27px; }
.schalter.klein-schalter span::after { width: 21px; height: 21px; }
.schalter.klein-schalter input:checked + span::after { transform: translateX(17px); }
.schalter input:disabled + span { opacity: 0.4; }

/* ---------- Kleine Handys (iPhone mini/SE & Co.) ---------- */
@media (max-width: 380px) {
  :root { --nav-h: 62px; --radius: 18px; }
  body { font-size: 15px; }
  .kopf { padding: calc(10px + var(--safe-t)) 12px 10px; gap: 8px; }
  .kopf h1 { font-size: 20px; }
  .inhalt { padding-left: 12px; padding-right: 12px; }
  .posten .innen { padding-left: 12px; padding-right: 12px; }
  .runde, .zurueck { width: 38px; height: 38px; }
  .nav a { font-size: 10px; gap: 2px; }
  .nav .ausloeser { width: 56px; height: 56px; margin-top: -22px; }
  .reiter button { font-size: 14px; min-height: 38px; }
  .knopf { min-height: 46px; padding: 0 14px; font-size: 15px; }
  .knopf.klein { min-height: 36px; padding: 0 11px; font-size: 13.5px; }
  .chip { font-size: 13px; min-height: 32px; padding: 0 10px; }
  .abschnitt { padding: 12px; }
  .sicht button { min-height: 56px; font-size: 12px; }
  .ortknoepfe .knopf { font-size: 14px; padding: 0 8px; white-space: nowrap; }
  .posten .doppel { width: 58%; }
  .post-kopf .unter { font-size: 12px; }
  .prost { min-height: 40px; padding: 0 13px; }
  .jetzt { gap: 12px; }
  .jetzt .avatar { width: 50px; height: 50px; }
  .start { padding-left: 16px; padding-right: 16px; }
  .start .held .logo { font-size: 40px; }
  .codefeld { font-size: 28px !important; }
  .kamera .shutter { width: 70px; height: 70px; }
  .kamera .shutter::after { width: 54px; height: 54px; }
  .kamera .seiten { width: 50px; height: 50px; font-size: 20px; }
  .zahlen { gap: 22px; }
  .kachel { padding: 12px; }
  .kachel b { font-size: 21px; }
  .balken-z { grid-template-columns: 22px minmax(0, 1fr) 34% 24px; font-size: 13px; gap: 6px; }
  .schreiben { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .install-karte { gap: 10px; padding: 10px; }
  .install-ic { width: 38px; height: 38px; }
}
@media (max-width: 340px) {
  .nav a { font-size: 0; }
  .nav a .i { transform: scale(1.05); }
  .kopf h1 { font-size: 18px; }
  .sicht { gap: 6px; }
  .sicht button { font-size: 11px; }
  .kacheln { gap: 6px; }
  .tageszeit small { font-size: 9.5px; }
  .start .held .logo { font-size: 36px; }
  .install-karte .leise { display: none; }
  .ortknoepfe .knopf { white-space: normal; font-size: 13px; line-height: 1.2; padding: 4px 6px; text-align: center; }
  .hilfe { font-size: 12.5px; }
}

/* =================================================================== v4 */
/* ---------- Logo: 3D-Bierkrug ---------- */
.krug-box { display: inline-block; line-height: 0; flex: none; }
.krug { display: block; width: 100%; height: auto; overflow: visible; }
.krug.lebt .bl { animation: krugBlase var(--d) linear var(--v) infinite; transform-box: fill-box; }
.krug.lebt .schaum { animation: schaumAtmen 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.krug.lebt .glanz { animation: krugGlanz 6s ease-in-out 1s infinite; }
.krug.lebt .glut { animation: krugGlut 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes krugBlase { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 0.9; } 85% { opacity: 0.8; } 100% { transform: translate(var(--w), -70px); opacity: 0; } }
@keyframes schaumAtmen { 50% { transform: scale(1.025, 1.05); } }
@keyframes krugGlanz { 0%, 55% { transform: translateX(0); } 85%, 100% { transform: translateX(190px); } }
@keyframes krugGlut { 50% { opacity: 0.6; transform: scale(1.08); } }
.krug-box.schwebe { animation: schweben 5s ease-in-out infinite; }
@keyframes schweben { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.lade .krug-box { margin-bottom: 2px; }
.kopf-logo { display: flex; align-items: center; gap: 8px; }
.kopf-logo .krug-box { margin-top: -4px; }
.start .held .krug-box { margin: 0 auto 8px; display: block; }

/* ---------- Willkommen & Registrierung (BeReal-Stil: schwarz, groß, klar) ---------- */
.willkommen, .wiz-seite { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #000; position: relative; z-index: 2; }
.willkommen { padding: calc(14px + var(--safe-t)) 22px calc(20px + var(--safe-b)); }
.w-oben { display: flex; justify-content: flex-end; }
.w-mitte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 0; }
.w-mitte .krug-box { margin-bottom: 18px; filter: drop-shadow(0 18px 40px rgba(255, 170, 30, 0.22)); }
.w-logo { font-size: 50px; line-height: 1; }
.w-slogan { margin: 14px 0 0; font-size: 18px; color: #d9d5cc; font-weight: 600; }
.w-slogan2 { margin: 2px 0 0; font-size: 18px; color: var(--gold); font-weight: 800; letter-spacing: 0.01em; }
.w-unten { display: flex; flex-direction: column; gap: 10px; }
.w-unten .knopf + .knopf.voll { margin-top: 0; }
.w-unten .recht-fuss { margin-top: 8px; }
.knopf.weiss { background: #fff; color: #000; font-weight: 800; box-shadow: 0 6px 24px rgba(255, 255, 255, 0.12); min-height: 56px; border-radius: 16px; font-size: 17px; }
.knopf.weiss:disabled { background: #3a3a40; color: #8d8a83; box-shadow: none; opacity: 1; }
.knopf.dunkel { background: #1c1c21; color: #fff; font-weight: 700; box-shadow: none; min-height: 56px; border-radius: 16px; font-size: 17px; border: 1px solid #2b2b31; }
.sprach-pille { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: #17171c; color: #dcd8cf; font-size: 13px; font-weight: 750; border: 1px solid #2a2a30; }
.wiz-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(12px + var(--safe-t)) 16px 8px; }
.wiz-kopf .logo { font-size: 22px; }
.wiz-kopf .zurueck { background: #141418; }
.wiz-fort { height: 3px; margin: 4px 22px 0; border-radius: 2px; background: #1e1e23; overflow: hidden; }
.wiz-fort i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--gold-dunkel), var(--gold)); border-radius: 2px; transition: width 0.4s ease; }
.wiz { flex: 1; display: flex; flex-direction: column; padding: 0 22px calc(18px + var(--safe-b)); }
.wiz-mitte { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px 0; gap: 12px; animation: einblenden 0.3s ease-out both; }
.wiz-frage { font-size: 25px; line-height: 1.2; font-weight: 850; letter-spacing: -0.02em; margin: 0 0 14px; max-width: 440px; }
.wiz-feld { width: 100%; max-width: 420px; min-height: 56px; padding: 12px 16px; border-radius: 16px; background: #121216; border: 1.5px solid #26262c; color: #fff; outline: none; text-align: center; font-size: 19px; font-weight: 650; -webkit-appearance: none; appearance: none; transition: border-color 0.2s; }
.wiz-feld:focus { border-color: var(--gold-dunkel); }
.wiz-feld::placeholder { color: #5f5c56; font-weight: 600; }
.wiz-feld.gross { background: transparent; border: 0; border-bottom: 2px solid #26262c; border-radius: 0; font-size: 30px; font-weight: 800; padding: 8px 4px; }
.wiz-feld.gross:focus { border-bottom-color: var(--gold); }
.wiz-hinweis { margin: 2px 0 0; color: var(--leise); font-size: 14px; max-width: 380px; line-height: 1.45; }
.wiz-unten { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.wiz-unten .knopf { width: 100%; max-width: 440px; }
.wiz-klein { margin: 0; color: var(--leise); font-size: 12.5px; text-align: center; line-height: 1.5; max-width: 420px; }
.wiz-klein a { color: #d9d5cc; text-decoration: underline; }
.wiz-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.wiz .fehler { margin: 0; text-align: center; }
.wiz .textknopf { font-size: 14.5px; }
.geb-felder { display: flex; gap: 10px; justify-content: center; align-items: center; }
.geb { width: 76px; min-height: 64px; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 0.02em; background: transparent; border: 0; border-bottom: 2px solid #2a2a30; color: #fff; outline: none; padding: 6px 0; border-radius: 0; -webkit-appearance: none; appearance: none; font-variant-numeric: tabular-nums; }
.geb.jahr { width: 118px; }
.geb:focus { border-bottom-color: var(--gold); }
.geb::placeholder { color: #4d4a45; }
.bn-feld { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 420px; background: #121216; border: 1.5px solid #26262c; border-radius: 16px; padding-left: 16px; }
.bn-feld:focus-within { border-color: var(--gold-dunkel); }
.bn-feld span { font-size: 20px; font-weight: 800; color: var(--gold); }
.bn-feld .wiz-feld { border: 0; background: transparent; text-align: left; padding-left: 0; }
.bn-status { min-height: 22px; font-size: 14px; font-weight: 650; display: flex; align-items: center; justify-content: center; }
.gut { color: var(--gruen); display: inline-flex; align-items: center; gap: 5px; }
.schlecht { color: #ff8a8a; }
.pw-feld { position: relative; width: 100%; max-width: 420px; }
.pw-feld .wiz-feld { padding-right: 52px; padding-left: 52px; }
.pw-auge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; color: var(--leise); display: flex; align-items: center; justify-content: center; }
.pw-auge.an { color: var(--gold); }
.pw-staerke { width: 100%; max-width: 420px; height: 5px; border-radius: 3px; background: #1e1e23; overflow: hidden; }
.pw-staerke i { display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; background: #ff6b6b; transition: width 0.3s, background 0.3s; }
.pw-staerke.s2 i { background: var(--gold); }
.pw-staerke.s3 i { background: var(--gruen); }
.versteckt-a11y { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.wiz .codefeld { max-width: 300px; }
/* Benachrichtigungen beim Start */
.onboard .w-mitte { justify-content: center; }
.ob-glocke { width: 78px; height: 78px; border-radius: 24px; background: linear-gradient(160deg, var(--gold2), var(--gold) 60%, #e9a90f); color: #1a1300; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 12px 34px rgba(255, 197, 49, 0.3); animation: glockeWackeln 2.8s ease-in-out infinite; }
.ob-glocke .ic { margin: auto; }
@keyframes glockeWackeln { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-10deg); } 82% { transform: rotate(9deg); } 89% { transform: rotate(-5deg); } }
.ob-liste { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; text-align: left; }
.ob-zeile { display: flex; gap: 14px; align-items: center; background: #111115; border: 1px solid #222228; border-radius: 18px; padding: 14px; }
.ob-zeile b { display: block; font-size: 15.5px; }
.ob-zeile small { display: block; color: var(--leise); font-size: 13px; margin-top: 2px; line-height: 1.35; }
.ob-ic { width: 46px; height: 46px; border-radius: 14px; background: #2a2108; color: var(--gold); display: flex; align-items: center; justify-content: center; flex: none; }
.ob-ic .ic { margin: auto; }

/* ---------- Icons in Bausteinen ---------- */
.gi { display: inline-flex; color: var(--f, var(--gold)); flex: none; line-height: 0; }
.chip .gi .ic, .chip > .ic { display: block; }
.chip .weg { display: inline-flex; opacity: 0.65; margin-left: 1px; }
.wahl .chip.an .gi, .leiste .chip.an .gi { color: #1a1300; }
.knopf .ic, .textknopf .ic { flex: none; }
.textknopf { display: inline-flex; align-items: center; gap: 5px; }
.reiter button, .reiter a { flex: 1; min-height: 40px; border-radius: 11px; color: var(--leise); font-weight: 650; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 7px; transition: background 0.2s, color 0.2s; }
.reiter a.an { background: var(--flaeche2); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.segment button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.einst > span:first-child { color: var(--gold); display: flex; width: 22px; justify-content: center; flex: none; }
.zeile > span:first-child:not(.runde):not(.datum):not(.avatar) { color: var(--gold); display: flex; flex: none; }
.zeile > .leise:last-child { display: flex; }
.status > .ic { flex: none; margin-top: 1px; }
.schreiben button .ic { margin: auto; }
.leer .gross { color: #4a4740; }
.leer .gross .ic { margin: 0 auto; }
.sicht button .e { color: var(--gold); line-height: 0; }
.sicht button.an .e { color: var(--gold2); }
.abschnitt h3 > .ic { color: var(--gold); }
.titel2 > .ic { color: var(--gold); }
.ki-zeile { display: flex; align-items: center; gap: 5px; margin: 2px 0 6px; }
.ki-zeile .ic { color: var(--gold); }
.zahl-pille { display: inline-flex; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--flaeche2); color: var(--text); font-size: 11.5px; align-items: center; justify-content: center; letter-spacing: 0; }
.unter { display: flex; align-items: center; gap: 4px; min-width: 0; }
.unter .sep { opacity: 0.6; }
.unter > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unter > .ic, .unter > .gi { flex: none; }
.post-kopf .unter .ort { min-width: 0; flex: 0 1 auto; }
.post-kopf .unter > span:not(.ort) { flex: none; }
.post-kopf .unter .ic { opacity: 0.85; }
.mit-zeile { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 10px 4px 0; font-size: 14px; color: var(--leise); }
.mit-zeile .ic { color: var(--gold); }
.mit-zeile a { color: var(--text); font-weight: 700; }
.prost .glaeser { display: inline-flex; line-height: 0; }
.raster .e { display: flex; align-items: center; gap: 3px; padding: 3px 6px; }
.raster .e .ic { color: #fff; }
.jetzt .emo { box-shadow: 0 0 0 2px var(--bg); }
.b-emo { display: flex; }
.kachel span .ic { display: inline-block; vertical-align: -2px; color: #7cc3ff; }
.tageszeit > div > span { display: flex; justify-content: center; color: var(--gold); margin-bottom: 2px; }
.kachel.gross-k .emo-gross { line-height: 0; }
.gut-zu-wissen p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.gut-zu-wissen p:last-child { margin-bottom: 0; }
.gut-zu-wissen p > .ic { color: var(--gold); margin-top: 1px; }
.feld select, select.eingabe { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; background: var(--flaeche2); border: 1px solid var(--rand); color: var(--text); outline: none; font-size: 16px; }
.feld textarea { resize: none; line-height: 1.4; }
.zaehler { display: block; text-align: right; color: var(--leise); font-size: 12px; margin-top: 4px; }
.blatt .feld input, .blatt .feld textarea { background: var(--flaeche2); }
.sprach-liste { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.sprach-liste .knopf { justify-content: space-between; margin-top: 0; }

/* ---------- Feed ---------- */
.willkommen-karte { background: linear-gradient(135deg, #2b2108, #17171c 70%); border-color: #3d300c; }
.aufruf .krug-box { margin: -4px 0; }
.vorschlaege { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
.vorschlaege::-webkit-scrollbar { display: none; }
.vk { flex: none; width: 138px; background: var(--flaeche); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 18px; padding: 14px 10px 10px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.vk a { color: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.vk .avatar { margin-bottom: 4px; }
.vk b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vk small { color: var(--leise); font-size: 11.5px; line-height: 1.25; }
.vk .knopf { width: 100%; }
.erinnerung { display: flex; gap: 12px; align-items: stretch; color: inherit; position: relative; background: linear-gradient(135deg, #1f1a2e, #17171c 65%); border-color: #2f2846; padding: 12px; }
.er-bild { position: relative; width: 92px; flex: none; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #222; align-self: flex-start; }
.er-bild img { width: 100%; height: 100%; object-fit: cover; }
.er-bild .er-klein { position: absolute; top: 5px; left: 5px; width: 36%; height: auto; aspect-ratio: 3 / 4; border-radius: 6px; border: 1.5px solid #000; }
.erinnerung .mitte { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 22px; }
.er-titel { display: flex; align-items: center; gap: 5px; color: #b9a6ff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.erinnerung .mitte > b { font-size: 18px; letter-spacing: -0.01em; }
.er-zeile { display: flex; align-items: center; gap: 5px; font-size: 13.5px; color: #d8d4ca; min-width: 0; }
.er-zeile .ic { color: var(--gold); flex: none; }
.erinnerung .v-getraenke { margin-top: 2px; }
.schliessen { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; color: var(--leise); display: flex; align-items: center; justify-content: center; }

/* ---------- Kamera: Blitz, Zoom, Icons ---------- */
.kamera .x .ic, .kamera .seiten .ic { margin: auto; }
.kamera .seiten.an { background: var(--gold); color: #1a1300; }
.kamera .seiten.kein { opacity: 0.45; }
.kamera .seiten.text { font-size: 12px; font-weight: 750; flex-direction: column; }
.zoom-leiste { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px; border-radius: 22px; background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 3; }
.zoom-leiste:empty { display: none; }
.zp { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px; color: #fff; font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, 0.12); transition: transform 0.15s, background 0.2s; }
.zp.an { background: rgba(0, 0, 0, 0.55); color: var(--gold); transform: scale(1.12); font-size: 13.5px; }
.kamera video { transition: transform 0.25s ease; transform-origin: center; }
.bildschirm-blitz { position: fixed; inset: 0; z-index: 200; background: #fff8e8; animation: bblitz 0.55s ease-out forwards; pointer-events: none; }
@keyframes bblitz { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
.problem-ic { color: #777; display: flex; justify-content: center; margin-bottom: 6px; }
.problem p { margin: 0 0 14px; line-height: 1.45; }

/* ---------- Posten: Freunde markieren ---------- */
.mark-leiste { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mark-leiste::-webkit-scrollbar { display: none; }
.mark { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--leise); font-size: 12px; font-weight: 650; }
.mark-av { position: relative; display: inline-block; border-radius: 50%; transition: transform 0.15s; }
.mark-av .avatar { transition: box-shadow 0.2s, filter 0.2s; filter: saturate(0.7) brightness(0.85); }
.mark-haken { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #1a1300; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--flaeche); transform: scale(0); transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.mark-haken .ic { margin: auto; }
.mark.an { color: var(--text); }
.mark.an .avatar { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--gold); filter: none; }
.mark.an .mark-haken { transform: scale(1); }
.mark:active .mark-av { transform: scale(0.92); }
.mark .nm { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Profil ---------- */
.bio { margin: 10px auto 0; max-width: 380px; white-space: pre-line; font-size: 15px; line-height: 1.4; color: #e6e2d9; overflow-wrap: anywhere; }
.profil-infos { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--leise); font-size: 13.5px; }
.profil-infos > span { display: inline-flex; align-items: center; gap: 5px; }
.profil-infos .ic { color: var(--gold); }
.profil-knoepfe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 6px; }
.drink-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.dk { display: flex; align-items: center; gap: 10px; background: var(--flaeche); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 12px; min-width: 0; }
.dk-ic { width: 46px; height: 46px; border-radius: 14px; background: #221c0b; display: flex; align-items: center; justify-content: center; flex: none; }
.dk .mitte { min-width: 0; display: flex; flex-direction: column; }
.dk small { font-size: 12px; color: var(--leise); font-weight: 650; }
.dk b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk em { font-style: normal; color: var(--gold); font-size: 12.5px; font-weight: 700; }
.pins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pins a { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--flaeche2); box-shadow: 0 0 0 1.5px rgba(255, 197, 49, 0.35); }
.pins img { width: 100%; height: 100%; object-fit: cover; }
.pins .pk { position: absolute; top: 4px; left: 4px; width: 38%; height: auto; aspect-ratio: 3 / 4; border-radius: 5px; border: 1px solid #000; }
.pins .pd { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 4px 4px; font-size: 10.5px; font-weight: 750; text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
.pins-leer { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1.5px dashed #2c2c33; color: var(--leise); font-size: 13px; margin: 4px 0 14px; }
.pins-leer .ic { color: var(--gold); }
.zwei-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.zwei-links .historie-link { margin: 0; padding: 12px; gap: 10px; }
.zwei-links .historie-link .unter { white-space: normal; display: block; font-size: 12px; line-height: 1.3; }
.zwei-links .historie-link > .leise { display: none; }
.zahlen > div, .zahlen > a { text-align: center; color: inherit; }

/* ---------- Erfolge ---------- */
.erf-kopf { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #2b2108, #17171c 70%); border-color: #3d300c; }
.erf-zahl { display: flex; align-items: baseline; gap: 4px; }
.erf-zahl b { font-size: 34px; letter-spacing: -0.03em; color: var(--gold); line-height: 1; }
.erf-zahl span { color: var(--leise); font-weight: 700; }
.erf-kopf .mitte { flex: 1; min-width: 0; }
.erf-kopf .mitte > b { display: block; font-size: 14.5px; margin-bottom: 8px; }
.erf-balken { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.erf-balken i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--f, var(--gold-dunkel)), var(--gold2)); animation: wachsen 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both; transform-origin: left; }
.erf-balken.gross { height: 10px; width: 100%; margin: 6px 0 12px; }
.erfolge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; margin-top: 6px; }
.erfolg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text); padding: 4px 0; animation: einblenden 0.35s ease-out both; animation-delay: calc(var(--i, 0) * 22ms); min-width: 0; }
.erfolg b { font-size: 11.5px; line-height: 1.2; font-weight: 750; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.erfolg small { font-size: 10.5px; color: var(--leise); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: -3px; }
.erfolg.fertig small { color: var(--f, var(--gold)); }
.erfolg:active .ring { transform: scale(0.93); }
.ring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform 0.15s; }
.ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 5; }
.ring .r-spur { stroke: #2a2a31; }
.ring .r-wert { stroke: var(--f); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.2, 0.8, 0.3, 1); animation: ringFuellen 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes ringFuellen { from { stroke-dashoffset: 170; } }
.ring .r-ic { color: #6b6860; display: flex; position: relative; }
.ring.fertig .r-ic { color: var(--f); }
.ring.fertig { background: radial-gradient(circle, color-mix(in srgb, var(--f) 22%, transparent) 0 52%, transparent 53%); border-radius: 50%; }
.ring.fertig > svg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--f) 55%, transparent)); }
.r-haken { position: absolute; right: 0; bottom: 0; width: 34%; height: 34%; min-width: 17px; min-height: 17px; border-radius: 50%; background: var(--f); color: #111; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2.5px var(--bg); }
.r-haken .ic { margin: auto; }
.erf-detail { text-align: center; padding: 8px 0 4px; }
.erf-detail .ring { margin: 6px auto 10px; }
.erf-detail h3 { font-size: 21px; margin: 0 0 4px; }
.erf-detail p { margin: 6px 0; }
.erf-detail .gut { justify-content: center; font-weight: 750; }
/* Erfolg freigeschaltet */
.feier { position: fixed; inset: 0; z-index: 125; display: flex; align-items: center; justify-content: center; background: rgba(5, 5, 7, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: abdunkeln 0.3s ease-out; padding: 24px; overflow: hidden; }
.feier i { position: absolute; bottom: -20px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--f); opacity: 0; animation: hochblubbern 2.2s ease-out var(--v) forwards; }
.feier-box { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: feierRein 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; max-width: 340px; }
@keyframes feierRein { from { transform: scale(0.6); opacity: 0; } }
.feier-box .ring { margin-bottom: 10px; animation: wippen 3s ease-in-out infinite; }
.feier-box small { color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 850; font-size: 12px; }
.feier-box b { font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; }
.feier-box span { color: #d8d4ca; }
.feier-box em { font-style: normal; color: var(--leise); font-size: 13px; }
.feier-knoepfe { display: flex; gap: 10px; margin-top: 18px; width: 100%; }
.feier-knoepfe .knopf { flex: 1; min-height: 50px; }
.prost-gross .e { line-height: 0; }

@media (max-width: 380px) {
  .w-logo { font-size: 42px; }
  .wiz-frage { font-size: 22px; }
  .wiz, .willkommen { padding-left: 16px; padding-right: 16px; }
  .geb { width: 64px; font-size: 26px; min-height: 56px; }
  .geb.jahr { width: 100px; }
  .wiz-feld.gross { font-size: 26px; }
  .knopf.weiss, .knopf.dunkel { min-height: 52px; font-size: 16px; }
  .erfolge { gap: 14px 4px; }
  .erfolg b { font-size: 10.5px; }
  .erfolg .ring { width: 56px !important; height: 56px !important; }
  .ob-zeile { padding: 12px; gap: 12px; }
  .vk { width: 128px; }
  .reiter a, .reiter button { font-size: 13.5px; gap: 5px; }
  .pins { gap: 4px; }
  .zwei-links .historie-link .runde { width: 34px; height: 34px; }
}
@media (max-width: 340px) {
  .wiz-frage { font-size: 20px; }
  .geb { width: 56px; font-size: 23px; }
  .geb.jahr { width: 88px; }
  .geb-felder { gap: 6px; }
  .erfolg .ring { width: 50px !important; height: 50px !important; }
  .erfolg b { font-size: 10px; }
  .w-mitte .krug-box { width: 128px !important; }
  .zwei-links { grid-template-columns: 1fr; }
}
.erfolg { justify-content: flex-start; }
.erfolg small { margin-top: -2px; }
.zeile .unter.umbruch { white-space: normal; }
.zeile .unter.umbruch > span { white-space: normal; }
.mark-info { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dk b { white-space: normal; }
@media (max-width: 380px) { .reiter a, .reiter button { font-size: 13px; padding: 0 4px; min-width: 0; } }
@media (max-width: 340px) { .reiter a, .reiter button { font-size: 12px; } }
@media (max-height: 720px) {
  .ob-glocke { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 12px; }
  .onboard .wiz-frage { font-size: 22px; margin-bottom: 6px; }
  .ob-liste { margin-top: 10px; gap: 8px; }
  .ob-zeile { padding: 10px 12px; }
  .ob-zeile small { font-size: 12px; }
  .ob-ic { width: 40px; height: 40px; }
  .onboard .w-mitte { padding: 6px 0; }
}

/* ================= v5 ================= */
/* Posten (aufgeräumt) */
.p5 { display: flex; flex-direction: column; min-height: 100%; }
.p5-kopf { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--safe-t)) 14px 6px; }
.p5-kopf .logo { font-size: 20px; }
.p5-innen { flex: 1; padding: 0 16px; max-width: 520px; width: 100%; margin: 0 auto; }
.p5-text { width: 100%; background: none; border: 0; color: var(--text); font: inherit; font-size: 16px; text-align: center; resize: none; padding: 8px 4px 12px; outline: none; }
.p5-text::placeholder { color: var(--leise); }
.p5-bild { max-width: 300px; margin: 0 auto; }
.p5-gew { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 6px; }
.p5-drink, .p5-nix, .p5-fehlt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--flaeche2); color: var(--text); font-weight: 650; border: 1px solid var(--rand); }
.p5-drink.an { background: rgba(255, 197, 49, 0.14); border-color: var(--gold); color: var(--gold2); }
.p5-fehlt { border-style: dashed; color: var(--gold); }
.p5-nix { color: var(--leise); font-weight: 500; }
.p5-ki { font-size: 12.5px; color: var(--leise); text-align: center; width: 100%; }
.p5-schande { text-align: center; color: #ff9b7a; font-size: 13.5px; margin: 4px 0 0; font-style: italic; }
.p5-fuss { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 22%); padding: 22px 16px calc(14px + var(--safe-b)); max-width: 520px; width: 100%; margin: 0 auto; }
.p5-leiste { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.p5-opt { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: var(--flaeche2); color: var(--text); font-size: 13.5px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p5-opt .ic { color: var(--gold); }
.p5-senden { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border-radius: 16px; background: var(--text); color: #111; font-weight: 800; font-size: 17px; letter-spacing: 0.06em; }
.p5-senden:disabled { opacity: 0.45; }
.p5-hinweis { text-align: center; margin: 10px 0 0; }
/* Blätter mit Listen */
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.blatt-kopf h3 { margin: 0; }
.blatt-gross { min-height: 60vh; }
.opt-liste { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.opt-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border-radius: 14px; background: var(--flaeche2); color: var(--text); text-align: left; cursor: pointer; }
.opt-zeile .mitte { flex: 1; min-width: 0; }
.opt-zeile small { display: block; color: var(--leise); font-size: 12.5px; }
.opt-zeile > .ic:first-child { color: var(--gold); }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rand); flex: none; position: relative; }
.opt-zeile.an .radio, .opt-zeile input:checked + .radio { border-color: var(--gold); }
.opt-zeile.an .radio::after, .opt-zeile input:checked + .radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--gold); }
.melde-zeile input { position: absolute; opacity: 0; pointer-events: none; }
.tag-liste { display: flex; flex-direction: column; margin: 6px 0; }
.tag-liste .zeile { padding: 9px 2px; }
.tag-knopf { flex: none; padding: 7px 16px; border-radius: 999px; background: var(--flaeche2); color: var(--text); font-weight: 650; font-size: 14px; border: 1px solid var(--rand); }
.tag-knopf.an { background: var(--gold); color: #1a1400; border-color: var(--gold); }
/* Getränke-Auswahl */
.kat-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.kat-kachel { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; border-radius: 14px; background: var(--flaeche2); color: var(--text); font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.kat-kachel.an { border-color: var(--gold); background: rgba(255, 197, 49, 0.1); }
.g-titel { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--leise); margin: 14px 2px 6px; }
.g-liste { display: flex; flex-direction: column; gap: 2px; }
.g-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border-radius: 12px; color: var(--text); text-align: left; font-size: 15px; }
.g-zeile:active, .g-zeile.an { background: rgba(255, 197, 49, 0.12); }
.g-zeile.an { color: var(--gold2); font-weight: 650; }
.g-eigen { color: var(--gold); }
.g-wer { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
.g-wer + .g-wer { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mein-g { margin-left: auto; color: var(--gold2); font-weight: 600; font-size: 14px; }
.nix-chip { opacity: 0.75; }
/* Feed */
.feed-kopf { justify-content: space-between; }
.glocke { position: relative; }
.glocke .zahl { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rot); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tabs { display: flex; justify-content: center; gap: 22px; margin: 2px 0 14px; }
.tabs a, .tabs button { color: var(--leise); font-weight: 700; font-size: 15px; padding: 6px 2px; border-bottom: 2px solid transparent; background: none; }
.tabs .an, .tabs .aktiv { color: var(--text); border-color: var(--text); }
.push-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--rand); margin: 0 0 14px; }
.push-banner .mitte { flex: 1; font-size: 14px; }
.hey-karte { position: relative; overflow: hidden; text-align: center; padding: 22px 18px; border-radius: var(--radius); background: var(--flaeche); margin: 0 0 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hey-karte b { font-size: 20px; }
.hey-karte p { margin: 0 0 6px; color: var(--leise); font-size: 14px; }
.hey-hg { position: absolute; inset: -40% -20% auto; height: 120%; background: radial-gradient(circle, rgba(255, 197, 49, 0.16), transparent 60%); pointer-events: none; }
.post { background: var(--flaeche); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: calc(var(--radius) + 4px); padding: 12px; }
.post .doppel { box-shadow: none; }
.post-seite .post { animation: none; }
.reak { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; color: var(--leise); font-weight: 650; font-size: 14px; background: none; }
.reak.an { color: var(--gold); }
.reak.an[data-art="herz"] { color: #ff5f7e; }
.reak:active { transform: scale(0.92); }
.plus-pille { background: rgba(0, 0, 0, 0.55); color: #fff; font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mit-knopf { color: var(--gold); font-weight: 650; font-size: 13.5px; background: none; padding: 4px 0; }
.prost-bild { display: inline-block; line-height: 0; flex: none; }
.prost3d { display: block; width: 100%; height: auto; overflow: visible; }
/* Kommentare */
.kommentare { margin: 14px 0 90px; }
.kom { display: flex; gap: 10px; padding: 9px 2px; align-items: flex-start; }
.kom .avatar { width: 34px; height: 34px; flex: none; }
.kom-text { flex: 1; min-width: 0; font-size: 14.5px; word-wrap: break-word; }
.kom-text b { margin-right: 6px; }
.kom-leer { text-align: center; color: var(--leise); padding: 26px 0; font-size: 14px; }
/* QR & Scanner */
.qr-karte { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; color: var(--text); }
.qr-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--gold); color: #1a1400; display: flex; align-items: center; justify-content: center; flex: none; }
.qr-blatt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 6px 0 4px; }
.qr-rahmen { width: min(76vw, 280px); aspect-ratio: 1; padding: 14px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 6px rgba(255, 197, 49, 0.35), var(--schatten); display: flex; align-items: center; justify-content: center; }
.qr-svg { width: 100%; height: 100%; display: block; }
.qr-name { font-size: 19px; margin-top: 10px; }
.scanner { background: #000; }
.scan-rahmen { position: absolute; left: 50%; top: 45%; width: min(70vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 28px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55); border: 3px solid var(--gold); pointer-events: none; }
.scan-unten { position: absolute; left: 0; right: 0; bottom: calc(26px + var(--safe-b)); text-align: center; color: #fff; padding: 0 20px; }
/* Chats */
.chat-kopf { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; }
.chat-kopf .avatar { width: 38px; height: 38px; }
.chat-kopf .mitte { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.chat-kopf small { color: var(--leise); font-size: 12.5px; }
.chat-leer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 20px; }
.chat-leer .avatar { width: 92px; height: 92px; font-size: 34px; }
.chat-leer b { font-size: 19px; }
.chat-leer .knopf { margin-top: 10px; }
/* Profil */
.mit-flamme { position: relative; display: inline-block; flex: none; }
.flamme { position: absolute; right: -6px; bottom: -4px; display: inline-flex; align-items: center; gap: 1px; padding: 2px 6px 2px 4px; border-radius: 999px; background: linear-gradient(135deg, #ff9a3d, #ff4f2e); color: #fff; font-size: 12px; font-weight: 800; border: 2px solid var(--bg); line-height: 1; }
.profil-zahlen { display: flex; justify-content: center; gap: 22px; margin: 10px 0 4px; color: var(--leise); font-size: 14px; }
.profil-zahlen b { color: var(--text); display: block; font-size: 18px; text-align: center; }
.pin-mini { color: var(--gold); display: inline-flex; margin-left: 4px; }
.klein-runde { width: 34px; height: 34px; }
.fuellen { text-align: center; padding: 22px 16px; }
.erf-vorschau { display: block; color: inherit; }
.erf-v-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; }
.e-profil { gap: 14px; }
.e-profil .avatar { width: 56px; height: 56px; }
.anfragen-zeile .anfr-avs { display: flex; }
.anfr-avs .avatar { width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--flaeche); }
.anfr-avs .avatar:first-child { margin-left: 0; }
.zahl-pille.gold { background: var(--gold); color: #1a1400; }
.warn-zeile { color: #ffb36b; }
.warn { color: #ffb36b; }
.gold { color: var(--gold); }
/* Einstellungen */
.abmelden-knopf { display: block; width: 100%; padding: 15px; border-radius: 16px; background: var(--flaeche); color: var(--rot); font-weight: 700; margin: 18px 0 30px; text-align: center; }
.loeschen-seite { padding: 6px 0 30px; }
.gefahr-text { color: var(--leise); font-size: 14px; }
.gruende { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 18px; }
.danke { text-align: center; padding: 18px 6px 8px; }
.danke b { display: block; font-size: 19px; margin-bottom: 4px; }
/* Teilen */
.teilen-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; margin: 12px 0; }
.teilen-ziel { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text); text-align: center; background: none; }
.teilen-ziel > span:first-child { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--flaeche2); color: #fff; font-weight: 800; font-size: 18px; }
.teilen-link { display: flex; gap: 8px; align-items: center; background: var(--flaeche2); border-radius: 12px; padding: 10px 12px; font-size: 13px; word-break: break-all; }
.a2hs { display: inline-flex; align-items: center; gap: 6px; margin: 8px auto 0; }
.breit { width: 100%; }
.p5-drink .mitte { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.p5-drink small { font-weight: 500; font-size: 12px; opacity: 0.75; }
.p5-innen { padding-bottom: 24px; }
.p5-fuss { position: static; background: none; padding-top: 10px; }

/* ================= v5.1 Quick-Fixes ================= */
.kopf h1 { font-size: 26px; line-height: 42px; margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.kopf .kopf-mitte { flex: 1; display: flex; justify-content: center; font-size: inherit; line-height: normal; }
.kopf-platz { width: 42px; flex: none; }
.marke { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; }
.marke .krug-box { margin-top: -4px; }
.p5-kopf .marke, .wiz-kopf .marke { font-size: 20px; }
.kom-leer b { display: block; margin-bottom: 4px; }
.qr-karte .mitte b, .qr-karte .mitte small { display: block; }
.qr-karte .mitte small { color: var(--leise); margin-top: 2px; }
/* Getränk wählen: Hauptknopf vorne, "Kein Getränk" dezent */
.p5-drink.haupt { position: relative; overflow: hidden; padding: 13px 18px; border-color: rgba(255, 197, 49, 0.45); box-shadow: 0 0 0 4px rgba(255, 197, 49, 0.08); }
.p5-drink .drehen { width: 22px; height: 22px; flex: none; }
.ki-balken { position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--gold); border-radius: 3px; animation: kiBalken 1.2s ease-in-out infinite; }
@keyframes kiBalken { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.nix-zeile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: 4px; }
.p5-nix { padding: 5px 11px; font-size: 12.5px; background: none; border-color: transparent; opacity: 0.7; gap: 5px; }
.p5-nix.an { opacity: 1; color: #ff9b7a; border-color: rgba(255, 110, 80, 0.5); background: rgba(255, 90, 60, 0.08); animation: schande 0.6s ease, traurig 2.4s ease-in-out 0.6s infinite; }
@keyframes schande { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-2deg); } 40% { transform: translateX(5px) rotate(2deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes traurig { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); } 50% { box-shadow: 0 0 0 6px rgba(255, 90, 60, 0.15); } }
.p5-schande { display: flex; align-items: center; gap: 6px; font-weight: 650; animation: einblenden 0.4s ease-out both, wippen 2.4s ease-in-out 0.4s infinite; }
/* Profil: Flamme lebt leicht */
.flamme { animation: flackern 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes flackern { 0%, 100% { transform: scale(1) rotate(0); filter: brightness(1); } 30% { transform: scale(1.06) rotate(-3deg); filter: brightness(1.15); } 60% { transform: scale(0.98) rotate(2deg); } }
.e-bild { gap: 14px; text-align: left; color: inherit; }
.e-bild .avatar { width: 56px; height: 56px; }
.e-bild small { display: block; }
/* Karte */
.karte-wrap { position: relative; padding: 0 12px; }
.karte-box { height: calc(100vh - var(--nav-h) - var(--safe-b) - var(--safe-t) - 92px); height: calc(100dvh - var(--nav-h) - var(--safe-b) - var(--safe-t) - 92px); border-radius: var(--radius); overflow: hidden; background: #1a1a1f; }
.karte-box .leaflet-control-attribution { background: rgba(0, 0, 0, 0.55); color: #bbb; font-size: 10px; }
.karte-box .leaflet-control-attribution a { color: #ddd; }
.karte-leer { position: absolute; left: 24px; right: 24px; top: 14px; z-index: 500; display: flex; gap: 8px; align-items: center; padding: 11px 14px; border-radius: 14px; background: rgba(15, 15, 18, 0.9); font-size: 14px; color: var(--gold); }
.karte-leer span { color: var(--text); }
.kpin-box { background: none; border: 0; }
.kpin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); text-decoration: none; }
.kpin-ava { position: relative; padding: 3px; border-radius: 50%; background: var(--gold); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
.kpin-ava::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--gold); border-bottom: 0; }
.kpin-ava .avatar { width: 40px; height: 40px; font-size: 15px; display: flex; }
.kpin.grob .kpin-ava { background: #c9c5ba; }
.kpin.grob .kpin-ava::after { border-top-color: #c9c5ba; }
.kpin-pille { margin-top: 6px; display: flex; flex-direction: column; align-items: center; padding: 5px 10px; border-radius: 12px; background: rgba(12, 12, 15, 0.92); white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); font-size: 12.5px; line-height: 1.25; max-width: 190px; }
.kpin-pille small { display: inline-flex; align-items: center; gap: 4px; color: var(--gold2); font-weight: 650; }
.kpin-pille em { font-style: normal; color: var(--leise); font-size: 11px; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.kpin-pille b { color: var(--text); }

/* ================= v5.2 ================= */
.profil-knoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 14px 0; }
.profil-knoepfe .breit { flex: 1; width: auto; min-height: 44px; border-radius: 999px; justify-content: center; }
.profil-knoepfe .runde { width: 44px; height: 44px; }
.runde { position: relative; }
.runde .punkt { top: -3px; left: auto; right: -3px; }
/* Teilen */
.teilen-ziel img { width: 54px; height: 54px; border-radius: 50%; display: block; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: transform 0.15s; }
.teilen-ziel:active img { transform: scale(0.9); }
/* Lieblingsgetränk */
.lieb-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lieb-zeile .p5-drink { flex: 1; justify-content: flex-start; text-align: left; }
.lieb-zeile .p5-drink .mitte { flex: 1; }
/* Karte */
.karte-tabs { margin: 0 0 10px; }
.karte-box { height: calc(100vh - var(--nav-h) - var(--safe-b) - var(--safe-t) - 136px); height: calc(100dvh - var(--nav-h) - var(--safe-b) - var(--safe-t) - 136px); }
.karte-knopf { position: absolute; right: 24px; z-index: 600; width: 46px; height: 46px; border-radius: 50%; background: rgba(12, 12, 15, 0.92); color: var(--gold); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); }
.karte-knopf.oben { top: 12px; }
.karte-knopf.unten { bottom: 34px; width: 54px; height: 54px; border-radius: 18px; }
.karte-knopf:active { transform: scale(0.92); }
.karte-knopf.sucht .ic { animation: drehen 1s linear infinite; }
.karte-leer { right: 80px; }
.kpin-pille { opacity: 0; transform: translateY(-8px) scale(0.6); transform-origin: 50% 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; }
.kpin-box.offen .kpin-pille { opacity: 1; transform: none; pointer-events: auto; animation: pillePlopp 0.38s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes pillePlopp { 0% { transform: translateY(-8px) scale(0.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
.kpin-box.offen .kpin-ava { transform: scale(1.12); }
.kpin-ava { transition: transform 0.2s; }
.kpin.ich .kpin-ava { background: #fff; }
.kpin.ich .kpin-ava::after { border-top-color: #fff; }
.ich-punkt { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #4285f4; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(66, 133, 244, 0.22); }
/* Kamera öffnen */
.kam-blende { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: #000; clip-path: circle(0 at var(--x) var(--y)); animation: blende 0.6s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
.kam-ring { position: absolute; left: var(--x); top: var(--y); width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 3px solid var(--gold); animation: kamRing 0.6s ease-out forwards; }
@keyframes blende { 0% { clip-path: circle(0 at var(--x) var(--y)); opacity: 1; } 55% { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 1; } 100% { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 0; } }
@keyframes kamRing { from { transform: scale(0.6); opacity: 1; } to { transform: scale(9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kam-blende { display: none; } }

/* ================= v5.3 ================= */
.kachel b.zahl { position: static; display: block; min-width: 0; height: auto; padding: 0; background: none; border-radius: 0; color: var(--gold); font-size: 34px; font-weight: 850; line-height: 1.05; letter-spacing: -0.03em; }
.wohnort-treffer { display: flex; flex-direction: column; margin-top: 6px; border-radius: 14px; overflow: hidden; background: var(--flaeche2); }
.wohnort-treffer:empty { display: none; }
.wohnort-z { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; text-align: left; color: var(--text); background: none; font-size: 15px; }
.wohnort-z + .wohnort-z { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.wohnort-z .ic { color: var(--gold); }
.wohnort-z small { color: var(--leise); font-weight: 400; }
/* Erfolge: feinere Symbole, gleiche Linienstärke wie bei den Getränken */
.ring .r-ic { width: 64%; height: 64%; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.03); }
.ring .r-ic svg { stroke-width: 1.7; }
.ring.angefangen .r-ic { color: var(--f); opacity: 0.75; background: color-mix(in srgb, var(--f) 10%, transparent); }
.ring.fertig .r-ic { opacity: 1; background: color-mix(in srgb, var(--f) 18%, transparent); }
.erfolg.tipp .ring { animation: erfTipp 0.38s cubic-bezier(0.3, 1.7, 0.5, 1); }
.erfolg.tipp .r-ic { animation: erfWackel 0.38s ease; }
@keyframes erfTipp { 0% { transform: scale(1); } 35% { transform: scale(0.86); } 100% { transform: scale(1); } }
@keyframes erfWackel { 30% { transform: rotate(-12deg) scale(1.15); } 65% { transform: rotate(8deg); } 100% { transform: none; } }
.erf-auf .ring { animation: plopp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* ================= v5.4 ================= */
/* Post über der Karte */
.karte-post { position: absolute; inset: 10px 22px 10px; z-index: 700; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; pointer-events: none; }
.karte-post-innen { width: 100%; max-width: 460px; pointer-events: auto; border-radius: calc(var(--radius) + 4px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 197, 49, 0.12), 0 0 40px rgba(255, 197, 49, 0.08); animation: kpAuf 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both; transform-origin: 50% 40%; }
.karte-post-innen .post { margin: 0; animation: none; }
.karte-post-innen.lade-k { background: var(--flaeche); padding: 40px 0; display: flex; justify-content: center; }
.karte-post.zu .karte-post-innen { animation: kpZu 0.22s ease-in forwards; }
@keyframes kpAuf { from { opacity: 0; transform: scale(0.82) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes kpZu { to { opacity: 0; transform: scale(0.88) translateY(10px); } }
.karte-post-x { color: #ff4d4d; background: rgba(255, 77, 77, 0.12); margin-left: 2px; }
.karte-post-x .ic { stroke-width: 2.6; }
/* Kein Browser-Menü bei langem Drücken */
body { -webkit-touch-callout: none; }
img, a, button, .doppel, .nav { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
img { pointer-events: auto; }
input, textarea, .kom-text, .post-text, .blase { -webkit-user-select: text; user-select: text; }
.karte-post { overflow: hidden; }
.karte-post-innen { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ================= v5.5 ================= */
.drink-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.drink-kacheln .dk { flex-direction: column; align-items: flex-start; gap: 8px; }
.pins-eigen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: visible; }
.pins-eigen > a, .pin-plus { aspect-ratio: 3 / 4; width: auto; height: auto; }
.pin-plus { display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(255, 255, 255, 0.22); border-radius: 16px; background: rgba(255, 255, 255, 0.02); color: #8f8b80; transition: transform 0.15s, border-color 0.15s; }
.pin-plus:active { transform: scale(0.95); border-color: var(--gold); color: var(--gold); }
.pin-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.pin-wahl button { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; padding: 0; background: var(--flaeche2); }
.pin-wahl button > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.pin-wahl .pk { position: absolute; left: 6px; top: 6px; width: 34%; border-radius: 8px; border: 1.5px solid #000; }
.pin-wahl .pd { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.agb-karte { border-color: rgba(255, 197, 49, 0.4); }
.agb-karte b { display: flex; align-items: center; gap: 8px; color: var(--gold); }

/* ================= v5.8 ================= */
/* Erinnerungen */
.er-tabs { position: sticky; top: calc(62px + var(--safe-t)); z-index: 15; display: flex; justify-content: center; gap: 4px; margin: 0 auto 6px; padding: 4px; width: max-content; border-radius: 999px; background: rgba(28, 28, 33, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.er-tabs a { padding: 8px 18px; border-radius: 999px; color: var(--leise); font-weight: 700; font-size: 14.5px; transition: background 0.2s, color 0.2s; }
.er-tabs a.an { background: #3a3a42; color: var(--text); }
.er-inhalt { padding-bottom: 110px; }
.er-monat h3, .k-monat h3 { margin: 22px 2px 10px; font-size: 19px; }
.er-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.er-kachel { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--flaeche2); animation: einblenden 0.35s ease-out both; animation-delay: calc(var(--i) * 25ms); }
.er-kachel > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.er-mini { position: absolute; left: 6%; top: 5%; width: 34%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1.5px solid #000; }
.er-kachel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); pointer-events: none; }
.er-kachel:active { transform: scale(0.95); }
.er-switch { position: fixed; left: 16px; bottom: calc(var(--nav-h) + var(--safe-b) + 14px); z-index: 30; display: flex; gap: 4px; padding: 8px 12px; border-radius: 999px; background: rgba(28, 28, 33, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.er-switch span { width: 18px; height: 24px; border-radius: 5px; border: 2px solid #8a8780; transition: all 0.25s; }
.er-switch .er-sw-a { background: #fff; border-color: #fff; }
.er-switch.an .er-sw-a { background: none; border-color: #8a8780; }
.er-switch.an .er-sw-b { background: #fff; border-color: #fff; }
/* Kalender */
.k-wt, .k-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.k-wt span { font-size: 12px; font-weight: 700; color: var(--leise); padding: 4px 0; }
.k-tag { position: relative; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: none; color: var(--text); padding: 0; }
.k-tag b { position: relative; font-size: 15px; font-weight: 750; }
.k-tag.mit { overflow: visible; animation: einblenden 0.3s ease-out both; }
.k-tag.mit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; filter: brightness(0.78); }
.k-tag.mit b { color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7); }
.k-tag.serie b { color: #ff9a3d; }
.k-tag.heute { box-shadow: inset 0 0 0 2px #fff; }
.k-tag.mit.heute img { outline: 2px solid #fff; outline-offset: 0; }
.k-tag.mit:active { transform: scale(0.92); }
.k-flamme { position: absolute; left: -6px; top: -7px; width: 22px; height: 22px; border-radius: 50%; background: #1c1c21; color: #ff7a2e; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.k-flamme .ic { fill: #ff7a2e; }
.k-anzahl { position: absolute; right: -6px; top: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: #000; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.er-blatt .tag-liste-er { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tag-post { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; background: var(--flaeche2); color: var(--text); animation: einblenden 0.3s ease-out both; animation-delay: calc(var(--i) * 60ms); }
.tag-bild { position: relative; width: 64px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; flex: none; }
.tag-bild > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.tag-post .mitte { flex: 1; display: flex; flex-direction: column; }
.tag-post small { color: var(--leise); }
/* Abgelaufene Posts: nur ansehen */
.post.abgelaufen .post-fuss button, .post.abgelaufen .mein-g { pointer-events: none; opacity: 0.55; }
.abgelaufen-hinweis { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; color: var(--leise); font-size: 13.5px; }
/* Pins lösen */
.pins-eigen a { position: relative; }
.pin-weg { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; display: flex; align-items: center; justify-content: center; }
.pin-weg .ic { margin: auto; }
/* Konto löschen */
.loeschen-seite { padding: calc(10px + var(--safe-t)) 18px calc(30px + var(--safe-b)); max-width: 520px; margin: 0 auto; text-align: center; }
.loesch-kopf { display: flex; justify-content: space-between; }
.loeschen-seite h2 { margin: 6px 0 6px; font-size: 26px; }
.loeschen-seite .g-titel, .loeschen-seite .feld { text-align: left; }
.loesch-smiley { width: 110px; margin: 0 auto 4px; animation: plopp 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.loesch-smiley svg { display: block; width: 100%; height: auto; }
.loesch-smiley .s-traene { opacity: 0; }
.loesch-smiley.weint { animation: schluchzen 0.5s ease-in-out infinite; }
.loesch-smiley.weint .s-traene { animation: traene 1s ease-in infinite; }
.loesch-smiley.weint .t2 { animation-delay: 0.45s; }
.loesch-smiley.weint .s-mund { d: path("M42 90 Q60 70 78 90"); }
@keyframes traene { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px); } }
@keyframes schluchzen { 50% { transform: translateY(2px) scale(1.02, 0.98); } }
.gruende { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin: 4px 0 14px; }
.grund-chip input { position: absolute; opacity: 0; pointer-events: none; }
.grund-chip span { display: inline-block; padding: 9px 14px; border-radius: 999px; background: var(--flaeche2); border: 1px solid var(--rand); font-size: 14px; transition: all 0.15s; cursor: pointer; }
.grund-chip input:checked + span { background: rgba(255, 90, 80, 0.14); border-color: #ff5d5d; color: #ffb0a8; }
.loesch-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.rot-voll { background: #e5383b; color: #fff; }
.rot-voll:disabled { opacity: 0.5; }
.loeschen-seite.zerfallen > * { animation: zerfallen 0.9s cubic-bezier(0.55, 0, 0.8, 0.4) var(--d) forwards; }
@keyframes zerfallen { 0% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; transform: translate(var(--x), 140px) rotate(var(--r)) scale(0.7); filter: blur(6px); } }
/* Posten: größeres Bild, Beschreibung als Pille */
.p5-bild { max-width: none; width: min(80vw, 380px); }
.p5-text { display: block; width: auto; max-width: 88%; margin: 6px auto 14px; padding: 10px 18px; border-radius: 999px; background: var(--flaeche2); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 14.5px; field-sizing: content; min-width: 230px; }
.p5-text:focus { border-color: rgba(255, 197, 49, 0.45); }
.gruende { justify-content: center; }

/* ================= v5.9 ================= */
.doppel .tau { display: none; }
/* Posten: Bild deutlich größer */
.p5-bild { width: min(92vw, 460px, calc((100dvh - 300px) * 0.75)); width: min(92vw, 460px, calc((100vh - 300px) * 0.75)); min-width: min(72vw, 300px); }
@supports (height: 100dvh) { .p5-bild { width: min(92vw, 460px, calc((100dvh - 300px) * 0.75)); } }
.p5-innen { padding-left: 8px; padding-right: 8px; }
.p5-text { margin: 2px auto 10px; }
.p5-gew { margin-top: 10px; }
/* Tagesvorschau Getränk */
.tag-g { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 600; color: var(--text) !important; }
/* Mitteilungen wischen */
.mz-liste { padding: 0; overflow: hidden; }
.mz { position: relative; overflow: hidden; touch-action: pan-y; transition: height 0.32s ease, opacity 0.32s ease; }
.mz + .mz { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mz-innen { position: relative; z-index: 1; background: var(--flaeche); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: transform; }
.mz-innen > .zeile { padding: 12px 14px; }
.mz-innen > .zeile + .zeile { border: 0; }
.mz.zieht .mz-innen { transition: none; }
.mz-hg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 22px; opacity: 0; transition: opacity 0.15s, transform 0.2s; }
.mz-hg.links { left: 0; right: 50%; background: linear-gradient(90deg, #2f6fe0, rgba(47, 111, 224, 0.2)); color: #fff; }
.mz-hg.rechts { right: 0; left: 50%; justify-content: flex-end; background: linear-gradient(270deg, #e5383b, rgba(229, 56, 59, 0.25)); color: #fff; }
.mz.links-an .mz-hg.rechts, .mz.rechts-an .mz-hg.links { opacity: 1; }
.mz.links-an .mz-hg.rechts { left: 0; }
.mz.rechts-an .mz-hg.links { right: 0; }
.mz.bereit .mz-hg .ic { transform: scale(1.3); }
.mz-hg .ic { transition: transform 0.2s cubic-bezier(0.2, 1.6, 0.4, 1); }
.mz.zu { height: 0 !important; opacity: 0; }
.mz.ist-neu .mz-innen::before { content: ""; position: absolute; left: 5px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--gold); }
.wisch-tipp { text-align: center; margin: -2px 0 10px; transition: opacity 0.3s; }
.wisch-tipp.weg { opacity: 0; }
.alle-weg-zeile { display: flex; justify-content: center; margin: 4px 0 10px; }
.alle-weg { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: rgba(229, 56, 59, 0.12); border: 1px solid rgba(229, 56, 59, 0.45); color: #ff8a80; font-weight: 700; font-size: 14.5px; transition: transform 0.2s; position: relative; z-index: 5; }
.alle-weg:active { transform: scale(0.94); }
.alle-weg.saugt { animation: sogPuls 0.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(229, 56, 59, 0.5); }
.alle-weg.fertig { animation: sogSchluck 0.28s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes sogPuls { 50% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(229, 56, 59, 0.12); } }
@keyframes sogSchluck { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.mz.gesogen { animation: gesogen 0.55s cubic-bezier(0.6, 0, 0.9, 0.5) var(--sd) forwards; z-index: 4; overflow: visible; }
@keyframes gesogen { 0% { transform: none; opacity: 1; filter: blur(0); } 60% { opacity: 0.9; } 100% { transform: translate(var(--sx), var(--sy)) scale(0.05) rotate(8deg); opacity: 0; filter: blur(2px); } }
.mz-liste:has(.gesogen) { overflow: visible; background: transparent; border-color: transparent; transition: background 0.4s; }
.einblenden { animation: einblenden 0.35s ease-out both; }

/* ================= v6.0 ================= */
/* Kein Text markieren / kopieren (außer in Eingabefeldern) */
html, body, #app, .blatt { -webkit-user-select: none; user-select: none; }
.kom-text, .post-text, .blase { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
/* Posten: Foto wirklich groß */
.posten .p5-bild .doppel, .p5-bild .doppel { width: 100%; margin: 0; }
.p5-bild { width: min(94vw, 480px, calc((100dvh - 290px) * 0.75)); min-width: min(80vw, 320px); }
/* Post-Feier */
.prost-gross { text-align: center; padding: 0 24px; }
.prost-gross b { font-size: 26px; max-width: 92vw; line-height: 1.25; display: flex; flex-direction: column; align-items: center; }
.prost-gross b > span { display: inline; }
.prost-gross b small { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--leise); }
.nix-feier .nix-e { color: #ff9b7a; animation: nixWackel 1.1s ease-in-out; }
.nix-feier .nix-e .ic { stroke-width: 1.6; }
@keyframes nixWackel { 0% { transform: scale(0.3) rotate(0); opacity: 0; } 35% { transform: scale(1.15) rotate(-10deg); opacity: 1; } 55% { transform: scale(1) rotate(8deg); } 75% { transform: rotate(-5deg); } 100% { transform: none; } }
/* Erfolge-Kopf */
.erf-v-kopf { justify-content: space-between; }
.erf-v-titel { display: inline-flex; align-items: baseline; gap: 10px; }
.erf-v-zahl { font-size: 13px; font-weight: 700; color: var(--gold); background: rgba(255, 197, 49, 0.12); padding: 2px 9px; border-radius: 999px; }
/* Erinnerungen: Reiter nicht über dem Inhalt, kein unnötiges Scrollen */
.er-tabs { position: static; margin: 0 auto 4px; }
.er-inhalt { padding-bottom: 20px; }
.er-inhalt .er-monat:last-child { margin-bottom: 70px; }
.er-monat h3:first-child, .k-monat:first-child h3 { margin-top: 10px; }
/* Glocke klingelt */
.glocke { overflow: visible; }
.glocke.klingelt { animation: glockePop 0.5s cubic-bezier(0.3, 1.8, 0.5, 1); color: var(--gold); background: rgba(255, 197, 49, 0.16); box-shadow: 0 0 18px rgba(255, 197, 49, 0.45); transition: background 0.3s, box-shadow 0.3s, color 0.3s; }
.glocke.klingelt .ic { animation: glockeSchwing 0.9s ease-in-out; transform-origin: 50% 10%; }
@keyframes glockePop { 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes glockeSchwing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(22deg); } 30% { transform: rotate(-18deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
.g-welle { position: absolute; top: 50%; width: 10px; height: 18px; margin-top: -9px; border: 2px solid var(--gold); border-color: transparent var(--gold) transparent transparent; border-radius: 50%; opacity: 0; pointer-events: none; }
.g-welle.l { left: -6px; transform: scaleX(-1); }
.g-welle.r { right: -6px; }
.g-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.glocke.klingelt .g-welle { animation: welle 0.9s ease-out 2; }
.glocke.klingelt .g-welle.l { animation-name: welleL; }
.glocke.klingelt .g-ring { animation: gRing 0.8s ease-out; }
@keyframes welle { 0% { opacity: 0; transform: translateX(0) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(8px) scale(1.2); } }
@keyframes welleL { 0% { opacity: 0; transform: scaleX(-1) translateX(0) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleX(-1) translateX(8px) scale(1.2); } }
@keyframes gRing { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
/* Reaktionen-Blatt */
.reak-tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.reak-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 14px; background: var(--flaeche2); color: var(--leise); border: 1px solid transparent; transition: all 0.2s; }
.reak-tab.an { color: var(--gold); border-color: rgba(255, 197, 49, 0.5); background: rgba(255, 197, 49, 0.1); }
.reak-tab[data-r="herz"].an { color: #ff5f7e; border-color: rgba(255, 95, 126, 0.5); background: rgba(255, 95, 126, 0.1); }
.reak-tab b { color: var(--text); }
.reak-liste { max-height: 55vh; overflow-y: auto; }
.reak-z { animation: einblenden 0.3s ease-out both; animation-delay: calc(var(--i) * 35ms); color: inherit; }
.reak-ic { color: var(--gold); display: flex; }
.reak-leer { text-align: center; padding: 20px 0; }
/* Alle löschen: Pillen bleiben Pillen, ein einziges Aufspringen */
.alle-weg.saugt { animation: sogEinmal 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes sogEinmal { 0% { transform: scale(1); } 35% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(229, 56, 59, 0.15); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 56, 59, 0); } }
.mz-liste.saugt-liste { background: transparent; border-color: transparent; overflow: visible; display: flex; flex-direction: column; gap: 6px; }
.mz-liste.saugt-liste .mz { border: 0; border-radius: 999px; overflow: hidden; background: var(--flaeche); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: none; }
.mz-liste.saugt-liste .mz-innen { border-radius: 999px; }
.mz.gesogen { animation: gesogenPille 0.6s cubic-bezier(0.55, 0, 0.85, 0.4) var(--sd) forwards; }
@keyframes gesogenPille { 0% { transform: none; opacity: 1; } 35% { transform: scale(0.92, 0.7); opacity: 1; } 100% { transform: translate(var(--sx), var(--sy)) scale(0.08, 0.06); opacity: 0; } }
/* Kamera-Öffnen: mehr Wucht */
.kam-blende { background: radial-gradient(circle at var(--x) var(--y), #ffd45a 0, #ffb01f 12%, #1a1200 34%, #000 60%); animation: blende2 0.55s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes blende2 { 0% { clip-path: circle(0 at var(--x) var(--y)); opacity: 1; } 50% { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 1; } 100% { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 0; } }
.kam-ring { border-width: 4px; box-shadow: 0 0 30px rgba(255, 197, 49, 0.7); animation: kamRing 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.nav .ausloeser:active { transform: scale(0.88); }

/* ================= v6.1 ================= */
/* Post-Leiste: gleiche Farben, gleichmäßige Abstände */
.post-fuss { justify-content: space-between; gap: 4px; }
.post-fuss .reak, .post-fuss .teilen-knopf { color: var(--leise); background: none; width: auto; height: auto; padding: 7px 10px; }
.post-fuss .teilen-knopf .ic { margin: 0; }
/* Reaktionen: gleiche Höhe, beim Scrollen ganz hoch */
.reak-blatt { height: 56vh; max-height: 56vh; display: flex; flex-direction: column; transition: height 0.3s ease, max-height 0.3s ease; overflow: hidden; }
.reak-blatt.voll { height: 92vh; max-height: 92vh; }
.reak-blatt #reakInhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.reak-blatt .reak-liste { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
/* Senden-Blatt */
.send-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; margin-top: 10px; max-height: 50vh; overflow-y: auto; padding: 4px 2px 8px; }
.send-z { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; color: var(--text); font-size: 12.5px; animation: einblenden 0.3s ease-out both; animation-delay: calc(var(--i) * 25ms); }
.send-ava { position: relative; border-radius: 50%; transition: transform 0.2s; }
.send-ava .avatar { width: 58px; height: 58px; }
.send-haken { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 197, 49, 0.88); color: #1a1300; display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
.send-haken .ic { width: 26px; height: 26px; stroke-width: 3; }
.send-z.sendet .send-ava { transform: scale(0.88); opacity: 0.7; }
.send-z.ok .send-haken { transform: scale(1); }
.send-z.ok .send-ava { animation: plopp 0.4s ease-out; }
/* Posten: alles auf einen Bildschirm, nichts scrollt, Bild so groß wie möglich */
.posten.p5 { position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.p5 .p5-kopf { flex: none; }
.p5 .p5-innen { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding-bottom: 4px; }
.p5 .p5-text { flex: none; }
.p5 .p5-bild { flex: 1; min-height: 120px; width: 100%; min-width: 0; max-width: 480px; display: flex; justify-content: center; align-items: center; }
.p5 .p5-bild .doppel { height: 100%; width: auto; max-width: 100%; aspect-ratio: 3 / 4; }
.p5 .p5-gew { flex: none; margin: 8px 0 0; }
.p5 .p5-fuss { flex: none; padding-top: 6px; padding-bottom: calc(8px + var(--safe-b)); }
.p5 .p5-leiste { margin-bottom: 8px; }
.p5 .p5-hinweis { margin-top: 6px; }
.p5 .p5-ki, .p5 .wahl { flex: none; }
/* Kamera öffnen: sprudelnde gelbe Formen, sofort, Kamera direkt darunter sichtbar */
.kam-blende { background: none; clip-path: none; animation: none; }
.kam-kreis { position: absolute; left: var(--x); top: var(--y); width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 80, 0.95), rgba(255, 176, 31, 0.6) 55%, rgba(255, 176, 31, 0)); animation: kamKreis 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes kamKreis { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(22); opacity: 0; } }
.kam-blende i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: #ffc531; box-shadow: 0 0 12px rgba(255, 197, 49, 0.7); animation: sprudel 0.5s cubic-bezier(0.15, 0.8, 0.3, 1) var(--d) forwards; opacity: 0; }
.kam-blende i:nth-child(3n) { background: #ffe08a; }
.kam-blende i:nth-child(4n) { background: #ff9f1c; border-radius: 40% 60% 55% 45%; }
@keyframes sprudel { 0% { transform: translate(0, 0) scale(0.2); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; } }

/* ================= v6.2 ================= */
/* Blättern zwischen Posts: Pfeile neben dem Post */
.post-blaettern { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 4px; margin: 0 -8px; }
.blaetter-mitte { min-width: 0; }
.blaetter-mitte .post { touch-action: pan-y; will-change: transform; }
.blaetter-pfeil { width: 34px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: none; color: var(--leise); transition: transform 0.15s, color 0.15s, background 0.15s; }
.blaetter-pfeil:active { transform: scale(0.85); color: var(--text); background: rgba(255, 255, 255, 0.06); }
.blaetter-pfeil .ic { margin: 0; }
.blaetter-platz { width: 34px; }
.post.rein-rechts { animation: reinRechts 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.post.rein-links { animation: reinLinks 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes reinRechts { from { opacity: 0; transform: translateX(40%); } to { opacity: 1; transform: none; } }
@keyframes reinLinks { from { opacity: 0; transform: translateX(-40%); } to { opacity: 1; transform: none; } }
.post.wackeln { animation: postWackeln 0.35s ease; }
@keyframes postWackeln { 25% { transform: translateX(-8px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
/* Kamera & Standort */
.rechte-tipp b { display: flex; align-items: center; gap: 8px; color: var(--gold); }
.rechte-tipp p { margin: 8px 0 0; font-size: 14px; color: var(--leise); line-height: 1.5; }
.rechte-tipp p b { display: inline; color: var(--text); }
.versteckt { display: none !important; }
/* Leiste unter dem Post passt immer in die Karte */
.post-fuss > * { flex: 0 1 auto; min-width: 0; }
.blaetter-mitte .post { padding: 10px; }
.blaetter-mitte .post-fuss { gap: 0; }
.blaetter-mitte .post-fuss .reak, .blaetter-mitte .post-fuss .teilen-knopf { padding: 7px 6px; }
.blaetter-mitte .post-fuss .prost { padding-left: 10px; padding-right: 12px; }
@media (max-width: 380px) { .post-fuss .reak, .post-fuss .teilen-knopf { padding: 7px 6px; } }