/* ==========================
   Profingo – Kategorien (Elegant Premium)
   Modern, clean, IMMER 2 Karten nebeneinander
   CI: #1D1F20, #1294F2, #2A9C8C
   ========================== */

:root{
  --ink:#1D1F20;
  --blue:#1294F2;
  --teal:#2A9C8C;
  --bg:#F6F8FA;
  --surface:#FFFFFF;
  --line:#E8EDF2;
  --muted:#6B7280;

  --radius:20px;
  --radius-sm:12px;

  --shadow-sm:0 4px 20px rgba(0,0,0,.05);
  --shadow-lg:0 16px 44px rgba(0,0,0,.12);

  --ring:0 0 0 4px rgba(18,148,242,.16);
}

/* Base */
body{
  margin:0;
  font-family:"Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Section */
.kategorien-uebersicht{ padding:clamp(2.5rem, 6vw, 4rem) 1rem; }
.kategorien-uebersicht h1{
  text-align:center;
  font-size:clamp(2rem, 2.5vw, 2.6rem);
  font-weight:800;
  letter-spacing:-.5px;
  margin:0 0 2.5rem 0;
}

/* Grid – exakt 2 Spalten */
.kategorien-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2.2rem;
  max-width:1140px;
  margin:0 auto;
  padding:0 1rem;
}

/* Card */
.kategorie-card{
  display:flex;
  flex-direction:column;
  gap:1rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem 1.8rem 1.8rem;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height:360px;
}
.kategorie-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(18,148,242,.25);
}

/* Header */
.kategorie-header{ display:flex; align-items:center; gap:1rem; }

/* ===== Icon: KEIN blaues Quadrat mehr ===== */
.kategorie-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  /* Hintergrund/Border/Shadow ABSCHALTEN: */
  background:none;
  border:none;
  box-shadow:none;
  padding:0;
}

/* Inline-SVG – gleiche Optik wie Index (Linien-Icons) */
.kategorie-icon svg{
  width:32px;
  height:32px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 1.8px;
}

/* WENN du <img> aus Marketing nutzt, bleibt die Boxgröße gleich */
.kategorie-icon.marketing-icon{
  width:54px;
  height:54px;
  object-fit:contain;
  display:block;
}

/* Titel & Sub */
.kategorie-card h2{
  font-size:1.3rem;
  font-weight:700;
  color:var(--blue);
  margin:0;
}
.kategorie-sub{ font-size:.92rem; color:var(--muted); margin-top:.2rem; }

/* zarter Trenner innerhalb der Karte */
.kategorie-divider{
  height:1px;
  background:var(--line);
  margin:.6rem 0 .4rem;
  border-radius:1px;
}

/* Unterkategorien */
.unterkategorien{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.7rem 1rem;
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}
.unterkategorien li{ margin:0; }

.unterkategorien a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.7rem .9rem;
  border-radius:var(--radius-sm);
  background:#fff;
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:all .2s ease;
  cursor:pointer;
}
.unterkategorien a::after{
  content:"→";
  font-weight:600;
  opacity:.45;
  transform:translateX(-2px);
  transition:transform .2s ease, opacity .2s ease;
}
.unterkategorien a:hover{
  background:rgba(18,148,242,.05);
  border-color:rgba(18,148,242,.3);
  color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(18,148,242,.15);
}
.unterkategorien a:hover::after{ transform:translateX(3px); opacity:.9; }
.unterkategorien a:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #fff, var(--ring);
}

/* „Alle anzeigen“-Link */
.kategorie-actions{ margin-top:auto; text-align:right; }
.alle-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:600;
  text-decoration:none;
  color:var(--blue);
  font-size:.95rem;
  padding:.5rem .8rem;
  border-radius:var(--radius-sm);
  transition:background .18s ease, transform .18s ease;
}
.alle-link:hover{
  background:rgba(18,148,242,.08);
  transform:translateY(-1px);
}
.alle-link .alle-arrow{ transition:transform .18s ease; }
.alle-link:hover .alle-arrow{ transform:translateX(3px); }

/* ===== Mobile: 1 Spalte auf Smartphones ===== */
@media (max-width: 520px){
  .kategorien-grid{
    grid-template-columns: 1fr;   /* statt 2 Spalten */
    gap: 1rem;
  }
  .kategorie-card{
    padding: 1.35rem 1rem;
    min-height: 0;                /* frei atmen lassen */
  }
  .unterkategorien{
    grid-template-columns: 1fr;   /* Links untereinander */
    gap: .5rem;
  }
  .unterkategorien a{
    font-size: .95rem;
    padding: .6rem .7rem;
  }
}

@media (min-width: 521px) and (max-width: 1024px){
  .kategorien-grid{ grid-template-columns: repeat(2, 1fr); }
}