/* ==========================================================================
   rtc_komponenten.css - das auf JEDER Seite gleiche Komponenten-CSS
   --------------------------------------------------------------------------
   Bis zum 12.09.2026 standen diese drei Bloecke als <style> in den Includes
   rw_nav.html, rw_consent.html und rw_js.html - Wort fuer Wort auf allen 24
   Vorlagen und bei jedem Aufruf neu uebertragen, weil ein Inline-Block sich
   nicht zwischenspeichern laesst (PF20, CSS-Haelfte). Hier liegen sie einmal
   und gelten ab der zweiten Seite als bekannt: rund 9,1 kB je Seite.

   Vier Dinge dabei nicht "verbessern":

   1. **Die Datei wird im <head> DIREKT NACH rtc.css eingebunden.** Beides ist
      Pflicht. Nach rtc.css, weil mehrere Regeln hier gleich spezifisch sind wie
      dort (.rw-nav-ctas, .rtc-wa-fab) und wie bisher gewinnen muessen. Im Kopf
      und nicht im Koerper, weil die Topbar und der WhatsApp-Knopf oberhalb der
      Falz stehen - als Verweis im Koerper blitzten sie einmal ungestylt auf.
   2. **Sie gehoert nicht in rtc.css.** Getrennt bleibt sichtbar, welcher Stil zu
      welcher Komponente gehoert; rtc.css wurde 2026 gerade erst von 125 auf
      62 KB halbiert (CLAUDE.md 2b) und soll nicht wieder zum Sammelbecken
      werden. Ein zweiter Abruf auf dieselbe Domain kostet ueber HTTP/2 nichts.
   3. **Das seitenspezifische Inline-CSS bleibt inline.** Es ist das kritische
      CSS der jeweiligen Seite; das Aufloesen laeuft als eigene Aufgabe B5-45.
   4. **Das CSS von rw_map.html bleibt ebenfalls dort.** Die Karte steht auf 2
      von 24 Seiten. Hier hinein gehoben laege sie auf 22 Seiten ohne Karte mit;
      als eigene Datei mit eigenem <link> waere sie eine Kopplung, an die sich
      jeder erinnern muesste, der die Karte auf einer dritten Seite einbaut.

   Reihenfolge unten = Reihenfolge im Dokument (Navigation, Consent, Reveals).
   Die Selektoren ueberschneiden sich nicht, die Reihenfolge ist also nur
   Lesehilfe - sie beim Aendern trotzdem lassen.
   ========================================================================== */


/* ==========================================================================
   1. Navigation - aus templates/components/rw_nav.html
   ========================================================================== */

