/* ==========================================================
   klick2friend.base.css  (gemeinsam für Search/Profil/Form)
   ----------------------------------------------------------
   Du kannst das Design fast komplett über die Variablen in :root
   steuern. Unten sind die Variablen thematisch gruppiert und
   kommentiert, damit sofort klar ist, was sie beeinflussen.
   ========================================================== */

/* ==========================================================
   1) DESIGN-TOKENS / VARIABLEN
   ========================================================== */
:root{
  /* --- Layout / Abstände (wirken überall) --- */
  --pad:14px;   /* Innenabstand in Cards + main padding */
  --gap:14px;   /* Abstand zwischen Panels/Blocks */
  --r:14px;     /* Grund-Radius (Ecken) */

  /* --- Listen/Items (Profil: Kategorien/Eigenschaften/Selected) --- */
  --list-gap:6px;          /* Abstand zwischen Listeneinträgen */
  --list-item-pad-y:8px;   /* vertikales Padding der Listenbuttons */
  --sel-item-pad-y:8px;    /* vertikales Padding Selected-Einträge */

  /* --- Brand / Akzentfarbe (Topbar + primäre Aktionen) --- */
  --brand:#d46b00;         /* Hauptfarbe (Header, Active Tabs, Savebar) */
  --brand-ink:#ffffff;     /* Schriftfarbe auf Brand-Flächen */

  /* --- Seitenhintergrund & Textfarben (Grundton) --- */
  --c-bg:#f3f5f7;          /* Seitenhintergrund */
  --c-ink:#1f2937;         /* Standard-Text */
  --c-ink-strong:#111827;  /* Ãœberschriften / starker Text */

  /* --- Panels / Flächen --- */
  --surface:#ffffff;       /* Card Hintergrund */
  --surface2:#f7f8fa;      /* leichte Alternativfläche (List items) */
  --stroke:rgba(0,0,0,.10);/* dezente Umrandung/Trennlinie */

  /* --- Headline / Titel --- */
  --title:#111827;         /* h1 Farbe */

  /* --- Muted (sekundäre Texte) --- */
  --muted:rgba(0,0,0,.55); /* Footer/untergeordnete Texte */
  --muted2:rgba(0,0,0,.75);/* Labels etc. */

  /* --- Controls (Input/Select/Textarea + Button Borders) --- */
  --control-bg:#ffffff;             /* Hintergrund von Form-Controls */
  --control-border:rgba(0,0,0,.14); /* Border von Form-Controls/Buttons */

  /* --- Buttons (sekundär) --- */
  --btn-bg:#eef2f7;        /* Standardbutton (grau-blau) */
  --btn-bg-primary:#e7ecf3;/* optional leicht “primärer” sekundärbutton */
  --btn-bg-top:rgba(255,255,255,.18); /* für helle Buttons auf Brand */

  /* --- Scrollboxen (Listenbereiche mit Scrollbar) --- */
  --scroll-bg:#ffffff;              /* Hintergrund im Scrollbereich */
  --scroll-border:rgba(0,0,0,.10);  /* Rahmen um Scrollbereich */

  /* --- Schatten / Tiefe --- */
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.06);

  /* --- Focus/Outline (z.B. beim Klick in Inputs) --- */
  --accent:var(--brand);
  --accent-soft:rgba(212,107,0,.14); /* Glow/Focus-Ring */
}

/* ==========================================================
   2) GLOBAL RESET / SEITENLAYOUT
   ========================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  display:flex;
  flex-direction:column;
  background:var(--c-bg);
  color:var(--c-ink);
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

main{
  flex:1;
  min-height:0;          /* wichtig: erlaubt inneres Scrollen ohne “Body-Scroll” */
  padding:var(--pad);
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  background:var(--c-bg);
}

footer{
  padding:10px 0 14px;
  text-align:center;
  color:var(--muted);
  background:transparent;
  font-weight:800;
}
footer a{
  color:var(--muted);
  text-decoration:none;
  font-weight:800;
}
footer a:hover{ text-decoration:underline; }

/* ==========================================================
   3) TOPBAR
   ========================================================== */
.topbar{
  background:var(--brand);
  color:var(--brand-ink);
  border-radius:var(--r);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:18px;
  box-shadow:var(--shadow);
}
.topbar .brand{
  font-size:34px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1;
  user-select:none;
}
.topbar nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.topbar nav a{
  color:rgba(255,255,255,.95);
  text-decoration:none;
  font-weight:800;
  padding:6px 8px;
  border-radius:10px;
}
.topbar nav a:hover{ background:rgba(255,255,255,.12); }

.topbar .logout{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
}
.topbar .logout:hover{ filter:brightness(1.05); }
.topbar .logout:active{ transform:scale(.99); }

/* ==========================================================
   4) HEADLINE / TITELZEILE
   ========================================================== */
.headline{ padding:0 2px; }
/* tighten headline only on pages that are too low */
.k2f-search .headline,
.k2f-events .headline{
  margin-top:-34px;
}
.k2f-profil .headline{
  margin-top:-34px;
}
.headline h1{
  margin:0;
  font-size:30px;
  font-weight:900;
  color:var(--title);
}
.headline-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:0 2px;
}
/* Variante mit Button rechts (Search) */
.headline.row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.headline.row h1{
  align-self:flex-start;
}

/* ==========================================================
   5) BUTTONS (sekundär)
   ========================================================== */
.btn,
.headline .filterBtn,
.save{
  border:1px solid var(--control-border);
  background:var(--btn-bg);
  color:var(--c-ink-strong);
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:900;
}
.btn:hover,
.headline .filterBtn:hover,
.save:hover{ filter:brightness(1.02); }
.btn:active,
.headline .filterBtn:active{ transform:scale(.99); }
.btn:disabled,
.save:disabled,
.headline .filterBtn:disabled,
.logout:disabled{
  cursor:not-allowed;
  opacity:.55;
  filter:none;
  transform:none;
  pointer-events:none;
}

