/* =================================================================
   kostenlose-Ausmalbilder.de – Template-Stylesheet
   Struktur: Tokens, Layout, Kopf, Navigation, Hero, Seitenkopf,
             Inhalt, Fusszeile, Responsiv
   Bilder werden relativ (../img/...) eingebunden -> domainunabhaengig
   ================================================================= */

:root{
  --bg:#FFFFFF;
  --bg-soft:#F6F7FB;
  --ink:#2A2540;
  --navy:#28347E;
  --navy-2:#3A47A0;
  --muted:#6E6A82;
  --line:#ECEBF3;
  --line-strong:#DEDCEB;
  --pink:#E92E8B;
  --pink-strong:#C81E74;
  /* Regenbogen-Akzente */
  --r1:#FF4E6A; --r2:#FF8A3D; --r3:#E0A400; --r4:#2FA85B;
  --r5:#1798A8; --r6:#2E7DE0; --r7:#8A55D6; --r8:#E92E8B;
  --shadow:0 2px 5px rgba(40,52,126,.06), 0 14px 34px -14px rgba(40,52,126,.22);
  --shadow-lift:0 4px 10px rgba(40,52,126,.10), 0 26px 54px -20px rgba(40,52,126,.32);
  --maxw:1240px;
  --sans:"Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Fredoka", "Nunito", system-ui, sans-serif;
  --hand:"Caveat", "Segoe Script", cursive;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:inherit; text-decoration:none}

.ka-wrap{max-width:var(--maxw); margin:0 auto; padding-inline:22px}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--pink); color:#fff; padding:8px 14px; border-radius:0 0 8px 0; z-index:100}
.skip-link:focus{left:0}

/* Regenbogen-Wortmarke ---------------------------------------- */
.rain span:nth-child(8n+1){color:var(--r1)}
.rain span:nth-child(8n+2){color:var(--r2)}
.rain span:nth-child(8n+3){color:var(--r3)}
.rain span:nth-child(8n+4){color:var(--r4)}
.rain span:nth-child(8n+5){color:var(--r5)}
.rain span:nth-child(8n+6){color:var(--r6)}
.rain span:nth-child(8n+7){color:var(--r7)}
.rain span:nth-child(8n+8){color:var(--r8)}
.rain span{display:inline-block}
.navy{color:var(--navy)}

/* =================================================================
   KOPFZEILE
   ================================================================= */
