/* =====================================================================
   k360 — Anmeldethema der IT-Kommunal-Produktsuite
   ---------------------------------------------------------------------
   Vorlage: docs/k360-design/anmeldeseiten/variante-b-dach.html (freigegeben)
   Diese Datei bildet das Aussehen dieser Vorlage auf die Elemente ab, die
   Keycloak tatsaechlich erzeugt (login.ftl bleibt unveraendert!).

   Wichtig — Keycloak-Eigenheiten, die hier beruecksichtigt sind:
     * Der Anmeldeknopf ist ein <input type="submit" id="kc-login">, KEIN
       <button>. Er wird deshalb einzeln gestaltet.
     * Der Knopf zum Anzeigen des Passworts ist ein echtes <button> — er darf
       nicht wie der Hauptknopf aussehen.
     * Die Meldungen des Servers (falsches Passwort, Konto gesperrt, Sitzung
       abgelaufen) kommen als .hinweis mit .error/.warning/.success/.info.
     * Passkeys und die Sprachtrennung bleiben unveraendert.

   Schrift: Public Sans liegt bei (resources/fonts) — kein Netz noetig.
   ===================================================================== */

@font-face{
  font-family:'Public Sans';
  src:url('../fonts/public-sans-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Public Sans';
  src:url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --it-blau:#00305B; --it-blau-2:#0F4C85; --it-blau-3:#2E6FB0;
  --it-text:#0F1B26; --it-text-2:#4C5A67; --it-linie:#DDE5ED;
  --it-kante:#7A8896; --it-glas:rgba(255,255,255,.72);
  --fehler:#A4262C; --warnung:#8A5A00; --gut:#0F6B3F;
  --r:9px;
  --titel:'Public Sans','Segoe UI',Arial,sans-serif;
  --schrift:'Public Sans',Arial,Helvetica,sans-serif;
  --schnell:220ms; --sanft:cubic-bezier(.22,.7,.25,1);
}

*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
body.k360-body{
  font-family:var(--schrift); color:var(--it-text); background:#EFF4F9;
  min-height:100vh; overflow-x:hidden; position:relative; font-size:15px; line-height:1.5;
}

/* ---- Untergrund: wandernde Farbfelder + feines Raster -------------------- */
.untergrund{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.wolke{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55}
.wolke.a{width:52vw; height:52vw; left:-12vw; top:-14vw; background:#BFD9F0;
  animation:wandern-a 26s ease-in-out infinite alternate}
.wolke.b{width:40vw; height:40vw; right:-10vw; top:8vw; background:#E7EFF7;
  animation:wandern-b 32s ease-in-out infinite alternate}
.wolke.c{width:46vw; height:46vw; left:22vw; bottom:-20vw; background:#D6E6F5;
  animation:wandern-a 38s ease-in-out infinite alternate-reverse}
@keyframes wandern-a{from{transform:translate3d(0,0,0) scale(1)}
                     to{transform:translate3d(7vw,4vw,0) scale(1.12)}}
@keyframes wandern-b{from{transform:translate3d(0,0,0) scale(1.06)}
                     to{transform:translate3d(-6vw,6vw,0) scale(.94)}}
.raster{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(0,48,91,.14) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%)}

/* ---- Inhalt -------------------------------------------------------------- */
.seite{position:relative; z-index:1; max-width:1140px; margin:0 auto; padding:26px 24px 56px}

/* Kopfleiste: Glaskante, keine harte Linie */
.leiste{position:relative; display:flex; align-items:center; gap:18px; padding:13px 20px;
  border-radius:14px; background:var(--it-glas);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px rgba(0,48,91,.07)}
.leiste img{height:36px; display:block}
.leiste .strich{width:1px; height:26px; background:var(--it-linie)}
.leiste .bereich{font-family:var(--titel); font-size:15px; font-weight:600; color:var(--it-blau)}
.leiste .rechts{margin-left:auto; font-size:12.5px; letter-spacing:.2px; color:var(--it-text-2)}
.leiste .rechts a{color:var(--it-blau-2); text-decoration:none}
.leiste .rechts a:hover{text-decoration:underline}
.leiste::after{content:''; position:absolute; left:20px; right:20px; bottom:-1px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--it-blau) 0%,var(--it-blau) 8%,transparent 8.5%,
    var(--it-blau-2) 8.5%,var(--it-blau-3) 46%,transparent 96%)}