/* Primäre “Savebar” (Formularseite) */
.savebar{
  margin-top:8px;
  width:100%;
  border:0;
  background:var(--brand);
  color:#fff;
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:900;
  font-size:15px;
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}
.savebar:hover{ filter:brightness(1.03); }
.savebar:active{ transform:scale(.995); }

/* ==========================================================
   6) CARD / CONTENT / SCROLL
   ========================================================== */
.card{
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  padding:var(--pad);
  border-radius:var(--r);
  background:var(--surface);
  box-shadow:var(--shadow);
  gap:10px;
  border:1px solid var(--stroke);
}

.card h2{
  margin:0;
  color:var(--c-ink-strong);
  font-size:18px;
  font-weight:900;
  flex:0 0 auto;
}
.card h3{
  margin:0;
  color:var(--c-ink-strong);
  font-size:16px;
  font-weight:900;
  flex:0 0 auto;
}

.content{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overflow-x:hidden;
  border-radius:12px;
  border:1px solid var(--scroll-border);
  background:var(--scroll-bg);
  padding:8px;
}

/* ==========================================================
   7) GRID / SPALTEN-HELPER
   (die konkrete Spaltenbreite kommt seiten-spezifisch)
   ========================================================== */
.grid{
  flex:1;
  min-height:0;
  display:grid;
  gap:var(--gap);
  align-items:stretch;
}

.col{
  min-height:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}
.col.two{ height:100%; }
.col.two > .card{ flex:1 1 0; }

/* ==========================================================
   8) TABS (Profil)
   ========================================================== */
.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-left:2px;
}
.k2f-profil .tabs{
  margin-top:4px;
}
.tab{
  border:1px solid var(--control-border);
  background:var(--btn-bg);
  color:var(--c-ink-strong);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:900;
  user-select:none;
}
.tab:hover{ filter:brightness(1.02); }
.tab.active{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ==========================================================
   9) LISTEN (Profil)
   ========================================================== */
.list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--list-gap);
}
.list button{
  width:100%;
  text-align:left;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:var(--surface2);
  padding:var(--list-item-pad-y) 12px;
  cursor:pointer;
  font-weight:900;
  color:var(--c-ink-strong);
}
.list button:hover{ filter:brightness(1.01); }
.list.props button{
  background:#fff;
  font-weight:800;
}
/* neutraler Active-State (seite kann das spezifisch überschreiben) */
.list button.active{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.10);
}
.category-list .category-btn.active{
  background:#c9ebe7;
  border-color:#a7d9d3;
  color:var(--c-ink-strong);
}

/* Selected-Liste (X-Button rechts) */
.sel{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--list-gap);
}
.x{
  width:28px;height:28px;
  border-radius:10px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  color:var(--brand);
}
.x:hover{ background:rgba(212,107,0,.12); }

/* Modal (global) */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}
.modal.open{ display:flex; }
.modal-card{
  width:min(720px, 100%);
  max-height:80vh;
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:18px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}
.modal-title{
  font-size:20px;
  font-weight:900;
  margin:0;
}
.modal-body{
  flex:1 1 auto;
  overflow:auto;
  min-height:0;
}
.help-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.help-copy h4{
  margin:10px 0 0;
  font-size:16px;
  font-weight:900;
  color:var(--c-ink-strong);
}
.help-copy p{
  margin:0;
}
.help-copy ul{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:4px;
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}


/* ==========================================================
   10) FORMS (Formularseite)
   ========================================================== */
form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.k2f-form .page{
  flex:1;
  min-height:0;
  width:100%;
  display:grid;
  justify-items:center;
  align-content:start;
  gap:var(--gap);
  padding:2px 0 14px;
}
.card.formCard{
  width:fit-content;
  max-width:min(980px, 100%);
  margin-left:auto;
  margin-right:auto;
  align-self:center;
}
.card.formCard .field input,
.card.formCard .field select,
.card.formCard .field textarea{
  max-width:360px;
}
.card.formCard .field.full input,
.card.formCard .field.full select,
.card.formCard .field.full textarea{
  max-width:100%;
}
.formgrid{
  display:grid;
  gap:12px 14px;
  grid-template-columns: minmax(320px, 420px) minmax(320px, 420px);
  align-items:start;
}
.full{ grid-column:1/-1; }
.actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:6px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
label{
  color:var(--muted2);
  font-weight:800;
}
input,select,textarea{
  width:100%;
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--c-ink-strong);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
textarea{ min-height:110px; resize:vertical; }

input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px var(--accent-soft);
  border-color:rgba(212,107,0,.35);
}

/* ==========================================================
   11) RESPONSIVE
   ========================================================== */
@media (max-width: 900px){
  .grid{ grid-template-columns:1fr !important; }
  .card.formCard{ width:100%; max-width:100%; }
  .formgrid{ grid-template-columns:1fr; }
}
 „template-clean“ Helferklassen (ohne Inline-Styles)
   ========================================================== */

/* Selected-Item (z.B. Search/Profil): Text links, X rechts */
.selItem{
  display:grid;
  grid-template-columns:1fr 28px;
  gap:8px;
  align-items:center;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:var(--surface2);
  padding:8px 10px;
}
.selText{
  font-weight:900;
  color:var(--c-ink-strong);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Kleine Badge-Optik (optional) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:var(--surface2);
  font-weight:900;
  font-size:12px;
  color:var(--c-ink-strong);
}