.ka-topbar{background:var(--bg); border-bottom:1px solid var(--line)}
.ka-topbar__in{display:flex; align-items:center; gap:20px; padding-block:14px}
.ka-logo{display:flex; flex-direction:column; gap:3px; line-height:1}
.ka-logo__brand{font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-.5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.ka-logo__heart{color:var(--pink)}
.ka-logo__tag{font-family:var(--hand); font-weight:700; font-size:19px; color:var(--navy-2); position:relative; width:max-content; padding-bottom:6px}
.ka-logo__tag svg{position:absolute; left:0; right:0; bottom:-2px; width:100%; height:7px; color:var(--pink)}

.ka-utility{margin-left:auto; display:flex; align-items:center; gap:6px}
.ka-uitem{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px; font-weight:700; font-size:14px; color:var(--ink)}
.ka-uitem svg{color:var(--pink)}
.ka-uitem:hover{background:var(--line); color:var(--pink)}

.ka-burger{display:none; width:44px; height:44px; border:2px solid var(--line-strong); background:var(--bg); border-radius:12px; cursor:pointer; padding:0; flex-direction:column; gap:5px; align-items:center; justify-content:center}
.ka-burger span{display:block; width:20px; height:2.5px; background:var(--navy); border-radius:2px; transition:.2s}
.ka-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.ka-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ka-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* =================================================================
   HAUPTNAVIGATION (Ausgabe von show_menu2)
   ================================================================= */
.ka-nav{background:var(--bg); border-bottom:1px solid var(--line); position:relative; z-index:30}
.ka-nav .ka-wrap > ul{display:flex; flex-wrap:wrap; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.ka-nav li{position:relative}
.ka-nav a{display:block; font-weight:700; font-size:15.5px; color:var(--navy); padding:14px 16px; border-radius:10px}
.ka-nav .ka-wrap > ul > li > a:hover,
.ka-nav a.menu-current,
.ka-nav a.menu-parent{color:var(--pink)}
.ka-nav .ka-wrap > ul > li > a.menu-current::after{content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:3px; background:var(--pink); border-radius:3px}

/* Dropdown / automatisches Mega-Menue */
.ka-nav li ul{
  display:none; position:absolute; top:100%; left:0;
  background:var(--bg); border:1px solid var(--line);
  border-radius:0 0 16px 16px; box-shadow:var(--shadow-lift);
  list-style:none; margin:0; padding:14px 18px; z-index:40;
  min-width:230px;
}
.ka-nav .ka-wrap > ul > li > ul:not(.mega){max-height:78vh; overflow-y:auto}
/* Mehrspaltiges Mega-Menue, sobald viele Unterpunkte vorhanden sind */
.ka-nav .ka-wrap > ul > li > ul.mega{width:min(760px, 92vw); column-width:200px; column-gap:30px}
.ka-nav li:hover > ul, .ka-nav li:focus-within > ul{display:block}
.ka-nav li ul li{break-inside:avoid; width:100%; display:inline-block}
.ka-nav li ul a{padding:7px 8px; font-size:14.5px; font-weight:600; color:var(--ink); border-radius:6px}
.ka-nav li ul a:hover{color:var(--pink); text-decoration:underline; text-underline-offset:3px}
/* dritte Ebene eingerueckt darstellen */
.ka-nav li ul ul{position:static; display:block; box-shadow:none; border:0; padding:2px 0 6px 12px; min-width:0; column-width:auto}
.ka-nav li ul ul a{font-weight:600; color:var(--muted); font-size:13.5px}
.ka-navsub-toggle{display:none} /* nur mobil sichtbar */

/* =================================================================
   STARTSEITE: HERO
   ================================================================= */
.ka-hero{position:relative; overflow:hidden; background:var(--bg)}
.ka-hero__splash{position:absolute; inset:0; z-index:0; pointer-events:none}
.ka-hero__splash .b{position:absolute; border-radius:50%; filter:blur(30px); opacity:.4}
.ka-hero__splash .b-y{width:230px;height:230px;background:var(--r3);left:-30px;top:-30px}
.ka-hero__splash .b-t{width:180px;height:180px;background:var(--r5);left:6%;bottom:-30px}
.ka-hero__splash .b-p{width:200px;height:200px;background:var(--r8);left:20%;top:-40px;opacity:.28}
.ka-hero__splash .b-p2{width:230px;height:230px;background:var(--r8);right:-30px;top:-30px;opacity:.32}
.ka-hero__splash .b-y2{width:190px;height:190px;background:var(--r3);right:4%;bottom:-30px}
.ka-hero__splash .b-t2{width:200px;height:200px;background:var(--r5);right:22%;top:-40px;opacity:.28}

.ka-hero__in{position:relative; z-index:1; display:grid; grid-template-columns:minmax(230px,.95fr) 1.02fr 1.1fr; gap:14px; align-items:center; min-height:440px; padding-block:22px}
.ka-hero__mascot{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ka-hero__fig{width:100%; max-width:300px; aspect-ratio:600/551; background:url("../img/klecksi.png") center/contain no-repeat; filter:drop-shadow(0 14px 20px rgba(40,52,126,.22))}

.page-72 .ka-pageintro__mascot{
  background-image:url("../img/Klecksi-Zeitung.png");
}

.ka-hero__name{position:absolute; left:2%; bottom:6%; font-family:var(--hand); font-weight:700; font-size:24px; color:var(--navy); transform:rotate(-8deg)}

.ka-hero__center{text-align:center}
.ka-hero__h1{font-family:var(--display); font-weight:700; font-size:clamp(30px,3.6vw,46px); line-height:1.03; letter-spacing:-.5px; margin:0; color:var(--navy)}
.ka-hero__h1 .rain span{display:inline-block}
.ka-hero__heart{color:var(--pink); vertical-align:.12em}
.ka-hero__lead{font-size:clamp(14px,1.35vw,17px); color:var(--ink); font-weight:700; max-width:40ch; margin:12px auto 0}
.ka-hero__lead b{color:var(--navy)}

.ka-search{margin:18px auto 0; max-width:520px; display:flex; align-items:center; background:var(--bg); border:2px solid var(--line-strong); border-radius:999px; padding:5px 5px 5px 16px; box-shadow:var(--shadow)}
.ka-search__mag{color:var(--muted); flex:none}
.ka-search__input{flex:1; border:none; background:none; font:inherit; font-size:15px; font-weight:600; color:var(--ink); padding:9px 12px; min-width:0}
.ka-search__input:focus{outline:none}
.ka-search__input::placeholder{color:var(--muted)}
.ka-search__go{border:none; background:var(--pink); color:#fff; font:inherit; font-weight:800; font-size:14px; padding:11px 22px; border-radius:999px; cursor:pointer; box-shadow:0 3px 0 var(--pink-strong); flex:none}
.ka-search__go:hover{background:var(--pink-strong)}

.ka-tags{margin-top:14px; display:flex; gap:7px; justify-content:center; align-items:center; flex-wrap:wrap}
.ka-tags__lbl{font-weight:800; color:var(--navy); font-size:13.5px}
.ka-tags a{background:var(--bg-soft); border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:13px; padding:5px 12px; border-radius:999px}
.ka-tags a:hover{background:var(--pink); color:#fff; border-color:var(--pink)}

.ka-hero__collage{justify-self:end; width:100%; max-width:460px; aspect-ratio:1536/1024; background:url("../img/collage.jpg") center/contain no-repeat}

/* =================================================================
   UNTERSEITEN: KOMPAKTER SEITENKOPF
   ================================================================= */
.ka-pageintro{background:var(--bg); border-bottom:1px solid var(--line)}
.ka-pageintro__in{padding-block:20px 22px; display:flex; align-items:center; gap:26px}
.ka-pageintro__mascot{width:110px; flex:none; aspect-ratio:600/551; background:url("../img/klecksi.png") center/contain no-repeat; filter:drop-shadow(0 8px 12px rgba(40,52,126,.18))}
.ka-pageintro__text{min-width:0}
.ka-crumb{font-size:13px; color:var(--muted); font-weight:700; margin-bottom:8px}
.ka-crumb a{color:var(--muted)}
.ka-crumb a:hover{color:var(--pink)}
.ka-crumb .sep{margin:0 7px; color:var(--line-strong)}
.ka-crumb .sep:last-child{display:none}
.ka-pageintro__h1{font-family:var(--display); font-weight:700; font-size:clamp(26px,3vw,36px); color:var(--navy); margin:0; letter-spacing:-.5px}
.ka-pageintro__lead{margin:8px 0 0; color:var(--muted); font-weight:600; font-size:15.5px; max-width:66ch}

/* =================================================================
   INHALT
   ================================================================= */
.ka-main{padding-block:26px 44px; background:var(--bg)}
.ka-main__grid{display:block}
.ka-main.has-side .ka-main__grid{display:grid; grid-template-columns:1fr 300px; gap:34px; align-items:start}
.ka-content{min-width:0}
.ka-content h2{font-family:var(--display); font-weight:700; color:var(--navy); font-size:clamp(22px,2.4vw,30px); margin:1.4em 0 .5em; letter-spacing:-.3px}
.ka-content h3{font-family:var(--display); font-weight:600; color:var(--navy); font-size:clamp(18px,1.8vw,22px); margin:1.2em 0 .4em}
.ka-content p{margin:0 0 1em}
.ka-content a{color:var(--pink); font-weight:700}
.ka-content a:hover{text-decoration:underline; text-underline-offset:2px}
.ka-content ul, .ka-content ol{margin:0 0 1em 1.2em; padding:0}
.ka-content li{margin-bottom:.4em}
.ka-content table{border-collapse:collapse; max-width:100%}
.ka-content img{border-radius:8px}
.ka-content blockquote{margin:1em 0; padding:.6em 1em; border-left:4px solid var(--pink); background:var(--bg-soft); border-radius:0 10px 10px 0; color:var(--muted)}
.ka-gallery{margin-top:20px}

/* Kategorie-Sidebar (Rubrik-Navigation) */
.ka-side{background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:18px; align-self:start}
.ka-side__toggle{display:none}
.ka-side__title{font-family:var(--display); font-weight:700; color:var(--navy); font-size:18px; margin:0 0 12px}
.ka-side__nav ul{list-style:none; margin:0; padding:0}
.ka-side__nav li{margin:0}
.ka-side__nav a{display:block; padding:7px 10px; border-radius:8px; font-weight:700; font-size:14.5px; color:var(--ink)}
.ka-side__nav a:hover{background:#fff; color:var(--pink)}
.ka-side__nav a.menu-current{background:var(--pink); color:#fff}
/* verschachtelte Unterpunkte etwas eingerückt */
.ka-side__nav ul ul{padding-left:12px}
.ka-side__nav ul ul a{font-weight:600; font-size:13.5px; color:var(--muted)}
.ka-side__useful{margin-top:18px; border-top:1px solid var(--line); padding-top:14px}
.ka-side__useful h3{font-family:var(--display); font-weight:600; color:var(--navy); font-size:15px; margin:0 0 8px}
.ka-side__useful ul{list-style:none; margin:0; padding:0}
.ka-side__useful li{margin-bottom:6px}
.ka-side__useful a{font-weight:700; font-size:14px; color:var(--ink)}
.ka-side__useful a:hover{color:var(--pink)}

/* Aenderungsdatum */
.ka-modified{margin-top:28px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; font-weight:600}

/* =================================================================
   FUSSZEILE
   ================================================================= */
.ka-footer{border-top:1px solid var(--line); background:var(--bg-soft); margin-top:20px; padding-block:40px 24px}
.ka-footer__cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; align-items:start}
.ka-footer__brand .ka-logo__brand{font-size:22px}
.ka-footer__brand p{color:var(--muted); font-size:14px; max-width:36ch; font-weight:600; margin:10px 0 0}
.ka-footer__col h3{font-family:var(--display); font-weight:600; color:var(--navy); font-size:15px; margin:0 0 10px}
.ka-footer__col ul{list-style:none; margin:0; padding:0}
.ka-footer__col li{margin-bottom:8px}
.ka-footer__col a{font-weight:700; font-size:14.5px; color:var(--ink)}
.ka-footer__col a:hover{color:var(--pink)}
.ka-footer__bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:13.5px; font-weight:600; border-top:1px solid var(--line); margin-top:28px; padding-top:18px}

/* =================================================================
   RESPONSIV
   ================================================================= */
@media (max-width:1040px){
  .ka-hero__in{grid-template-columns:1fr; gap:10px; text-align:center; min-height:0}
  .ka-hero__mascot{order:1; max-width:240px; margin:0 auto}
  .ka-hero__center{order:2}
  .ka-hero__collage{order:3; justify-self:center; max-width:520px; margin-top:6px}
  .ka-footer__cols{grid-template-columns:1fr 1fr}
  /* Kategorie-Sidebar mobil: oberhalb des Inhalts und einklappbar */
  .ka-main.has-side .ka-main__grid{grid-template-columns:1fr}
  .ka-side{order:-1; padding:0; background:none; border:0}
  .ka-side__toggle{display:flex; width:100%; justify-content:space-between; align-items:center; background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:12px 16px; font:inherit; font-weight:800; color:var(--navy); cursor:pointer}
  .ka-side__toggle .chev{transition:transform .2s}
  .ka-side__toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .ka-side__body{display:none; background:var(--bg-soft); border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; padding:14px 16px}
  .ka-side__body.open{display:block}
  .ka-side__title{display:none}
}

@media (max-width:820px){
  /* Mobile Navigation: einklappbar */
  .ka-burger{display:flex}
  .ka-nav{display:none}
  .ka-nav.open{display:block}
  .ka-nav .ka-wrap > ul{flex-direction:column; align-items:stretch; padding-block:8px}
  .ka-nav .ka-wrap > ul > li > a.menu-current::after{display:none}
  .ka-nav li ul{position:static; display:none; box-shadow:none; border:0; border-radius:0; padding:2px 0 8px 16px; min-width:0; column-width:auto}
  .ka-nav li.open > ul{display:block}
  .ka-nav li > a{display:flex; justify-content:space-between; align-items:center}
  .ka-navsub-toggle{display:inline-block; margin-left:auto; border:0; background:none; color:var(--navy); font-size:22px; line-height:1; padding:0 6px; cursor:pointer}
}

@media (max-width:560px){
  .ka-topbar__in{flex-wrap:wrap; gap:12px}
  .ka-utility{margin-left:auto}
  .ka-uitem span{display:none}
  .ka-pageintro__in{gap:16px}
  .ka-pageintro__mascot{width:78px}
  .ka-footer__in{flex-direction:column}
}

@media print{
  .ka-nav, .ka-hero__splash, .ka-burger, .ka-utility, .ka-hero__collage, .ka-footer__nav{display:none}
  body{color:#000}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
/* =================================================================
   LEGACY-GALERIEN AUS DER ALTEN WEBSITE
   Alte PHP-Ausgaben mit #gallery / .gallery-item / .gallery-text
   ================================================================= */

.ka-content #gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}

.ka-content #gallery > .gallery-item{
  margin:0;
  padding:0;
  list-style:none;
}

.ka-content #gallery > .gallery-item::before{
  display:none;
}

.ka-content #gallery .gallery-text{
  height:100%;
  padding:20px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);

  display:flex;
  flex-direction:column;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.ka-content #gallery .gallery-text:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
  border-color:var(--line-strong);
}

.ka-content #gallery .gallery-text p{
  margin:0 0 12px;
}

.ka-content #gallery .gallery-text p:first-child{
  margin-bottom:8px;
}

.ka-content #gallery .gallery-text p:first-child a{
  font-family:var(--display);
  font-size:19px;
  font-weight:700;
  color:var(--navy);
}