/* -- Top Bar ---------------------------------------------------- */
.rtc-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 40px;
  z-index: 9001; background: #080808;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: none; align-items: center;
}
.rtc-topbar-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  gap: 16px;
}
.rtc-topbar-tagline {
  /* .38 ergab auf dem fast schwarzen Balken effektiv #666 und damit 3,5:1 -
     zu wenig fuer die geforderten 4,5:1. .55 kommt auf 6,3:1. */
  font-size: .72rem; color: rgba(255,255,255,.55);
  font-family: var(--rtc-font-head); white-space: nowrap;
  flex-shrink: 0;
}
.rtc-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rtc-topbar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 5px;
  font-size: .72rem; font-weight: 700; font-family: var(--rtc-font-head);
  text-decoration: none; transition: all .15s; white-space: nowrap; cursor: pointer;
}
.rtc-topbar-wa  { background: rgba(37,211,102,.14); color: #25d366; border: 1px solid rgba(37,211,102,.3); }
.rtc-topbar-wa:hover  { background: rgba(37,211,102,.25); color: #25d366; }
.rtc-topbar-phone { background: rgba(192,0,0,.12); color: #ffaaaa; border: 1px solid rgba(192,0,0,.3); }
.rtc-topbar-phone:hover { background: rgba(192,0,0,.22); color: #ffcccc; }
.rtc-topbar-form  { background: rgba(255,255,255,.06); color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.1); }
.rtc-topbar-form:hover  { background: rgba(255,255,255,.11); color: #fff; }

/* Desktop: top bar sichtbar, Nav nach unten schieben */
@media (min-width: 769px) {
  .rtc-topbar { display: flex; }
}

/* -- Floating WhatsApp FAB -------------------------------------- */
.rtc-wa-fab {
  position: fixed; right: 20px; bottom: 90px;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  z-index: 8990; text-decoration: none; transition: all .2s ease;
}
.rtc-wa-fab:hover { transform: scale(1.1); background: #1db954; color: #fff; }
@media (min-width: 769px) { .rtc-wa-fab { bottom: 28px; } }

/* -- Mobile WhatsApp-Button im Menue ---------------------------- */
.rtc-mobile-wa-btn {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 13px 16px; border-radius: 10px;
  background: rgba(37,211,102,.14); color: #25d366;
  border: 1px solid rgba(37,211,102,.35);
  font-family: var(--rtc-font-head); font-weight: 800; font-size: .92rem;
  text-decoration: none; transition: all .15s;
}
.rtc-mobile-wa-btn:hover { background: rgba(37,211,102,.25); color: #25d366; }

/* -- Nav CTA Buttons -------------------------------------------- */
.rw-nav-ctas { display: flex; align-items: center; gap: 10px; }

.rw-nav-cta--angebot {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 8px;
  background: rgba(192,0,0,0.15); color: #fff;
  font-weight: 700; font-size: 0.88rem; font-family: var(--rtc-font-head);
  transition: all 0.18s ease; white-space: nowrap; text-decoration: none;
  border: 2px solid rgba(192,0,0,0.5); letter-spacing: 0.2px;
}
.rw-nav-cta--angebot:hover, .rw-nav-cta--angebot.active {
  background: rgba(192,0,0,0.3); border-color: #C00000; color: #fff;
  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(192,0,0,0.25);
}

@media (max-width: 900px) {
  .rw-nav-ctas { gap: 8px; }
  .rw-nav-cta--angebot { font-size: .82rem; padding: 9px 14px; }
  .rw-nav-cta { font-size: .82rem; padding: 9px 14px; }
}
@media (max-width: 768px) { .rw-nav-ctas { display: none; } }


/* ==========================================================================
   2. Einwilligungs-Dialog - aus templates/components/rw_consent.html
   ========================================================================== */

/* Fixiert am unteren Rand: verschiebt kein Layout, kostet also kein CLS.
   Eingeblendet wird ausschliesslich ueber transform/opacity - alles andere
   zwingt den Browser, in jedem Bild neu zu zeichnen (siehe CLAUDE.md). */
.rtc-cc{position:fixed;left:0;right:0;bottom:0;z-index:9000;padding:14px;
  display:flex;justify-content:center;pointer-events:none}
.rtc-cc[hidden]{display:none}
/* .rw-page ist noetig: rtc.css setzt ".rw-page div{max-width:100%}", und
   das schlaegt ".rtc-cc-box" in der Spezifitaet (0,1,1 gegen 0,1,0).
   Ohne den Zusatz laeuft der Dialog auf Desktop ueber die volle Breite. */
/* min-width:0, weil die Box ein Flex-Kind ist und sonst min-width:auto
   traegt - sie koennte dann nicht unter die Breite ihres laengsten Inhalts
   schrumpfen. Vorsorge: ein gemessener Ueberlauf lag am 30.08.2026 nicht vor.
   Zusammen mit min(150px,100%) an den Schaltflaechen ist der Dialog damit
   auch auf sehr schmalen Geraeten sicher. */
.rw-page .rtc-cc-box{pointer-events:auto;width:100%;max-width:620px;min-width:0;
  background:var(--rtc-bg-card);border:1.5px solid var(--rtc-border);
  border-radius:var(--rtc-radius-lg);padding:22px 24px;
  box-shadow:0 2px 8px rgba(0,0,0,.4),0 18px 48px rgba(0,0,0,.55);
  transform:translateY(14px);opacity:0;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .26s ease}
.rtc-cc.rtc-cc-in .rtc-cc-box{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  .rtc-cc-box{transition:none;transform:none;opacity:1}
}

.rtc-cc-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.rtc-cc-icon{width:34px;height:34px;flex-shrink:0;border-radius:9px;
  background:rgba(192,0,0,.12);color:var(--rtc-primary-text);
  display:flex;align-items:center;justify-content:center}
.rtc-cc-icon svg{width:19px;height:19px}
.rtc-cc-title{font-family:var(--rtc-font-head);font-weight:800;
  font-size:1.02rem;color:var(--rtc-text);line-height:1.3;margin:0}
.rtc-cc-text{font-size:.85rem;line-height:1.65;color:var(--rtc-text-2);margin:0 0 16px}

/* Details */
.rtc-cc-details{border-top:1px solid var(--rtc-border);margin-bottom:16px}
.rtc-cc-details[hidden]{display:none}
.rtc-cc-cat{padding:14px 0;border-bottom:1px solid var(--rtc-border)}
.rtc-cc-cat:last-child{border-bottom:0;padding-bottom:4px}
.rtc-cc-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.rtc-cc-cat-name{font-family:var(--rtc-font-head);font-weight:700;font-size:.9rem;color:var(--rtc-text)}
.rtc-cc-cat-fix{font-size:.72rem;color:var(--rtc-text-3);
  background:var(--rtc-bg-card-2);border-radius:99px;padding:3px 10px;white-space:nowrap}
.rtc-cc-cat-desc{font-size:.78rem;line-height:1.6;color:var(--rtc-text-2);margin:0}
.rtc-cc-cat-desc a{color:var(--rtc-primary-text)}
.rtc-cc-cat-desc code{font-size:.74rem;background:var(--rtc-bg-card-2);
  padding:1px 5px;border-radius:4px;color:var(--rtc-text-2)}

/* Schalter */
.rtc-cc-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.rtc-cc-switch input{position:absolute;opacity:0;width:0;height:0}
.rtc-cc-slider{width:40px;height:23px;flex-shrink:0;border-radius:99px;
  background:var(--rtc-bg-card-2);border:1px solid var(--rtc-border);
  position:relative;transition:background var(--rtc-transition),border-color var(--rtc-transition)}
.rtc-cc-slider::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;
  border-radius:50%;background:var(--rtc-text-3);
  transition:transform var(--rtc-transition),background var(--rtc-transition)}
.rtc-cc-switch input:checked + .rtc-cc-slider{background:var(--rtc-primary);border-color:var(--rtc-primary)}
.rtc-cc-switch input:checked + .rtc-cc-slider::after{transform:translateX(17px);background:#fff}
.rtc-cc-switch input:focus-visible + .rtc-cc-slider{outline:2px solid var(--rtc-primary-text);outline-offset:2px}
.rtc-cc-switch-lbl{font-size:.78rem;color:var(--rtc-text-2)}
@media(prefers-reduced-motion:reduce){
  .rtc-cc-slider,.rtc-cc-slider::after{transition:none}
}

/* Aktionen. Beide Entscheidungsknoepfe absichtlich identisch gestaltet. */
.rtc-cc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.rtc-cc-btn{flex:1 1 auto;min-width:min(150px,100%);min-height:44px;
  padding:12px 20px;border-radius:var(--rtc-radius);cursor:pointer;
  background:var(--rtc-bg-card-2);border:1.5px solid var(--rtc-border);
  color:var(--rtc-text);font-family:var(--rtc-font-head);font-weight:700;font-size:.86rem;
  transition:border-color var(--rtc-transition),background var(--rtc-transition),transform var(--rtc-transition)}
.rtc-cc-btn:hover{border-color:var(--rtc-border-hot);background:var(--rtc-bg-card);transform:translateY(-1px)}
.rtc-cc-btn:focus-visible{outline:2px solid var(--rtc-primary-text);outline-offset:2px}
.rtc-cc-btn-save{background:var(--rtc-primary);border-color:var(--rtc-primary);color:#fff}
.rtc-cc-btn-save:hover{background:var(--rtc-primary-dark);border-color:var(--rtc-primary-dark)}
.rtc-cc-btn[hidden]{display:none}
.rtc-cc-link{flex:0 0 auto;background:none;border:0;padding:6px 4px;cursor:pointer;
  color:var(--rtc-text-3);font-family:var(--rtc-font-body);font-size:.78rem;
  text-decoration:underline;text-underline-offset:3px;transition:color var(--rtc-transition)}
.rtc-cc-link:hover{color:var(--rtc-primary-text)}
.rtc-cc-link:focus-visible{outline:2px solid var(--rtc-primary-text);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.rtc-cc-btn{transition:none}}

@media(max-width:600px){
  /* Auf dem Handy nimmt der Banner sonst mehr als die halbe Anzeige ein und
     verdeckt Ueberschrift samt Handlungsaufforderung vollstaendig. Gestrafft
     wird nur die Darstellung - kein Satz faellt weg, die Angaben bleiben
     ungekuerzt lesbar. */
  .rtc-cc{padding:9px}
  .rtc-cc-box{padding:16px 16px 14px}
  .rtc-cc-head{gap:9px;margin-bottom:7px}
  .rtc-cc-icon{width:28px;height:28px;border-radius:8px}
  .rtc-cc-icon svg{width:16px;height:16px}
  .rtc-cc-title{font-size:.9rem}
  .rtc-cc-text{font-size:.78rem;line-height:1.55;margin-bottom:12px}
  .rtc-cc-actions{gap:7px}
  .rtc-cc-btn{flex:1 1 100%;min-height:44px;padding:11px 18px;font-size:.84rem}
  .rtc-cc-link{font-size:.74rem;padding:5px 3px}
}
/* Sehr niedrige Anzeigen (Landscape-Handy): Text scrollbar statt den
   halben Bildschirm zu belegen. */
@media(max-height:520px){
  .rtc-cc-box{max-height:82vh;overflow-y:auto}
}
/* Die feste Bottom-Nav auf Mobilgeraeten nicht verdecken */
@media(max-width:860px){.rtc-cc{bottom:calc(var(--rtc-bottom-nav-h,68px) + 4px)}}


/* ==========================================================================
   3. Scroll-Reveals - aus templates/components/rw_js.html
   --------------------------------------------------------------------------
   Diese sechs Zeilen verstecken die Reveal-Elemente, bevor sie zum ersten Mal
   gezeichnet werden. Sie standen deshalb bis zum 12.09.2026 bewusst inline:
   als eigene Datei waeren sie ein zusaetzlicher blockierender Abruf im Kopf
   gewesen, und kaemen sie zu spaet, blitzten die Elemente einmal auf (FOUC).
   Beides entfaellt, seit diese Datei ohnehin im Kopf steht und rendernd
   blockiert - der Grund von damals traegt hier nicht mehr.
   ========================================================================== */
.rv{opacity:0;transform:translateY(18px);transition:opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1)}
@media(min-width:768px){ .rv-l{transform:translateX(-34px)} .rv-r{transform:translateX(34px)} }
@media(max-width:767px){ .rv{transform:translateY(14px)} }
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1!important;transform:none!important;transition:none} }
