/* ============================================================
   RWE-PORTAL - iOS-STIL (November 2026)
   Glocke / Nachrichten-Vorschau / Alle Benachrichtigungen / Profil-Einstellungen.
   Reine Optik-Ueberschreibung (Frosted Glass, Squircle-Icons, Inset-Listen,
   Ungelesen-Punkt, iOS-Schalter). Keine Logik - alles funktioniert wie vorher.
   ============================================================ */
:root { --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif; --ios-gruen: #34c759; --ios-grau: #8e8e93; --ios-linie: rgba(60,60,67,.16); --ios-bg: #f2f2f7; }

/* ---------- Glocke + Nachrichten-Panel ---------- */
html body .glocke-panel {
    font-family: var(--ios-font);
    background: rgba(250,250,252,.84);
    -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
    border: .5px solid rgba(255,255,255,.7);
    border-radius: 22px;
    margin-top: 6px;
    box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 2px 10px rgba(0,0,0,.08);
    max-height: min(74vh, 560px);
    overscroll-behavior: contain;
}
html body .glocke-panel .such-panel-inner { padding: 14px 12px 10px; }
html body .glocke-kopf-row { padding: 2px 6px 10px; align-items: baseline; color: #111; }
html body .glocke-kopf-row strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
html body .glocke-alle-gelesen-btn { color: #a70909; font-size: 14px; font-weight: 600; padding: 6px 8px; border-radius: 10px; }
html body .glocke-alle-gelesen-btn:hover { text-decoration: none; background: rgba(167,9,9,.08); }
html body .glocke-alle-gelesen-btn:active { background: rgba(167,9,9,.16); }

/* Eintraege = eine abgerundete Inset-Liste mit Haarlinien */
html body .glocke-panel .such-results, html body .ba-liste {
    background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0,0,0,.06);
}
html body .glocke-item {
    position: relative; padding: 11px 12px 11px 24px; border-radius: 0; gap: 11px; align-items: center;
    -webkit-tap-highlight-color: transparent; transition: background .12s ease;
}
html body .glocke-item + .glocke-item, html body .glocke-item-zeile + .glocke-item-zeile, html body .glocke-item-zeile + .glocke-item, html body .glocke-item + .glocke-item-zeile { border-top: .5px solid var(--ios-linie); }
html body .glocke-item:hover { background: rgba(0,0,0,.035); }
html body .glocke-item:active { background: rgba(0,0,0,.08); }
html body .glocke-item.ungelesen { background: #fff; }
/* iOS-Ungelesen-Punkt statt rosa Hintergrund */
html body .glocke-item.ungelesen::before {
    content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
    border-radius: 50%; background: #0a84ff; box-shadow: 0 0 0 3px rgba(10,132,255,.15);
}
html body .glocke-item.ungelesen .glocke-item-text { font-weight: 600; color: #000 !important; }
html body .glocke-item-text { font-size: 14px; line-height: 1.38; color: #3a3a3c !important; }
html body .glocke-item-zeit { font-size: 12px; color: var(--ios-grau); margin-top: 3px; }
/* App-Icon-Optik: Squircle statt Kreis */
html body .glocke-item-icon { width: 40px; height: 40px; border-radius: 10px; margin-top: 0; box-shadow: 0 0 0 .5px rgba(0,0,0,.14); }
html body .glocke-item-icon.mit-avatar { border-radius: 50%; }
html body .glocke-item-icon.mit-avatar img:not(.glocke-item-thema-badge) { border-radius: 50%; }
html body .glocke-item-icon.mit-bild { border-radius: 10px; }
html body .glocke-item-icon.mit-doppel { box-shadow: none; }
html body .glocke-item-icon.mit-doppel img { width: 36px; height: 36px; }
html body .glocke-item-thema-badge { width: 18px; height: 18px; bottom: -4px; right: -4px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
html body .glocke-item-gelesen-btn, html body .glocke-item-loeschen { color: #c7c7cc; padding: 10px; border-radius: 50%; }
html body .glocke-item-gelesen-btn:hover { color: #248a3d; background: rgba(52,199,89,.14); }
html body .glocke-item-loeschen:hover { color: #ff3b30; background: rgba(255,59,48,.12); }
html body .glocke-leer { padding: 34px 10px; color: var(--ios-grau); font-size: 15px; }
html body .glocke-leer i { font-size: 34px; color: var(--ios-gruen); opacity: .85; margin-bottom: 10px; }
html body .glocke-alle-anzeigen-link {
    border-top: 0; margin-top: 10px; padding: 12px 8px; background: #fff; border-radius: 14px;
    font-size: 15px; font-weight: 600; color: #a70909 !important; box-shadow: 0 0 0 .5px rgba(0,0,0,.06);
}
html body .glocke-alle-anzeigen-link:hover { text-decoration: none !important; background: #f7f7f9; }
/* Badge an der Glocke: iOS-rot */
html body .glocke-badge { background: #ff3b30; color: #fff; box-shadow: 0 0 0 2px #fff; font-weight: 700; }

@media (max-width: 640px) {
    html body .glocke-panel { width: calc(100vw - 16px); max-width: none; border-radius: 20px; max-height: 78vh; max-height: 78dvh; }
    html body .glocke-kopf-row strong { font-size: 24px; }
}
@media (prefers-color-scheme: dark) { /* Panel bleibt hell: Portal hat kein Dunkel-Design */ }

/* ---------- Profil-Einstellungen ---------- */
html body .profil-seite, html body .profil-wrapper { font-family: var(--ios-font); }
html body .profil-card { border: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06); font-family: var(--ios-font); }
html body .profil-tabs { border-right: 0; gap: 0; background: #fff; border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0,0,0,.08); flex: 0 0 230px; align-self: flex-start; }
html body .profil-tab-link { border-radius: 0; padding: .85rem 1rem; font-weight: 500; font-size: .95rem; color: #1c1c1e; }
html body .profil-tab-link + .profil-tab-link { border-top: .5px solid var(--ios-linie); }
html body .profil-tab-link i {
    width: 29px; height: 29px; line-height: 29px; border-radius: 7px; color: #fff; font-size: .82rem; background: #a70909;
}
html body .profil-tab-link:nth-child(2) i { background: #8e8e93; }
html body .profil-tab-link:nth-child(3) i { background: #ff3b30; }
html body .profil-tab-link:nth-child(4) i { background: #0a84ff; }
html body .profil-tab-link:nth-child(5) i { background: #34c759; }
html body .profil-tab-link:hover { background: rgba(0,0,0,.03); color: #1c1c1e; }
html body .profil-tab-link.aktiv { background: rgba(167,9,9,.08); color: #a70909; font-weight: 700; }
html body .profil-tab-link::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .68rem; color: #c7c7cc; margin-left: auto; }
html body .profil-tab-link .profil-tab-badge { margin-left: auto; margin-right: .4rem; background: #ff3b30; }
html body .profil-tab-link:has(.profil-tab-badge)::after { margin-left: 0; }
@media (max-width: 768px) {
    html body .profil-tabs { flex: none; width: 100%; border-bottom: 0; margin-bottom: 1rem; padding-bottom: 0; }
    html body .profil-tab-link { font-size: .95rem; padding: .8rem 1rem; }
}
/* Abschnittstitel wie iOS-Gruppenkopf */
html body .section-title {
    font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ios-grau);
    border-bottom: 0; padding: 0 .3rem; margin: 1.6rem 0 .5rem;
}
html body .section-title i { color: var(--ios-grau); }
/* Einstellungs-Gruppen */
html body .push-einstellungen { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.07); padding: .35rem 1rem; }
html body .push-status-zeile { padding: .55rem 0; }
html body .push-sektion { border-top: .5px solid var(--ios-linie); margin-top: 0; padding-top: 0; }
html body .push-sektion summary { padding: .75rem 0; font-weight: 600; }
html body .push-sektion-inhalt { gap: 0; padding: 0 0 .4rem; }
html body .push-toggle-zeile {
    background: transparent; border: 0; border-radius: 0; padding: .7rem 0; font-size: .95rem; color: #1c1c1e; min-height: 44px;
}
html body .push-sektion-inhalt .push-toggle-zeile + .push-toggle-zeile { border-top: .5px solid var(--ios-linie); }
html body .push-toggle-zeile:hover { background: transparent; }
html body .push-toggle-zeile i { color: #a70909; }
/* iOS-Schalter 51x31 */
html body .push-switch { width: 51px; height: 31px; }
html body .push-switch-slider { background: #e9e9ea; border-radius: 31px; transition: background .25s ease; }
html body .push-switch-slider::before {
    width: 27px; height: 27px; left: 2px; top: 2px; background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16), 0 3px 1px rgba(0,0,0,.1);
    transition: transform .25s cubic-bezier(.3,1.3,.5,1);
}
html body .push-switch input:checked + .push-switch-slider { background: var(--ios-gruen); }
html body .push-switch input:checked + .push-switch-slider::before { transform: translateX(20px); }
html body .push-switch input:focus-visible + .push-switch-slider { outline: 3px solid rgba(10,132,255,.5); outline-offset: 2px; }
/* Buttons */
html body .btn-profil { border-radius: 12px; font-weight: 600; font-family: var(--ios-font); }
html body .btn-profil:active { transform: scale(.97); }
html body .avatar-upload-form { border: 0; border-radius: 16px; box-shadow: 0 0 0 .5px rgba(0,0,0,.07); }
@media (prefers-reduced-motion: reduce) { html body .push-switch-slider, html body .push-switch-slider::before { transition: none; } }

/* Seite "Alle Benachrichtigungen" (benachrichtigungen.php) */
html body .ba-liste .glocke-item { border-radius: 0; padding: 11px 12px 11px 24px; }
html body .ba-liste .glocke-item-zeile { border-bottom: 0; }
html body .ba-liste .glocke-item-zeile + .glocke-item-zeile { border-top: .5px solid var(--ios-linie); }
html body .ba-liste .glocke-item-zeile .glocke-item { border-top: 0; }
html body .glocke-item-zeile { align-items: center; }
html body .ba-card { padding: 0; border-radius: 16px; box-shadow: 0 0 0 .5px rgba(0,0,0,.07); }
html body .ba-liste { box-shadow: none; border-radius: 16px; }
html body .ba-aktion-btn { border-radius: 12px; font-weight: 600; }

/* Seite /benachrichtigungen: iOS-Grosstitel statt dunklem Banner */
html body .ba-page { font-family: var(--ios-font); max-width: 680px; }
html body .ba-back { color: #a70909 !important; font-weight: 500; font-size: 1rem; }
html body .ba-hero { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 2px 10px; margin-bottom: 8px; border-radius: 0; }
html body .ba-hero-glow { display: none; }
html body .ba-hero-icon { width: 46px; height: 46px; border-radius: 11px; background: linear-gradient(145deg, #d11a1a, #a70909); box-shadow: 0 4px 12px rgba(167,9,9,.35); }
html body .ba-hero-text h1 { color: #000; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
html body .ba-hero-text p { color: var(--ios-grau); font-size: .95rem; }
html body .ba-toolbar { gap: 10px; }
html body .ba-aktion-btn { background: #fff; border: 0; color: #a70909; box-shadow: 0 0 0 .5px rgba(0,0,0,.07); padding: 13px 12px; font-size: .95rem; transition: background .12s, transform .12s; }
html body .ba-aktion-btn:hover { background: #f7f7f9; color: #a70909; border: 0; }
html body .ba-aktion-btn:active { transform: scale(.98); background: #efeff4; }
html body .ba-aktion-btn.ba-loeschen-alle { color: #ff3b30; }
html body .ba-aktion-btn.ba-loeschen-alle:hover { background: #ff3b30; color: #fff; }

/* ---------- Suche (Header-Overlay) ---------- */
html body .such-panel {
    font-family: var(--ios-font); background: rgba(246,246,249,.88);
    -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
    border-radius: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.34), 0 0 0 .5px rgba(255,255,255,.6) inset;
}
html body .such-kopf { background: transparent; padding: 14px 14px 8px; }
html body .such-input-row { gap: 10px; }
/* iOS-Suchfeld: graue Pille, kein Rahmen */
html body .such-input {
    border: 0; background: rgba(118,118,128,.12); border-radius: 12px; padding: 11px 40px 11px 38px; font-size: 17px; color: #000;
    transition: background .15s, box-shadow .15s;
}
html body .such-input::placeholder { color: #8e8e93; }
html body .such-input:focus { background: rgba(118,118,128,.18); box-shadow: 0 0 0 3px rgba(167,9,9,.18); border: 0; }
html body .such-input-row i.fa-search { left: 13px; color: #8e8e93; font-size: 15px; }
html body .such-clear { right: 64px; background: rgba(118,118,128,.4); color: #fff; width: 20px; height: 20px; }
/* Schliessen = iOS-Textknopf */
html body .such-close-btn { background: transparent; color: #a70909; width: auto; min-width: 0; height: 40px; border-radius: 10px; padding: 0 6px; font-size: 17px; font-weight: 400; display: inline-flex; align-items: center; }
html body .such-close-btn:hover, html body .such-close-btn:active { background: rgba(167,9,9,.08); color: #a70909; }
html body .such-close-btn i { display: none; }
html body .such-close-btn .such-close-text { display: inline !important; }
/* Filter-Chips */
html body .such-chip { border: 0; background: rgba(118,118,128,.12); color: #1c1c1e; font-weight: 600; padding: 7px 13px; }
html body .such-chip i, html body .such-chip b { color: #8e8e93; }
html body .such-chip:hover { background: rgba(118,118,128,.2); }
html body .such-chip.aktiv { background: #a70909; color: #fff; }
/* Ergebnisse: Gruppen als Inset-Karten */
html body .such-results { padding: 2px 12px 14px; }
html body .such-gruppe { background: #fff; border-radius: 14px; margin: 0 0 12px; padding: 0 0 2px; box-shadow: 0 0 0 .5px rgba(0,0,0,.06); overflow: hidden; }
html body .such-gruppe-titel { font-size: 12px; font-weight: 600; color: #8e8e93; padding: 12px 14px 6px; }
html body .such-gruppe-titel i { color: #8e8e93; }
html body .such-gruppe-titel .such-mehr { color: #a70909; font-weight: 600; font-size: 13px; }
html body .such-item { border-radius: 0; padding: 9px 14px; gap: 12px; }
html body .such-item + .such-item { box-shadow: inset 0 .5px 0 var(--ios-linie); }
html body .such-item:hover { background: rgba(0,0,0,.035); }
html body .such-item.aktiv { background: rgba(167,9,9,.08); box-shadow: none; }
html body .such-tile { border-radius: 10px; background: #f2f2f7; box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }
html body .such-tile.rund { border-radius: 50%; }
html body .such-item-titel { color: #000 !important; font-weight: 600; font-size: 15.5px; }
html body .such-item-snippet { color: #6c6c70; }
html body .such-item-meta { color: #8e8e93; }
html body .such-badge { background: rgba(118,118,128,.14); color: #6c6c70; font-weight: 600; }
html body .such-item mark { background: rgba(255,204,0,.4); }
html body .such-alle-link { background: #a70909; border-radius: 12px; font-weight: 600; font-size: 16px; }
html body .such-hint, html body .such-loading { color: #8e8e93; }
html body .such-hint i { color: #c7c7cc; }
html body .such-schnell a { background: #fff; border-radius: 14px; color: #1c1c1e !important; font-weight: 600; box-shadow: 0 0 0 .5px rgba(0,0,0,.06); }
html body .such-zuletzt { color: #1c1c1e; }
html body .such-zuletzt:hover { background: rgba(0,0,0,.04); }
html body .such-fuss { background: transparent; border-top: .5px solid var(--ios-linie); color: #8e8e93; }
@media (max-width: 768px) {
    html body .such-panel { border-radius: 0; background: rgba(246,246,249,.96); }
    html body .such-griff { background: rgba(60,60,67,.3); }
    html body .such-close-btn { width: auto; min-width: 0; height: 44px; background: transparent; color: #a70909; border-radius: 10px; }
    html body .such-input { font-size: 17px; }   /* >=16px: kein Zoomen auf iOS */
}