.ka-content #gallery .gallery-text p:first-child a:hover{
  color:var(--pink);
  text-decoration:none;
}

.ka-content #gallery .gallery-text p:not(:first-child){
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
}

.ka-content #gallery .button,
.ka-content #gallery .button.medium,
.ka-content #gallery .button-style1{
  margin-top:auto;
  align-self:flex-start;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:92px;
  padding:8px 15px;

  background:var(--pink);
  color:#fff;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 3px 0 var(--pink-strong);
}

.ka-content #gallery .button:hover{
  background:var(--pink-strong);
  color:#fff;
  text-decoration:none;
}

.ka-content #gallery .kids_clear{
  display:none;
}

/* Tablet */
@media (max-width:900px){
  .ka-content #gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Smartphone */
@media (max-width:600px){
  .ka-content #gallery{
    grid-template-columns:1fr;
    gap:14px;
  }

  .ka-content #gallery .gallery-text{
    padding:17px;
  }
}
/* =========================================================
   FILTER-BUTTONS ÜBERSICHT
   ========================================================= */

.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 0 0 2rem;
    padding: 0;
}

.gallery-filter-btn {
    appearance: none;
    -webkit-appearance: none;

    border: 1px solid rgba(40, 55, 130, .12);
    background: #fff;
    color: var(--navy);

    border-radius: 999px;

    padding: .72rem 1.1rem;

    font-family: 'Fredoka', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 3px 10px rgba(28, 40, 90, .06);

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.gallery-filter-btn:hover {
    color: var(--pink);
    border-color: rgba(255, 45, 135, .35);
    box-shadow: 0 5px 14px rgba(28, 40, 90, .10);
    transform: translateY(-1px);
}

.gallery-filter-btn.active {
    background: var(--pink);
    color: #fff;
    border-color: var(--pink);

    box-shadow:
        0 4px 0 #c91f68,
        0 7px 16px rgba(255, 45, 135, .18);
}

.gallery-filter-btn:focus-visible {
    outline: 3px solid rgba(255, 45, 135, .18);
    outline-offset: 3px;
}

@media (max-width: 600px) {

    .gallery-filter {
        gap: .5rem;
        margin-bottom: 1.5rem;
    }

    .gallery-filter-btn {
        padding: .65rem .9rem;
        font-size: .88rem;
    }
}
/* =========================================================
   ALTE BILD-TABELLEN ALS MODERNE MOTIV-GALERIE
   GLOBAL INNERHALB .ka-content
   ========================================================= */

/* Jede alte Tabelle wird zum Grid */
.ka-content table {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;

    width: 100% !important;
    margin: 1.8rem 0 2.2rem !important;
    padding: 0 !important;

    border: 0 !important;
    border-collapse: initial !important;
    border-spacing: 0 !important;
}

/* Alte Tabellenstruktur auflösen */
.ka-content table tbody,
.ka-content table tr {
    display: contents !important;
}

/* Eine Tabellenzelle = eine moderne Karte */
.ka-content table td {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: auto !important;
    min-width: 0;
    min-height: 245px;

    padding: 1rem 1rem 1.1rem !important;

    background: #fff;
    border: 1px solid var(--line) !important;
    border-radius: 18px;

    box-shadow: var(--shadow);

    text-align: center !important;
    vertical-align: top !important;

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.ka-content table td:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(255, 45, 135, .28);
}


/* =========================================================
   BILDER
   ========================================================= */

.ka-content table td img.thumbnail {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 145px !important;
    max-height: 170px !important;

    margin: 0 auto !important;
    padding: .35rem !important;

    object-fit: contain;

    background: #fff;

    border: 1px solid rgba(40, 55, 130, .12) !important;
    border-radius: 12px !important;

    box-shadow: 0 3px 10px rgba(28, 40, 90, .06);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.ka-content table td:hover img.thumbnail {
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(28, 40, 90, .10);
}


/* =========================================================
   BILDLINK
   Bild und Text getrennt
   ========================================================= */

.ka-content table td > a:first-child {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 175px;

    margin: 0 0 .8rem !important;

    background: #fafbff;
    border-radius: 14px;

    text-decoration: none !important;
}


/* =========================================================
   TITEL
   ========================================================= */

.ka-content table td > a:last-child {
    margin-top: auto;

    color: var(--pink) !important;

    font-family: 'Fredoka', sans-serif;
    font-size: 1rem;
    font-weight: 600 !important;
    line-height: 1.3;

    text-decoration: none !important;
}

.ka-content table td > a:last-child:hover {
    color: #d91f73 !important;
}


/* Alten BR zwischen Bild und Titel entfernen */
.ka-content table td > br {
    display: none !important;
}


/* =========================================================
   ALTE WB-GALLERY
   Bild + Text teilweise im selben Link
   ========================================================= */

.ka-content table td > a:only-child {
    display: flex !important;
    flex-direction: column;
    align-items: center;

    width: 100%;

    color: var(--pink) !important;

    font-family: 'Fredoka', sans-serif;
    font-size: 1rem;
    font-weight: 600 !important;
    line-height: 1.3;

    text-decoration: none !important;
}

.ka-content table td > a:only-child img {
    margin-bottom: .8rem !important;
}

.ka-content table td > a:only-child:hover {
    color: #d91f73 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .ka-content table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

}

@media (max-width: 600px) {

    .ka-content table {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
        margin: 1.3rem 0 1.8rem !important;
    }

    .ka-content table td {
        min-height: 210px;
        padding: .75rem !important;
        border-radius: 15px;
    }

    .ka-content table td > a:first-child {
        min-height: 140px;
    }

    .ka-content table td img.thumbnail {
        max-width: 110px !important;
        max-height: 135px !important;
    }

    .ka-content table td > a:last-child,
    .ka-content table td > a:only-child {
        font-size: .9rem;
    }

}

@media (max-width: 420px) {

    .ka-content table {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   STARTSEITE
   ========================================================= */

.home-intro {
    max-width: 900px;
    margin: 0 0 2.8rem;
}

.home-intro h2,
.home-section > h2,
.home-highlight h2 {
    margin: 0 0 1rem;
    color: var(--navy);
}

.home-intro p,
.home-section p,
.home-highlight p {
    line-height: 1.7;
}

.home-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .5rem;
    padding: .8rem 1.25rem;

    background: var(--pink);
    color: #fff !important;

    border-radius: 999px;

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    text-decoration: none !important;

    box-shadow: 0 4px 0 #c91f68,
                0 8px 18px rgba(255, 45, 135, .18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.home-main-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #c91f68,
                0 10px 22px rgba(255, 45, 135, .22);
}


/* Abschnitte */

.home-section {
    margin: 3rem 0;
}


/* Karten */

.home-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 1.4rem;
}

.home-card {
    display: flex;
    flex-direction: column;

    padding: 1.35rem;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 18px;

    box-shadow: var(--shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.home-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(255, 45, 135, .25);
}

.home-card h3 {
    margin: 0 0 .65rem;

    color: var(--navy);

    font-family: 'Fredoka', sans-serif;
    font-size: 1.15rem;
    line-height: 1.3;
}

.home-card p {
    margin: 0 0 1rem;
}

.home-card > a {
    margin-top: auto;

    color: var(--pink) !important;

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    text-decoration: none !important;
}

.home-card > a:hover {
    text-decoration: underline !important;
}


/* Hervorgehobener Bereich */

.home-highlight {
    padding: 1.8rem 2rem;

    background: #fafbff;

    border: 1px solid var(--line);
    border-radius: 22px;

    box-shadow: 0 4px 16px rgba(28, 40, 90, .05);
}

.home-highlight-content {
    max-width: 900px;
}

.home-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.2rem;
}

.home-link-list a {
    display: inline-flex;
    padding: .65rem 1rem;

    background: #fff;
    color: var(--pink) !important;

    border: 1px solid rgba(255, 45, 135, .2);
    border-radius: 999px;

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    text-decoration: none !important;
}

.home-link-list a:hover {
    border-color: var(--pink);
}


/* Kostenlos-Bereich */

.home-free {
    padding: 1.6rem 1.8rem;

    background: #fff;

    border-left: 4px solid var(--pink);
    border-radius: 16px;

    box-shadow: 0 4px 14px rgba(28, 40, 90, .06);
}


/* Schnelllinks */

.home-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1.2rem;
}

.home-quick-links a {
    display: inline-flex;
    align-items: center;

    padding: .65rem 1rem;

    background: #fff;
    color: var(--navy) !important;

    border: 1px solid var(--line);
    border-radius: 999px;

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    text-decoration: none !important;

    box-shadow: 0 3px 10px rgba(28, 40, 90, .05);
}

.home-quick-links a:hover {
    color: var(--pink) !important;
    border-color: rgba(255, 45, 135, .35);
}


/* Responsive */

@media (max-width: 900px) {

    .home-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {

    .home-section {
        margin: 2.2rem 0;
    }

    .home-card-grid {
        grid-template-columns: 1fr;
        gap: .9rem;
    }

    .home-card {
        padding: 1.1rem;
        border-radius: 16px;
    }

    .home-highlight {
        padding: 1.3rem;
        border-radius: 18px;
    }

    .home-free {
        padding: 1.2rem;
    }

    .home-link-list,
    .home-quick-links {
        gap: .5rem;
    }

}/* =========================================================
   GALLERY – DETAILSEITEN
   ========================================================= */

.gallery-detail {
    margin: 1.5rem 0 3rem;
}


/* Hauptbereich */

.gallery-detail__main {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(280px, .85fr);
    gap: 1.5rem;
    align-items: stretch;
}


/* Bildkarte */

.gallery-detail__image-card {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 420px;

    padding: 1.25rem;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 20px;

    box-shadow: var(--shadow);
}

.gallery-detail__image-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    text-decoration: none;
}

.gallery-detail__image {
    display: block;

    max-width: 100%;
    max-height: 680px;

    width: auto;
    height: auto;

    object-fit: contain;
}

.gallery-detail__missing {
    color: var(--text-muted);
}


/* Textkarte */

.gallery-detail__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;

    padding: 1.6rem;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 20px;

    box-shadow: var(--shadow);
}

.gallery-detail__title {
    margin: 0 0 1rem;

    color: var(--navy);

    font-family: 'Fredoka', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.15rem);
    line-height: 1.25;
}