/* Auftakt */
.auftakt{margin:46px 0 34px; max-width:720px}
.auftakt .kicker{display:inline-flex; align-items:center; gap:9px; font-family:var(--titel);
  font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--it-blau-2); margin-bottom:14px}
.auftakt .kicker::before{content:''; width:26px; height:2px; background:var(--it-blau-2)}
.auftakt h1{font-family:var(--titel); font-size:clamp(28px,3.4vw,40px); line-height:1.14;
  font-weight:700; letter-spacing:-.5px; color:var(--it-blau); margin:0 0 12px}
.auftakt p{margin:0; font-size:15.5px; line-height:1.6; color:var(--it-text-2)}

/* ---- Spalten ------------------------------------------------------------- */
.spalten{display:grid; grid-template-columns:1fr 384px; gap:34px; align-items:start}
.gruppe{margin-bottom:14px; padding:18px 20px 20px; border-radius:14px;
  background:var(--it-glas); backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 12px 34px rgba(0,48,91,.06)}
.gruppe h2{font-family:var(--titel); font-size:12.5px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--it-blau-2); margin:0; display:flex; align-items:center; gap:12px}
.gruppe h2::after{content:''; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,rgba(15,76,133,.35),transparent 90%)}
.karten{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:10px;
  margin-top:14px}
.karte{position:relative; background:rgba(255,255,255,.86); border-radius:var(--r);
  padding:13px 15px 14px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 10px rgba(0,48,91,.05);
  transition:transform var(--schnell) var(--sanft), box-shadow var(--schnell) var(--sanft)}
.karte::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--it-blau-2),var(--it-blau-3));
  transform:scaleY(.45); transform-origin:top; transition:transform var(--schnell) var(--sanft)}
.karte:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px rgba(0,48,91,.12)}
.karte:hover::before{transform:scaleY(1)}
.karte b{display:block; font-family:var(--titel); font-size:14.5px; font-weight:700;
  color:var(--it-blau); margin:0 0 3px}
.karte.mitzeichen{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start}
.karte .zeichen{grid-row:span 2; display:flex; align-items:flex-start; padding-top:1px}
.karte .zeichen img{width:34px; height:34px; display:block; border-radius:8px;
  box-shadow:0 2px 8px rgba(0,48,91,.14)}
.karte.mitzeichen b{margin-top:1px}
.karte span{font-size:12.5px; line-height:1.45; color:var(--it-text-2)}

/* ---- Anmeldeflaeche ------------------------------------------------------ */
.anmeldung{position:sticky; top:26px; border-radius:16px; padding:26px 24px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 24px 60px rgba(0,48,91,.14)}
.anmeldung h3{font-family:var(--titel); font-size:21px; font-weight:700; color:var(--it-blau);
  margin:0 0 4px}
.anmeldung .dazu{margin:0 0 22px; font-size:13px; color:var(--it-text-2)}

/* Hinweise des Servers */
.hinweis{padding:10px 12px; border-radius:var(--r); font-size:13px; line-height:1.45;
  margin:0 0 16px; border-left:3px solid var(--it-blau-3); background:rgba(46,111,176,.10);
  color:var(--it-text)}
.hinweis.error  {border-left-color:var(--fehler); background:rgba(164,38,44,.10)}
.hinweis.warning{border-left-color:#B7791F;        background:rgba(183,121,31,.12)}
.hinweis.success{border-left-color:var(--gut);     background:rgba(15,107,63,.10)}
.hinweis.info   {border-left-color:var(--it-blau-3); background:rgba(46,111,176,.10)}
.hinweis .hinweis-text{display:block}

/* bereits erkannter Anmeldename (zweite Seite) */
.erkannt{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 16px;
  padding:10px 12px; border-radius:var(--r); background:rgba(15,76,133,.07); font-size:13.5px}
.erkannt-name{font-weight:700; color:var(--it-blau)}
.erkannt-neu{margin-left:auto; color:var(--it-blau-2); text-decoration:none}
.erkannt-neu:hover{text-decoration:underline}

/* Beschriftungen und Eingaben — die Namen der Felder bleiben Keycloak: */
/* #username, #password, credentialId, rememberMe                         */
.anmeldung label,
.anmeldung .pf-c-form__label{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.2px;
  color:var(--it-text); margin:0 0 6px; font-family:var(--schrift)
}
.anmeldung input[type=text],
.anmeldung input[type=password],
.anmeldung input[type=email],
.anmeldung .pf-c-form-control{
  width:100%; padding:11px 13px; font-size:14.5px; font-family:var(--schrift);
  color:var(--it-text); background:rgba(255,255,255,.92);
  border:1px solid var(--it-kante); border-radius:var(--r); margin:0;
  transition:border-color var(--schnell) var(--sanft), box-shadow var(--schnell) var(--sanft)
}
.anmeldung input::placeholder{color:#93A0AC}
.anmeldung input:focus,
.anmeldung .pf-c-form-control:focus{
  outline:none; border-color:var(--it-blau-2); box-shadow:0 0 0 3px rgba(15,76,133,.18)
}
.anmeldung .form-group{margin:0 0 15px}
.anmeldung .pf-c-form__helper-text,
.anmeldung #input-error{
  display:block; margin-top:6px; font-size:12.5px; color:var(--fehler); font-weight:400
}
/* Zeile: "Angemeldet bleiben" + "Passwort vergessen?" */
#kc-form-options,
.pf-c-form__group-control{display:inline-block}
.anmeldung .form-setting{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; margin:0 0 18px !important}
.anmeldung .checkbox,
.anmeldung .checkbox label{display:flex; align-items:center; gap:8px; font-size:13px;
  font-weight:400; color:var(--it-text-2); margin:0}
.anmeldung .checkbox input[type=checkbox]{width:16px; height:16px; accent-color:var(--it-blau-2);
  margin:0}
.anmeldung a{color:var(--it-blau-2); text-decoration:none}
.anmeldung a:hover{text-decoration:underline}
.anmeldung .weitere{display:inline-block; margin-top:12px; font-size:13px}

/* Der Anmeldeknopf ist ein <input type="submit" id="kc-login"> */
.anmeldung #kc-login{
  width:100%; min-height:46px; padding:12px 16px; font-family:var(--titel); font-size:15px;
  font-weight:700; letter-spacing:.4px; color:#fff; border:0; border-radius:var(--r);
  cursor:pointer; background:linear-gradient(96deg,var(--it-blau) 0%,var(--it-blau-2) 58%,#1A6FB5 100%);
  box-shadow:0 10px 22px rgba(0,48,91,.22);
  transition:transform var(--schnell) var(--sanft), box-shadow var(--schnell) var(--sanft)
}
.anmeldung #kc-login:hover{transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,48,91,.28)}
.anmeldung #kc-login:active{transform:translateY(0)}
.anmeldung #kc-login:focus-visible{outline:2px solid var(--it-blau-2); outline-offset:3px}
#kc-form-buttons{margin-top:20px !important}

/* Der Knopf zum Anzeigen des Passworts: KEIN Hauptknopf */
.anmeldung button.pf-c-button.pf-m-control,
.anmeldung .pf-c-input-group button{
  width:auto; min-height:0; padding:8px 10px; background:transparent; box-shadow:none;
  border:1px solid var(--it-kante); border-left:0; color:var(--it-text-2);
  border-radius:0 var(--r) var(--r) 0; font-weight:400; letter-spacing:0; transform:none
}
.anmeldung .pf-c-input-group{display:flex}
.anmeldung .pf-c-input-group input{border-radius:var(--r) 0 0 var(--r); margin:0}

/* Weitere Wege (Passkey, zweiter Faktor) — schlicht, ohne Bruch */
.info{margin-top:14px; font-size:13px; color:var(--it-text-2)}
.info a{color:var(--it-blau-2)}
#kc-social-providers ul{list-style:none; margin:8px 0 0; padding:0}
#kc-social-providers li{margin-bottom:8px}
#kc-social-providers a{display:block; padding:10px 12px; border:1px solid var(--it-linie);
  border-radius:var(--r); background:rgba(255,255,255,.9); text-align:center}
#kc-social-providers h2{font-size:12.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--it-text-2); font-family:var(--titel); margin:14px 0 0}

.hilfe{margin-top:15px; font-size:11.5px; line-height:1.5; text-align:center; color:var(--it-text-2)}

/* ===========================================================================
   SEITEN VON KEYCLOAK (Abmelden, Fehler, Passwort, zweiter Faktor …)
   ---------------------------------------------------------------------------
   Diese Seiten liefern ihre Vorlagen selbst; sie nisten sich in unser Geruest ein.
   Ohne die folgenden Regeln tragen ihre Elemente zwar unsere Merkmale
   (pf-c-button …), stehen aber ohne Aussehen da — genau das war beim Abmelde-Knopf
   der Fall. Hier wird alles auf unser Aussehen gebracht.
   =========================================================================== */