.gallery-detail__description {
    width: 100%;

    color: var(--text);
    line-height: 1.7;
}

.gallery-detail__description p:first-child {
    margin-top: 0;
}

.gallery-detail__description p:last-child {
    margin-bottom: 0;
}


/* Button */

.gallery-detail__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 1.4rem;
    padding: .78rem 1.15rem;

    background: var(--pink);
    color: #fff !important;

    border-radius: 999px;

    box-shadow:
        0 4px 0 #c91f68,
        0 7px 16px rgba(255,45,135,.18);

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.gallery-detail__open:hover {
    background: #e62579;
    color: #fff !important;

    transform: translateY(-1px);

    box-shadow:
        0 5px 0 #c91f68,
        0 9px 19px rgba(255,45,135,.22);
}


/* Varianten / Unterbilder */

.gallery-detail__variants {
    margin-top: 1.5rem;
    padding: 1.25rem;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 20px;

    box-shadow: var(--shadow);
}

.gallery-detail__variants h3 {
    margin: 0 0 1rem;

    color: var(--navy);

    font-family: 'Fredoka', sans-serif;
}

.gallery-detail__variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .8rem;
}

.gallery-detail__variant {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 110px;

    padding: .55rem;

    background: #fafbff;

    border: 1px solid var(--line);
    border-radius: 14px;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.gallery-detail__variant:hover {
    transform: translateY(-2px);

    border-color: rgba(255,45,135,.3);

    box-shadow: 0 6px 16px rgba(28,40,90,.08);
}

.gallery-detail__variant img {
    display: block;

    max-width: 100%;
    max-height: 125px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* Vorher / Position / Weiter */

.gallery-detail__nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 1rem;

    margin-top: 1.5rem;
    padding: 1rem 1.15rem;

    background: #fafbff;

    border: 1px solid var(--line);
    border-radius: 16px;
}

.gallery-detail__nav-prev {
    text-align: left;
}

.gallery-detail__nav-next {
    text-align: right;
}

.gallery-detail__nav a {
    color: var(--pink) !important;

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;

    text-decoration: none !important;
}

.gallery-detail__nav a:hover {
    text-decoration: underline !important;
}

.gallery-detail__position {
    color: var(--navy);

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;

    white-space: nowrap;
}


/* Zur Übersicht */

.gallery-detail__back {
    margin-top: 1rem;
    text-align: center;
}

.gallery-detail__back a {
    color: var(--navy) !important;

    font-weight: 600;
    text-decoration: none !important;
}

.gallery-detail__back a:hover {
    color: var(--pink) !important;
}


/* Responsive */

@media (max-width: 850px) {

    .gallery-detail__main {
        grid-template-columns: 1fr;
    }

    .gallery-detail__image-card {
        min-height: 0;
    }
}

@media (max-width: 600px) {

    .gallery-detail__image-card,
    .gallery-detail__info {
        padding: 1rem;
        border-radius: 17px;
    }

    .gallery-detail__nav {
        grid-template-columns: 1fr 1fr;
    }

    .gallery-detail__position {
        grid-column: 1 / -1;
        grid-row: 1;

        text-align: center;
    }

    .gallery-detail__nav-prev {
        grid-column: 1;
    }

    .gallery-detail__nav-next {
        grid-column: 2;
    }
}
/* =========================================================
   ALLGEMEINE FORMULARE
   ========================================================= */

.ka-content form {
    margin: 1.5rem 0;
    padding: 1.25rem 1.35rem;

    background: #fafbff;

    border: 1px solid var(--line);
    border-radius: 18px;

    box-shadow: var(--shadow);

    color: var(--text);
}


/* Labels */

.ka-content form label {
    display: inline-block;
    margin-bottom: .4rem;

    color: var(--navy);

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
}


/* Textfelder / Select / Textarea */

.ka-content form input[type="text"],
.ka-content form input[type="email"],
.ka-content form input[type="number"],
.ka-content form input[type="date"],
.ka-content form input[type="url"],
.ka-content form input[type="search"],
.ka-content form input[type="password"],
.ka-content form select,
.ka-content form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    padding: .72rem .85rem;

    background: #fff;
    color: var(--text);

    border: 1px solid var(--line);
    border-radius: 12px;

    font: inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/* Focus */

.ka-content form input[type="text"]:focus,
.ka-content form input[type="email"]:focus,
.ka-content form input[type="number"]:focus,
.ka-content form input[type="date"]:focus,
.ka-content form input[type="url"]:focus,
.ka-content form input[type="search"]:focus,
.ka-content form input[type="password"]:focus,
.ka-content form select:focus,
.ka-content form textarea:focus {
    outline: none;

    border-color: rgba(255,45,135,.55);

    box-shadow:
        0 0 0 3px rgba(255,45,135,.12);
}


/* Textarea */

.ka-content form textarea {
    min-height: 130px;
    resize: vertical;
}


/* Select */

.ka-content form select {
    appearance: none;
    -webkit-appearance: none;

    padding-right: 2.4rem;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2328347e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right .8rem center;

    cursor: pointer;
}


/* Checkboxen / Radio */

.ka-content form input[type="checkbox"],
.ka-content form input[type="radio"] {
    accent-color: var(--pink);

    width: 18px;
    height: 18px;

    vertical-align: middle;
    cursor: pointer;
}


/* Buttons */

.ka-content form input[type="submit"],
.ka-content form input[type="button"],
.ka-content form button {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 999px;

    padding: .75rem 1.15rem;

    background: var(--pink);
    color: #fff !important;

    font-family: 'Fredoka', sans-serif;
    font-size: .95rem;
    font-weight: 600;

    text-decoration: none !important;

    cursor: pointer;

    box-shadow:
        0 4px 0 #c91f68,
        0 7px 16px rgba(255,45,135,.18);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.ka-content form input[type="submit"]:hover,
.ka-content form input[type="button"]:hover,
.ka-content form button:hover {
    background: #e62579;

    transform: translateY(-1px);

    box-shadow:
        0 5px 0 #c91f68,
        0 9px 18px rgba(255,45,135,.22);
}


/* Disabled */

.ka-content form input:disabled,
.ka-content form select:disabled,
.ka-content form textarea:disabled,
.ka-content form button:disabled {
    opacity: .55;
    cursor: not-allowed;
}


/* Kleine Hilfstexte */

.ka-content form small {
    color: var(--text-muted, #6f7285);
}


/* Abstände zwischen typischen Elementen */

.ka-content form p {
    margin: 0 0 1rem;
}

.ka-content form p:last-child {
    margin-bottom: 0;
}


/* Responsive */

@media (max-width: 600px) {

    .ka-content form {
        padding: 1rem;
        border-radius: 16px;
    }

    .ka-content form input[type="submit"],
    .ka-content form input[type="button"],
    .ka-content form button {
        width: 100%;
    }
}
.generator-form {
    display: block;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.form-image-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.25rem;
}

.form-image-option {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 170px;
    margin: 0 !important;
    padding: .9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(28,40,90,.05);
    cursor: pointer;
}

.form-image-option:hover {
    transform: translateY(-2px);
    border-color: rgba(255,45,135,.3);
    box-shadow: 0 7px 18px rgba(28,40,90,.08);
}

.form-image-option img {
    display: block;
    max-width: 100%;
    max-height: 115px;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: none !important;
}

.form-choice-inline {
    display: flex !important;
    align-items: center;
    gap: .55rem;
}

.form-hint {
    color: var(--text-muted, #6f7285);
    font-size: .9rem;
}

@media (max-width: 900px) {
    .form-image-grid {
        grid-template-columns: repeat(3, minmax(110px, 1fr));
    }
}

@media (max-width: 650px) {
    .form-image-grid {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }

    .form-row {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .form-image-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   FORMULAR – NAMENLISTEN / TEXT-GRIDS
   ========================================================= */

.form-name-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: .8rem 1rem;
    margin: 1rem 0 1.25rem;
}

.form-name-field {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    margin: 0 !important;
}

.form-name-field span {
    color: var(--navy);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    text-align: right;
}

.form-name-field input {
    width: 100%;
    min-width: 0;
}

@media (max-width: 850px) {
    .form-name-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 520px) {
    .form-name-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   GENERATOR – ABSCHNITTE
   ========================================================= */

.generator-section {
    margin: 2rem 0 3rem;
}

.generator-section > h3 {
    margin-bottom: .4rem;
    color: var(--navy);
}


/* =========================================================
   FORMULAR – VORSCHAUBILD
   ========================================================= */

.form-preview {
    display: flex;
    justify-content: center;

    margin: 1rem 0 1.25rem;
    padding: 1rem;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 16px;
}

.form-preview img {
    display: block;

    max-width: 320px;
    max-height: 240px;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow: none !important;
}


/* =========================================================
   FORMULAR – FARBAUSWAHL
   ========================================================= */

.form-color-fieldset {
    margin: 1.25rem 0;
    padding: 0;

    border: 0;
}

.form-color-fieldset legend {
    margin-bottom: .75rem;

    color: var(--navy);

    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
}

.form-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.form-color-option {
    position: relative;

    display: inline-flex !important;
    align-items: center;

    gap: .4rem;

    margin: 0 !important;
    padding: .4rem .6rem;

    background: #fff;

    border: 1px solid var(--line);
    border-radius: 999px;

    cursor: pointer;
}

.form-color-option:hover {
    border-color: rgba(255,45,135,.35);
}

.form-color-option input {
    margin: 0;
}

.form-color-swatch {
    display: block;

    width: 28px;
    height: 28px;

    border: 1px solid rgba(40,55,130,.15);
    border-radius: 50%;
}

.form-color-label {
    color: var(--text);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
}

@media (max-width: 600px) {

    .form-preview img {
        max-width: 100%;
    }

    .form-color-option {
        padding: .35rem .5rem;
    }

    .form-color-label {
        display: none;
    }
}
.form-appointments {
    display:grid;
    gap:.75rem;
    margin:1rem 0 1.5rem;
}

.form-appointment-row {
    display:grid;
    grid-template-columns:auto 90px minmax(0,1fr);
    align-items:center;
    gap:.75rem;
}

.form-appointment-row label {
    color:var(--navy);
    font-family:'Fredoka',sans-serif;
    font-weight:600;
}

.form-appointment-row select,
.form-appointment-row input {
    width:100%;
    min-width:0;
}

@media(max-width:600px) {
    .form-appointment-row {
        grid-template-columns:45px 75px minmax(0,1fr);
        gap:.5rem;
    }
}
.calendar-form-layout {
    display:grid;
    grid-template-columns:minmax(300px, 320px) minmax(0,1fr);
    gap:2rem;
    align-items:start;
}

.calendar-ad {
    min-height:250px;
}

.calendar-form-box {
    min-width:0;
}

@media(max-width:800px) {
    .calendar-form-layout {
        grid-template-columns:1fr;
    }
}
.calendar-form-layout {
    display:grid;
    grid-template-columns:minmax(300px,320px) minmax(0,1fr);
    gap:2rem;
    align-items:start;
}

.calendar-ad {
    min-height:250px;
}

.form-week-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.85rem 1rem;
    margin:1rem 0 1.25rem;
}

.form-week-field {
    display:flex!important;
    flex-direction:column;
    gap:.4rem;
    margin:0!important;
}

.form-week-field span {
    color:var(--navy);
    font-family:'Fredoka',sans-serif;
    font-weight:600;
}

.form-week-field textarea {
    width:100%;
    min-height:74px;
    resize:vertical;
}

@media(max-width:800px) {
    .calendar-form-layout {
        grid-template-columns:1fr;
    }

    .form-week-grid {
        grid-template-columns:1fr;
    }
}
.form-week-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.85rem 1rem;
    margin:1rem 0 1.25rem;
}

.form-week-field {
    display:flex!important;
    flex-direction:column;
    gap:.4rem;
    margin:0!important;
}

.form-week-field span {
    color:var(--navy);
    font-family:'Fredoka',sans-serif;
    font-weight:600;
}

.form-week-field textarea {
    width:100%;
    min-height:82px;
    resize:vertical;
}

@media(max-width:700px) {
    .form-week-grid {
        grid-template-columns:1fr;
    }
}
/* News Übersicht */
.news-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin:28px 0;
}

.news-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px 24px;
  transition:transform .18s ease, box-shadow .18s ease;
}

.news-card:hover{
  transform:translateY(-2px);
}

.news-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:12px;
}

.news-card-title{
  margin:0 !important;
  font-family:var(--display);
  font-size:21px !important;
  line-height:1.25;
}

.news-card-title a{
  color:var(--navy);
  text-decoration:none;
}

.news-card-title a:hover{
  color:var(--pink);
}

.news-card-date{
  flex:0 0 auto;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.news-card-text{
  color:var(--ink);
  line-height:1.65;
}

.news-card-more{
  margin-top:14px;
}

.news-card-more a{
  color:var(--pink);
  font-weight:800;
  text-decoration:none;
}

.news-card-more a:hover{
  color:var(--pink-strong);
}

.news-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:28px 0;
  font-weight:700;
}

@media(max-width:760px){
  .news-list{
    grid-template-columns:1fr;
  }

  .news-card-head{
    display:block;
  }

  .news-card-date{
    display:block;
    margin-top:6px;
  }
}
/* News Detailseite */
.news-detail{
  max-width:900px;
  margin:24px auto 40px;
}

.news-detail-head{
  margin-bottom:20px;
}

.news-detail-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  margin-bottom:14px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.news-detail-breadcrumb a{
  color:var(--navy);
  text-decoration:none;
}

.news-detail-breadcrumb a:hover{
  color:var(--pink);
}

.news-detail h1{
  margin:0 0 10px;
  color:var(--navy);
  font-family:var(--display);
  font-size:clamp(28px,4vw,42px);
  line-height:1.15;
}

.news-detail-meta{
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.news-detail-content{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:28px 30px;
  color:var(--ink);
  line-height:1.75;
}

.news-detail-content p:first-child{
  margin-top:0;
}

.news-detail-content p:last-child{
  margin-bottom:0;
}

.news-detail-content img{
  max-width:100%;
  height:auto;
  border-radius:12px;
}

.news-detail-content a{
  color:var(--pink);
  font-weight:700;
}

.news-detail-footer{
  margin-top:20px;
}

@media(max-width:700px){
  .news-detail-content{
    padding:20px;
  }
}
/* =================================================================
   MOTIV-/AUSMALBILD-SEITEN  (Blumen usw.)
   nutzt dieselben Tokens/Komponenten wie das uebrige Template
   ================================================================= */
.motiv-single{display:flex; gap:28px; align-items:flex-start; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); flex-wrap:wrap}
.motiv-single__media{flex:0 0 auto}
.motiv-single__img{display:block; max-width:320px; width:100%; height:auto; border:1px solid var(--line-strong); border-radius:10px; background:#fff}
.motiv-single__info{flex:1 1 260px; min-width:240px}
.motiv-single__text{margin:0 0 18px; font-size:16px; font-weight:600; color:var(--ink); line-height:1.6}
/* Button: hohe Spezifitaet, damit die allgemeine .ka-content a Regel (pink) ihn nicht ueberschreibt */
.ka-content a.motiv-btn,.motiv-btn{display:inline-block; background:var(--pink); color:#fff; font-family:var(--sans); font-weight:800; font-size:15px; padding:13px 26px; border-radius:999px; box-shadow:0 3px 0 var(--pink-strong); text-decoration:none}
.ka-content a.motiv-btn:hover,.motiv-btn:hover{background:var(--pink-strong); color:#fff; text-decoration:none}
.motiv-single__hint{margin:22px 0 0; color:var(--muted); font-size:13px; font-weight:600}
.motiv-single__license{margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; line-height:1.5}
.motiv-single__license a{color:var(--pink); font-weight:700}

.motiv-grid__title{font-family:var(--display); font-weight:700; color:var(--navy); font-size:clamp(20px,2.2vw,26px); margin:30px 0 14px}
.motiv-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:16px}
.motiv-card{margin:0}
.motiv-card__link{display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 10px; transition:transform .15s, box-shadow .15s, border-color .15s; height:100%}
.motiv-card__link:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--pink)}
.motiv-card__thumb{display:block}
.motiv-card__thumb img{display:block; width:auto; max-width:100%; height:auto; border:1px solid var(--line-strong); border-radius:6px; background:#fff}
.motiv-card__cap{margin-top:9px; font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.3}
.motiv-card__link:hover .motiv-card__cap{color:var(--pink)}

@media (max-width:560px){
  .motiv-single{gap:18px; padding:16px}
  .motiv-single__img{max-width:100%}
  .motiv-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
}