/* Die Hinweiszeilen der Seiten (z. B. "Sie sind dabei, sich abzumelden.") */
#kc-logout-confirm .instruction,
#kc-info-message p,
.info-text{
  margin:0 0 18px; font-size:14.5px; line-height:1.55; color:var(--it-text-2)
}

/* Alle Aktionsflaechen im gleichen Rhythmus wie das Anmeldeformular */
.anmeldung form,
.anmeldung .pf-c-form,
.anmeldung .k360-inhalt{margin:0}

/* Der KNOPF — gilt fuer jeden Knopf der Seiten (auch den Abmelde-Knopf) */
.anmeldung .pf-c-button,
.anmeldung button,
.anmeldung input[type=submit]{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 18px; font-family:var(--titel); font-size:15px;
  font-weight:700; letter-spacing:.4px; color:#fff; border:0; border-radius:var(--r);
  cursor:pointer;
  background:linear-gradient(96deg,var(--it-blau) 0%,var(--it-blau-2) 58%,#1A6FB5 100%);
  box-shadow:0 10px 22px rgba(0,48,91,.22);
  transition:transform var(--schnell) var(--sanft), box-shadow var(--schnell) var(--sanft)
}
.anmeldung .pf-c-button.pf-m-block,
.anmeldung input[type=submit].pf-m-block{width:100%}
.anmeldung .pf-c-button:hover,
.anmeldung input[type=submit]:hover{transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,48,91,.28)}
.anmeldung .pf-c-button:active{transform:translateY(0)}
.anmeldung .pf-c-button:focus-visible,
.anmeldung input[type=submit]:focus-visible{outline:2px solid var(--it-blau-2); outline-offset:3px}
/* Nebenwege (z. B. "Zur Anwendung zurueck") bleiben schlicht und ohne Knopffarbe */
.anmeldung #kc-info-message a,
.anmeldung .k360-zurueck{
  display:inline-block; margin-top:14px; font-size:13.5px; color:var(--it-blau-2);
  text-decoration:none; background:none; box-shadow:none; min-height:0; padding:0
}
.anmeldung #kc-info-message a:hover{text-decoration:underline}

/* Die Zeile mit "Angemeldet bleiben" + "Passwort vergessen" */
.anmeldung .k360-einstellungen{display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px; margin:0 0 18px}

/* Hinweisflaechen der Seiten (Fehler, Warnung) */
.anmeldung .pf-c-alert,
.anmeldung .pf-m-inline{
  display:block; padding:10px 12px; border-radius:var(--r); margin:0 0 16px;
  font-size:13px; line-height:1.45; background:rgba(46,111,176,.10);
  border-left:3px solid var(--it-blau-3); color:var(--it-text)
}
.anmeldung .pf-c-alert__title{font-weight:700; font-size:13px}

/* Das Geruest bleibt unveraendert — nur Luft, damit nichts versetzt wirkt */
.anmeldung .k360-inhalt{margin:0}
#kc-form-buttons{margin-top:20px !important}

/* ---- Fuss ---------------------------------------------------------------- */
.abschluss{margin-top:34px; padding-top:18px; font-size:12px; color:var(--it-text-2);
  border-top:1px solid rgba(0,48,91,.10)}
.abschluss a{color:var(--it-blau-2); text-decoration:none}
.abschluss a:hover{text-decoration:underline}
.firma{margin-top:10px; font-size:12px; color:var(--it-text-2)}

/* ---- Schmale Geräte ------------------------------------------------------ */
@media (max-width:960px){
  .spalten{grid-template-columns:1fr}
  .anmeldung{position:static; order:-1}
  .auftakt{margin-top:30px}
  .leiste{flex-wrap:wrap; gap:10px}
  .leiste .rechts{margin-left:0}
}
/* ---- Ruhe bei reduzierter Bewegung -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ===========================================================================
   KEYCLOAKS EIGENE SEITEN — Abmelden, Fehler, Passwort, zweiter Faktor
   ---------------------------------------------------------------------------
   Diese Seiten bringen ihre eigenen Vorlagen mit und nisten sich in unser
   Geruest ein. Ihre Elemente tragen die Merkmale von Keycloak (`pf-c-button`
   ...), unser Aussehen fehlte ihnen bis hierher — der Abmelde-Knopf stand
   deshalb ohne Gestaltung da (befundet).

   Die Formensprache ist DIESELBE wie beim Anmeldeknopf (`#kc-login`): eine
   Stelle fuer die Form, damit die Seiten nicht auseinanderlaufen.
   =========================================================================== */

/* Der Hauptknopf (Abmelden bestaetigen, Passwort absenden, Fehler bestaetigen) */
.anmeldung .pf-c-button.pf-m-primary,
.anmeldung input[type=submit].pf-c-button,
.anmeldung #kc-logout,
.anmeldung #kc-cancel{
  width:100%; min-height:46px; padding:12px 16px;
  font-family:var(--titel); font-size:15px; font-weight:700; letter-spacing:.4px;
  color:#fff; border:0; border-radius:var(--r); cursor:pointer;
  background:linear-gradient(96deg,var(--it-blau) 0%,var(--it-blau-2) 58%,#1A6FB5 100%);
  box-shadow:0 10px 22px rgba(0,48,91,.22);
  transition:transform var(--schnell) var(--sanft), box-shadow var(--schnell) var(--sanft);
}
.anmeldung .pf-c-button.pf-m-primary:hover,
.anmeldung input[type=submit].pf-c-button:hover{
  transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,48,91,.28);
}
.anmeldung .pf-c-button.pf-m-primary:active{transform:translateY(0)}
.anmeldung .pf-c-button.pf-m-primary:focus-visible{
  outline:2px solid var(--it-blau-2); outline-offset:3px;
}

/* Der nebengeordnete Knopf (Abbrechen, Zurueck) — ruhig, nicht laut */
.anmeldung .pf-c-button.pf-m-secondary,
.anmeldung .pf-c-button.pf-m-link{
  width:auto; min-height:0; padding:10px 14px; font-family:var(--titel);
  font-size:14px; font-weight:600; color:var(--it-blau-2); background:transparent;
  border:1px solid var(--it-kante); border-radius:var(--r); box-shadow:none; cursor:pointer;
}
.anmeldung .pf-c-button.pf-m-secondary:hover{background:rgba(15,76,133,.06)}

/* Die Gruppe, in der der Knopf steht: gleiche Abstaende wie beim Anmelden */
.anmeldung .pf-c-form__group{margin:0}
.anmeldung .pf-c-form__group-control{display:block}

/* Der Satz ueber dem Knopf („Wollen Sie sich abmelden?") und Hinweise */
.anmeldung .instruction,
.anmeldung #kc-info-message,
.anmeldung .kc-feedback-text{
  margin:0 0 16px; font-size:14.5px; line-height:1.5; color:var(--it-text);
}
.anmeldung .pf-c-alert{padding:12px 14px; border-radius:var(--r);
  border:1px solid var(--it-kante); background:#fff}
.anmeldung .pf-c-alert__title{font-weight:700; font-size:14px}

/* Seiten, deren Inhalt AUSSERHALB unserer Karte steht (Fehlerseite, zweiter Faktor):
   dieselbe Gestalt, damit sie sich nicht fremd anfuehlen. */
.pf-c-button.pf-m-primary,
input[type=submit].pf-c-button{
  min-height:46px; padding:12px 16px; font-family:var(--titel); font-size:15px;
  font-weight:700; letter-spacing:.4px; color:#fff; border:0; border-radius:var(--r);
  cursor:pointer; background:linear-gradient(96deg,var(--it-blau) 0%,var(--it-blau-2) 58%,#1A6FB5 100%);
  box-shadow:0 10px 22px rgba(0,48,91,.22); width:100%;
}
.pf-c-button.pf-m-primary:hover{transform:translateY(-1px)}
.instruction{margin:0 0 16px; font-size:14.5px; line-height:1.5}

/* KAP. 519au: Die Ueberschrift der Karte passt nicht zur Seite.
   Auf der ABMELDE-Bestaetigung stand „Anmelden", waehrend darunter „Wollen Sie sich abmelden?"
   gefragt wurde — ein Widerspruch (befundet). Die Karte zeigt dort nur Frage und Knopf; die
   Ueberschrift gehoert der jeweiligen Keycloak-Vorlage, nicht unserem Geruest. */
body[data-page-id="login-logout-confirm"] .anmeldung > h3,
body[data-page-id="login-logout-confirm"] .anmeldung > .dazu{display:none}