/* ElisaKeramik – gemeinsame Stile für alle Seiten
   Schriften, Farben und Grundformen stammen unverändert von der bisherigen
   Startseite (Stand 24.09.2026). Neu dazugekommen sind Navigation, Kursliste,
   Kurskarten, Kursseiten sowie Impressum und Datenschutz als eigene Seiten. */

/* ── Schriften ─────────────────────────────────────────────── */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('schriften/cormorant.d80df8ff.woff2') format('woff2');
  font-weight:300 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Parisienne';
  src:url('schriften/parisienne.cf3c285d.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url('schriften/instrument.2ee17598.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ── Farbtoken: Aquarell-Palette der Marke ─────────────────── */
:root{
  --ground:#F7F2EA;
  --ground-sunk:#EFE8DC;
  --paper:#FDFBF6;
  --ink:#3E5866;
  --ink-2:#536873;
  --ink-3:#59676F;
  --line:#DFD5C6;
  --line-soft:#EAE2D5;
  --accent:#527080;       /* für Text - dunkel genug für Kontrast */
  --accent-voll:#5E7D8C;  /* für Flächen und Symbole */
  --accent-wash:#E3EAEE;
  --sand:#B8946E;         /* für grosse Schrift */
  --sand-text:#8E6B45;    /* für kleine Schrift */
  --sand-voll:#C3A183;
  --sand-wash:#F1E7DA;
  --wash-blau:rgba(94,125,140,.13);
  --wash-sand:rgba(195,161,131,.17);
  --falter:#8F8D8E;       /* Schmetterling des Logos im Flug, ausserhalb des Kreises */

  --display:'Cormorant Garamond',Georgia,'Palatino Linotype',serif;
  --schreib:'Parisienne','Segoe Script','Brush Script MT',cursive;
  --sans:'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;

  --gap:clamp(16px,2.4vw,30px);
  --pad:clamp(20px,5vw,64px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#26343B;
    --ground-sunk:#1E2A30;
    --paper:#2E3E46;
    --ink:#F2ECE2;
    --ink-2:#C6D0D6;
    --ink-3:#9DABB2;
    --line:#3C4E58;
    --line-soft:#33434C;
    --accent:#A3C3D1;
    --accent-voll:#7EA3B4;
    --accent-wash:#2C3D46;
    --sand:#D8B992;
    --sand-text:#D8B992;
    --sand-voll:#B08F6C;
    --sand-wash:#33403F;
    --wash-blau:rgba(140,180,200,.10);
    --wash-sand:rgba(200,170,135,.10);
    --falter:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --ground:#26343B;
  --ground-sunk:#1E2A30;
  --paper:#2E3E46;
  --ink:#F2ECE2;
  --ink-2:#C6D0D6;
  --ink-3:#9DABB2;
  --line:#3C4E58;
  --line-soft:#33434C;
  --accent:#A3C3D1;
  --accent-voll:#7EA3B4;
  --accent-wash:#2C3D46;
  --sand:#D8B992;
  --sand-text:#D8B992;
  --sand-voll:#B08F6C;
  --sand-wash:#33403F;
  --wash-blau:rgba(140,180,200,.10);
  --wash-sand:rgba(200,170,135,.10);
  --falter:#FFFFFF;
}

/* ── Grundlagen ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.68;
  font-synthesis-weight:none;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
/* <picture> bietet dem Browser die leichtere WebP-Datei an (JPEG als Rückfall).
   Für das Layout zählt weiter nur das Bild darin. */
picture{display:contents;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent-voll);outline-offset:3px;border-radius:2px;}
/* Was das Skript aus- oder einblendet, muss wirklich verschwinden - auch
   wenn eine Regel weiter unten dem Element ein display gibt. */
[hidden]{display:none !important;}

/* Weiche Aquarellflächen, wie auf Flyer und Visitenkarte */
.aquarell{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vw 42vw at 4% -8%,  var(--wash-blau), transparent 62%),
    radial-gradient(46vw 34vw at 102% 12%, var(--wash-sand), transparent 62%),
    radial-gradient(52vw 40vw at 96% 96%, var(--wash-blau), transparent 62%),
    radial-gradient(40vw 30vw at -6% 78%, var(--wash-sand), transparent 62%);
}
.page{position:relative;z-index:1;}

.wrap{
  width:min(1180px,100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Sprunglink für Tastatur und Screenreader: erst sichtbar, wenn er den Fokus hat */
.sprung{
  position:absolute;left:-9999px;top:0;z-index:20;
  background:var(--paper);color:var(--ink);
  padding:.7em 1.1em;border-radius:2px;
  font-weight:600;text-decoration:none;
}
.sprung:focus{left:12px;top:12px;}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-3);
  margin:0;
}
.schreib{
  font-family:var(--schreib);
  font-weight:400;
  color:var(--sand);
  line-height:1.35;
  margin:0;
}
.display{
  font-family:var(--display);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.005em;
  text-wrap:balance;
  margin:0;
}
.nowrap{white-space:nowrap;}

/* ── Knöpfe und Textlinks ──────────────────────────────────── */
/* Fläche in --accent statt --accent-voll: Nur so erreicht die helle Schrift
   darauf den Kontrast, den kleine Schrift braucht (4,5 : 1). */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  letter-spacing:.005em;line-height:1.25;
  color:var(--paper);background:var(--accent);
  border:0;border-radius:2px;
  padding:.85em 1.5em;
  text-decoration:none;cursor:pointer;
  transition:background .2s;
}
.knopf:hover{background:var(--ink);}
.knopf svg{width:1.05em;height:1.05em;flex:none;}
.knopf-rand{
  color:var(--accent);background:transparent;
  box-shadow:inset 0 0 0 1px var(--accent-voll);
}
.knopf-rand:hover{background:var(--accent-wash);}
.pfeil-link{
  color:var(--accent);font-weight:600;text-decoration:none;
}
.pfeil-link:hover{text-decoration:underline;text-underline-offset:4px;}

/* ── Kopfzeile ─────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 24px;flex-wrap:wrap;
  padding-block:clamp(16px,2.6vw,26px) clamp(14px,2vw,22px);
  border-bottom:1px solid var(--line);
}
.mark{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;
}
/* Das runde Logo steht auf jeder Seite oben links vor dem Schriftzug. */
.mark-bild{
  --l:clamp(42px,4.4vw,54px);
  position:relative;display:block;flex:none;
  width:var(--l);height:var(--l);
}
.mark-logo{display:block;width:100%;height:100%;}

/* Der Schmetterling des Logos fliegt kurz hinaus, wenn die Maus das Logo
   berührt (skript.js setzt dafür .fliegt). Solange er unterwegs ist, deckt ein
   grauer Fleck den gezeichneten Schmetterling im Logo ab; am Ende sitzt der
   fliegende genau wieder an seiner Stelle. Lage und Größe in Prozent des Logos
   (im Original 376 px: Schmetterling bei x 106, y 33, 62 x 76 px). */
.falter-fleck,
.falter{
  position:absolute;left:28.19%;top:8.78%;width:16.49%;height:20.21%;
  opacity:0;pointer-events:none;
}
.falter-fleck{background:#ABA9AA;border-radius:28%;}
.falter span{
  display:block;width:100%;height:100%;
  background-color:#fff;
  -webkit-mask:url("bilder/logo-falter.png") center/100% 100% no-repeat;
          mask:url("bilder/logo-falter.png") center/100% 100% no-repeat;
}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .mark-bild.fliegt .falter-fleck{opacity:1;}
  .mark-bild.fliegt .falter{
    opacity:1;
    animation:falter-flug 2.6s cubic-bezier(.45,.05,.55,.95) both;
  }
  .mark-bild.fliegt .falter span{
    animation:falter-fluegel .14s ease-in-out infinite alternate,
              falter-farbe 2.6s linear both;
  }
}
/* Weg: nach oben aus dem Kreis, in einem Bogen nach rechts über den Schriftzug
   und zurück. Die Strecken sind Bruchteile der Logo-Breite (--l). */
@keyframes falter-flug{
  0%  {transform:translate(0,0) rotate(0deg) scale(1);}
  14% {transform:translate(calc(var(--l)*.10),calc(var(--l)*-.22)) rotate(14deg) scale(1.5);}
  34% {transform:translate(calc(var(--l)*.55),calc(var(--l)*-.34)) rotate(28deg) scale(2.6);}
  52% {transform:translate(calc(var(--l)*1.10),calc(var(--l)*-.16)) rotate(40deg) scale(3);}
  68% {transform:translate(calc(var(--l)*.85),calc(var(--l)*-.36)) rotate(-12deg) scale(2.8);}
  84% {transform:translate(calc(var(--l)*.30),calc(var(--l)*-.28)) rotate(-24deg) scale(1.9);}
  100%{transform:translate(0,0) rotate(0deg) scale(1);}
}
@keyframes falter-fluegel{
  from{transform:scaleX(1);}
  to{transform:scaleX(.35);}
}
/* Im Kreis weiß wie gezeichnet, außerhalb grau, damit er auf hellem Grund zu sehen ist */
@keyframes falter-farbe{
  0%,9%   {background-color:#fff;}
  16%,86% {background-color:var(--falter);}
  94%,100%{background-color:#fff;}
}
@media (prefers-reduced-motion:reduce){
  .mark-bild.fliegt .falter-fleck,
  .mark-bild.fliegt .falter{opacity:0;animation:none;}
}
.mark-wort{
  font-family:var(--display);
  font-weight:500;
  font-size:1.32rem;
  letter-spacing:.005em;
  line-height:1;
}
.wm-elisa{color:var(--ink);}
.wm-keramik{color:var(--sand);}
.top nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px clamp(16px,2.6vw,30px);
}
.top nav a{
  display:inline-flex;align-items:center;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--accent);text-decoration:none;
  padding-block:4px;
}
.top nav a:hover{text-decoration:underline;text-underline-offset:4px;}
/* Aktuelle Seite bzw. aktueller Bereich: in Sand und unterstrichen */
.top nav a[aria-current],
.top nav a.aktiv{
  color:var(--sand-text);
  text-decoration:underline;text-decoration-color:var(--sand-voll);
  text-underline-offset:6px;text-decoration-thickness:1px;
}
.top nav .ig-mini svg{width:19px;height:19px;display:block;}

/* ── Hero der Startseite ───────────────────────────────────── */
.hero{
  padding-block:clamp(38px,6vw,80px) clamp(36px,5vw,68px);
  display:flex;flex-direction:column;
  gap:clamp(28px,5vw,44px);
}
.hero-text{
  display:flex;flex-direction:column;
  gap:clamp(16px,2.2vw,24px);
  max-width:52rem;
}
/* Das Logo steht klein in der Kopfzeile jeder Seite. Im Hero der Startseite
   steht es zusaetzlich gross, weil die Schrift im Kreis klein nicht zu lesen
   ist. align-self ist noetig, weil es als Flex-Element sonst auf volle
   Spaltenbreite gezogen wuerde. */
.hero-logo{
  width:clamp(112px,13vw,158px);
  height:auto;
  align-self:flex-start;
}
.gruss{font-size:clamp(1.6rem,4vw,2.6rem);}
.wortmarke{
  font-size:clamp(3.1rem,10vw,6.4rem);
  letter-spacing:-.012em;
  line-height:1;
}
.claim{
  font-size:clamp(.74rem,1.5vw,.88rem);
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--sand-text);
  margin:0;
}
.lead{
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:var(--ink-2);
  margin:0;max-width:42ch;
}

.byline{margin-top:clamp(4px,1vw,10px);}
.byline-name{font-weight:600;letter-spacing:-.005em;line-height:1.3;}
.byline-role{font-size:.86rem;color:var(--ink-3);line-height:1.45;}

.status{
  display:flex;gap:13px;align-items:flex-start;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(15px,2.2vw,20px);
  max-width:52ch;
}
.dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--sand-voll);flex:none;margin-top:.6em;
  animation:puls 3.4s ease-out infinite;
}
@keyframes puls{
  0%{box-shadow:0 0 0 0 rgba(195,161,131,.55);}
  70%{box-shadow:0 0 0 12px rgba(195,161,131,0);}
  100%{box-shadow:0 0 0 0 rgba(195,161,131,0);}
}
.status p{margin:0;color:var(--ink-2);font-size:.95rem;}
.status strong{color:var(--ink);font-weight:600;}
.status a{color:var(--accent);font-weight:600;text-decoration:none;}
.status a:hover{text-decoration:underline;text-underline-offset:3px;}

/* Foto und Eröffnungshinweis bilden zusammen die rechte Spalte. Getrennt
   waere das Foto auf dem Desktop in einer 750 px hohen Zeile geschwommen. */
.hero-seite{
  display:flex;flex-direction:column;
  gap:clamp(20px,2.6vw,30px);
  max-width:320px;
}
.hero-bild{margin:0;}
.hero-bild img{
  width:100%;
  /* Kraeftig abgerundet, aber kein Kreis: In den Ecken liegt nur grauer
     Studiohintergrund, vom Motiv geht dadurch nichts verloren. Prozent statt
     Pixel, damit die Rundung bei jeder Groesse gleich stark wirkt.
     height:auto ist noetig, sonst gewinnt das height-Attribut aus dem HTML. */
  height:auto;
  border-radius:15%;
}
/* Ab hier zwei Spalten, wie auf dem Flyer: Logo links, Foto rechts, beide
   oben bündig. Der Eröffnungshinweis rückt unter das Foto - dadurch laufen
   beide Spalten etwa gleich weit nach unten. */
@media (min-width:901px){
  .hero{
    display:grid;
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    gap:clamp(30px,4.5vw,66px);
    align-items:start;
  }
  .hero-text{max-width:none;}
  .hero-seite{max-width:none;}
}

/* ── Abschnittskopf ────────────────────────────────────────── */
.kopf{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  padding-bottom:clamp(22px,3vw,34px);
}
.kopf h2{
  font-family:var(--schreib);
  font-weight:400;
  font-size:clamp(1.75rem,4vw,2.7rem);
  color:var(--sand);
  margin:0;line-height:1.25;
}
.kopf .strich{
  flex:1;height:1px;background:var(--line);min-width:24px;
}
.kopf .punkt{
  width:7px;height:7px;border-radius:50%;background:var(--sand-voll);flex:none;
}

/* ── Eröffnungsfeier ───────────────────────────────────────── */
.feier{
  border-top:1px solid var(--line);
  padding-block:clamp(34px,5vw,62px) clamp(30px,4.5vw,56px);
}
.feier-raster{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4.5vw,64px);
  align-items:start;
}
.feier-datum{
  font-size:clamp(1.85rem,4.2vw,2.8rem);
  line-height:1.1;
  margin:0;
}
.feier-datum span{display:block;color:var(--sand);}
.feier-text{margin:1.15em 0 0;color:var(--ink-2);max-width:34ch;}
.motto{
  margin:1.5em 0 0;
  font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--sand-text);
}
.programm{list-style:none;margin:0;padding:0;}
.programm li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2.2vw,26px);
  padding-block:clamp(12px,1.6vw,16px);
  border-top:1px solid var(--line-soft);
}
.programm li:last-child{border-bottom:1px solid var(--line-soft);}
.programm time{
  font-family:var(--display);
  font-size:1.2rem;font-weight:500;
  color:var(--sand);
  font-variant-numeric:tabular-nums;   /* Ziffern stehen untereinander */
  line-height:1.4;
}
.programm strong{display:block;font-weight:600;line-height:1.4;}
.programm span{display:block;font-size:.9rem;color:var(--ink-2);}

/* ── Kursprogramm auf der Startseite ───────────────────────── */
.kursprogramm{
  border-top:1px solid var(--line);
  padding-block:clamp(34px,5vw,62px) clamp(30px,4.5vw,56px);
}
.kursprogramm-raster{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4.5vw,64px);
  align-items:start;
}
.thema{
  font-size:clamp(1.85rem,4.2vw,2.8rem);
  line-height:1.1;
  margin:0;
}
.thema span{display:block;color:var(--sand);}
.kursprogramm-text{margin:1.15em 0 0;color:var(--ink-2);max-width:36ch;}
.kursprogramm-hinweis{margin:.9em 0 0;font-size:.9rem;color:var(--ink-3);max-width:36ch;}
.kursprogramm-hinweis a{color:var(--accent);font-weight:600;text-decoration:none;}
.kursprogramm-hinweis a:hover{text-decoration:underline;text-underline-offset:3px;}
.kursprogramm .knopf{margin-top:1.6em;}

/* ── Kursliste: Name, Eckdaten, Preis ──────────────────────── */
.kursliste-titel{
  margin:clamp(24px,3vw,32px) 0 6px;
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);line-height:1.4;
}
.kursliste-titel:first-child{margin-top:0;}
.kursliste{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line-soft);
}
.kursliste li{border-bottom:1px solid var(--line-soft);}
.kursliste a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:18px;align-items:center;
  padding:clamp(11px,1.5vw,15px) 10px;margin-inline:-10px;
  text-decoration:none;color:inherit;border-radius:3px;
  transition:background .2s;
}
.kursliste a:hover{background:var(--wash-sand);}
.kl-name{display:block;font-weight:600;line-height:1.35;}
.kl-info{display:block;font-size:.86rem;color:var(--ink-2);line-height:1.45;margin-top:2px;}
.kl-preis{
  font-family:var(--display);
  font-size:1.35rem;font-weight:500;
  color:var(--sand-text);
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;line-height:1;
}
/* Auf den Kursseiten: zwei Spalten, damit die Liste nicht endlos wird */
@media (min-width:761px){
  .kursliste-zwei{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(28px,4vw,56px);
  }
}

/* ── Angebote ──────────────────────────────────────────────── */
.angebote{padding-block:clamp(34px,5vw,62px) clamp(30px,4.5vw,56px);}
/* Drei Reihen - Symbol, Überschrift, Text - die sich über alle Karten hinweg
   ausrichten. Ohne das stünden die Beschreibungen auf verschiedenen Höhen,
   weil eine Überschrift drei Zeilen braucht und die anderen nur eine. */
.leistungen{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  gap:clamp(34px,5vw,58px);
}
.leistung{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3.5vw,42px);
  align-items:start;
  padding-top:clamp(26px,3.5vw,40px);
  border-top:1px solid var(--line-soft);
}
.leistung:first-child{padding-top:0;border-top:0;}
.leistung-kopf{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;
}
.nummer{
  font-family:var(--display);
  font-size:1.3rem;font-weight:500;
  color:var(--sand);line-height:1;
  font-variant-numeric:tabular-nums;
}
.leistung h2{
  font-family:var(--sans);
  font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--accent);
  margin:0;line-height:1.4;
}
.leistung-unter{
  margin:.5em 0 0;
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--sand-text);
}
.leistung p:not(.leistung-unter){
  margin:1em 0 0;
  color:var(--ink-2);
  max-width:62ch;
}
.symbol{
  width:clamp(72px,7vw,88px);height:clamp(72px,7vw,88px);
  border-radius:50%;
  display:grid;place-items:center;
  flex:none;
}
.symbol svg{width:46%;height:46%;stroke:var(--paper);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.symbol-1{background:var(--accent-voll);}
.symbol-2{background:var(--sand-voll);}
.symbol-3{background:var(--accent-voll);opacity:.72;}
.symbol-4{background:var(--sand-voll);opacity:.82;}

/* Die drei Aspekte unter der Entwicklungsbegleitung */
.saeulen{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,38px);
  margin-top:clamp(24px,3vw,34px);
  padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line-soft);
  max-width:62ch;
}
.saeulen h2,
.saeulen h3{
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);
  margin:0 0 .8em;line-height:1.4;
}
.saeulen p{margin:0 !important;font-size:.88rem;}
.wachsen{
  margin-top:clamp(20px,2.6vw,28px) !important;
  font-family:var(--schreib);
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  color:var(--sand);
}

/* ── Angebote: Auswahl und Unterseiten ─────────────────────── */
/* Übersicht: fünf Karten. Drei stehen in einer Reihe, die übrigen zwei mittig
   darunter - so bleibt am Rand keine Lücke stehen. */
.wahl{
  --wahl-gap:clamp(22px,3vw,36px);
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--wahl-gap);
}
.wahl > li{flex:0 1 100%;}
@media (min-width:640px){ .wahl > li{flex-basis:calc((100% - var(--wahl-gap)) / 2);} }
@media (min-width:1000px){ .wahl > li{flex-basis:calc((100% - 2 * var(--wahl-gap)) / 3);} }
.wahl .karte-bild{aspect-ratio:4/3;}
.karte-kopf{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 2px;
}
.karte-nummer{
  font-family:var(--display);font-size:1.2rem;font-weight:500;
  color:var(--sand);line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.karte-unter{
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--sand-text);line-height:1.45;
}
.karte-mehr{
  margin:auto 0 0;padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:.9rem;font-weight:600;color:var(--accent);
}

/* Unterseiten: Symbol und Nummer über dem Titel, wie auf der Übersicht */
.angebot-marke{display:flex;align-items:center;gap:14px;margin:0;}
.angebot-marke .symbol{width:54px;height:54px;}
.angebot-text{display:flex;flex-direction:column;gap:1em;}
.angebot-text p{margin:0;color:var(--ink-2);max-width:62ch;}
.angebot-text p:first-child{font-size:clamp(1.06rem,1.4vw,1.16rem);color:var(--ink);}
.angebot-text strong{color:var(--ink);font-weight:600;}
/* Langer Titel (Entwicklungsbegleitung): kleiner, damit er auch auf dem Handy passt */
.kurs-titel.lang .display{font-size:clamp(2.1rem,4.6vw,3.4rem);}
.kurs-info .kursliste-titel{margin:0 0 -8px;}
.kurs-info .knopf{align-self:flex-start;}
.kl-pfeil{color:var(--accent);}
/* Entwicklungsbegleitung: die drei Aspekte über die ganze Breite */
.angebot-mehr{
  border-top:1px solid var(--line);
  padding-block:clamp(34px,5vw,62px) clamp(36px,5vw,64px);
}
.angebot-mehr .saeulen{max-width:none;margin-top:0;padding-top:0;border-top:0;}
.angebot-mehr .saeulen p{color:var(--ink-2);font-size:.95rem;}

/* Events: Kopf mit Überblick, Abschnitte, Fotoreihe und Babyparty-Pakete */
.angebot-kopf{
  padding-block:clamp(18px,3vw,32px) clamp(30px,4.5vw,52px);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,40px);
}
.angebot-kopf-text{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(14px,2vw,20px);
}
.angebot-kopf .lead{max-width:56ch;}
@media (min-width:861px){
  .angebot-kopf{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    column-gap:clamp(36px,5vw,72px);
    align-items:end;
  }
}
/* Überblick: die drei Events mit Preis, jede Zeile springt zum Abschnitt */
.event-index{
  background:var(--paper);
  border-radius:14px;
  padding:clamp(18px,2.4vw,24px) clamp(20px,2.8vw,28px) clamp(8px,1.2vw,12px);
  box-shadow:0 0 0 1px var(--line-soft),0 22px 44px -36px rgba(46,66,78,.5);
}
.event-index .kursliste-titel{margin:0 0 4px;}
.event-index .kursliste{border-top:0;}
.event-index .kursliste li:last-child{border-bottom:0;}
.kl-preis small{
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  color:var(--ink-2);letter-spacing:.02em;
}
.event{
  padding-block:clamp(28px,4vw,48px);
  scroll-margin-top:12px;
}
.event-zwei{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,40px);
}
@media (min-width:861px){
  .event-zwei{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(36px,5vw,72px);
    align-items:start;
  }
}
.event-lead{
  margin:0 0 clamp(24px,3.4vw,36px);max-width:60ch;
  font-size:clamp(1.06rem,1.4vw,1.16rem);color:var(--ink);
}
.angebot-text a{color:var(--accent);font-weight:600;text-decoration:none;}
.angebot-text a:hover{text-decoration:underline;text-underline-offset:3px;}
/* Babybauch-Schale: drei Fotos gleich gross in einer Reihe (alle 3:4).
   Auf dem Handy steht das erste Foto über die ganze Breite, die beiden anderen darunter. */
.event-fotos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.8vw,24px);
  margin-bottom:clamp(28px,4vw,44px);
}
.event-fotos .stueck{
  position:relative;aspect-ratio:3/4;
  border-radius:14px;background:var(--ground-sunk);
}
.event-fotos .stueck img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media (max-width:560px){
  .event-fotos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .event-fotos .stueck:first-child{grid-column:1 / -1;aspect-ratio:4/5;}
}
/* Darunter: Text und Knopf links, Eckdaten rechts. Auf dem Handy steht der Knopf
   unter den Eckdaten. */
.event-detail{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"text" "eck" "knopf";
  gap:clamp(22px,3vw,30px);
}
.event-text{grid-area:text;display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);}
.event-detail .eckdaten{grid-area:eck;}
.event-knopf{grid-area:knopf;margin:0;}
@media (min-width:861px){
  .event-detail{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    grid-template-areas:"text eck" "knopf eck";
    grid-template-rows:auto 1fr;
    column-gap:clamp(36px,5vw,72px);
    align-items:start;
  }
}
.pakete{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,3vw,36px);
}
@media (min-width:861px){ .pakete{grid-template-columns:repeat(2,minmax(0,1fr));} }
.paket{
  display:flex;flex-direction:column;gap:16px;
  background:var(--paper);
  border-radius:14px;
  padding:clamp(22px,3vw,32px);
  box-shadow:0 0 0 1px var(--line-soft),0 22px 44px -34px rgba(46,66,78,.5);
}
/* Nebeneinander: Die Zeilen beider Pakete stehen auf gleicher Höhe, auch wenn
   ein Titel zweizeilig ist. */
@supports (grid-template-rows:subgrid){
  @media (min-width:861px){
    .pakete{grid-template-rows:repeat(7,auto);row-gap:16px;}
    .paket{display:grid;grid-row:span 7;grid-template-rows:subgrid;gap:16px;}
  }
}
.paket-vor{
  margin:0;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--sand-text);line-height:1.4;
}
.paket h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,1.85rem);
  line-height:1.15;letter-spacing:-.005em;
  margin:-8px 0 0;
}
.paket-eck{margin:-6px 0 0;font-size:.9rem;color:var(--ink-2);}
.paket-preise{
  display:flex;flex-wrap:wrap;gap:12px 32px;
  padding-block:14px;
  border-block:1px solid var(--line-soft);
}
.paket-preise p{margin:0;display:flex;flex-direction:column;gap:2px;}
.paket-betrag{
  font-family:var(--display);font-size:2rem;font-weight:500;
  color:var(--sand-text);line-height:1.1;
  font-variant-numeric:lining-nums;white-space:nowrap;
}
.paket-preise p span + span{font-size:.84rem;color:var(--ink-2);}
.paket-liste{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.6em;
}
.paket-liste li{
  position:relative;padding-left:1.25em;
  color:var(--ink-2);font-size:.95rem;line-height:1.55;
}
.paket-liste li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;
  background:var(--sand-voll);
}
.paket-liste strong{color:var(--ink);font-weight:600;}
.paket-tabelle{width:100%;border-collapse:collapse;margin-top:auto;}
.paket-tabelle caption{
  text-align:left;padding-bottom:6px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);line-height:1.4;
}
.paket-tabelle th,
.paket-tabelle td{padding:9px 0;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:baseline;}
.paket-tabelle tr:first-child > *{border-top:1px solid var(--line);}
.paket-tabelle th{font-weight:400;font-size:.92rem;color:var(--ink-2);}
.paket-tabelle td{
  text-align:right;white-space:nowrap;padding-left:16px;
  font-family:var(--display);font-size:1.3rem;font-weight:500;
  color:var(--sand-text);font-variant-numeric:lining-nums tabular-nums;
}
.paket-notiz{margin:0;font-size:.84rem;color:var(--ink-3);line-height:1.55;}
.endpreise{margin:14px 0 0;font-size:.84rem;color:var(--ink-3);}
/* „Für beide Pakete gilt“: sechs Punkte als Raster mit kleinen Überschriften */
.gilt{
  margin-top:clamp(28px,4vw,44px);
  background:var(--paper);
  border-radius:14px;
  padding:clamp(22px,3vw,34px);
  box-shadow:0 0 0 1px var(--line-soft);
}
.gilt h3{
  font-family:var(--schreib);font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);
  color:var(--sand);
  margin:0 0 clamp(14px,2vw,20px);line-height:1.25;
}
.gilt-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:18px clamp(22px,3vw,36px);
}
@media (min-width:561px){ .gilt-liste{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:961px){ .gilt-liste{grid-template-columns:repeat(3,minmax(0,1fr));} }
.gilt-liste li{
  padding-top:14px;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:.95rem;line-height:1.6;
}
.gilt-liste strong{
  display:block;margin-bottom:4px;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--sand-text);line-height:1.4;
}
/* Anfrage als Band: Text, dann E-Mail und Telefon als Knöpfe */
.anfrage-band{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:14px 16px;align-items:start;
  margin-top:clamp(22px,3vw,32px);
  background:var(--accent-wash);
  border-radius:18px 20px 20px 6px;
  padding:clamp(18px,2.6vw,24px) clamp(20px,3vw,30px);
}
.anfrage-band > svg{
  width:28px;height:28px;
  fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.anfrage-band p{margin:0;color:var(--ink-2);line-height:1.6;max-width:56ch;}
.anfrage-band strong{color:var(--ink);font-weight:600;}
.anfrage-knoepfe{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;}
.anfrage-knoepfe .knopf{flex:1 1 auto;}
.anfrage-band .knopf-rand{background:var(--paper);}
.anfrage-band .knopf-rand:hover{background:var(--ground);}
@media (min-width:861px){
  .anfrage-band{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;}
  .anfrage-knoepfe{grid-column:auto;}
  .anfrage-knoepfe .knopf{flex:none;}
}

/* ── Werkstatt ─────────────────────────────────────────────── */
.werkstatt{padding-block:clamp(30px,4.5vw,56px) clamp(40px,6vw,76px);}
.werkstatt .kopf h2{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  font-size:clamp(1.6rem,3.2vw,2.3rem);
  letter-spacing:-.008em;
}
/* Galerie: Mauerwerk aus Spalten, damit die Fotos in ihrem eigenen Format
   stehen bleiben und nichts beschnitten wird. */
.galerie{
  columns:4;
  column-gap:var(--gap);
}
/* Ein Foto, das sich per Klick gross zeigen laesst - in der Galerie der
   Startseite ebenso wie auf den Kursseiten. */
.stueck{
  display:block;width:100%;
  padding:0;border:0;background:none;
  cursor:zoom-in;
  border-radius:3px;
  overflow:hidden;
}
.stueck img{
  width:100%;height:auto;
  background:var(--ground-sunk);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.stueck:hover img,
.stueck:focus-visible img{transform:scale(1.035);}
@media (prefers-reduced-motion:reduce){
  .stueck img{transition:none;}
  .stueck:hover img,.stueck:focus-visible img{transform:none;}
}
.galerie .stueck{
  margin:0 0 var(--gap);
  break-inside:avoid;          /* Foto nie über den Spaltenumbruch reissen */
}
@media (max-width:900px){ .galerie{columns:3;} }
@media (max-width:620px){ .galerie{columns:2;} }

/* ── Galerie-Seite „Impressionen“ ──────────────────────────── */
.seitenkopf-knapp{padding-bottom:clamp(20px,3vw,34px);}
/* Atelier-Collage über die ganze Breite */
.galerie-kopfbild .stueck{
  border-radius:16px;
  box-shadow:0 26px 50px -34px rgba(46,66,78,.55);
}
/* Mosaik: gleich grosse Kacheln im Hochformat, zwei Bilder doppelt so gross.
   Die Fotos füllen ihre Kachel; den Ausschnitt legt object-position je Bild fest.
   18 Bilder ergeben so in vier, drei und zwei Spalten immer ein volles Rechteck. */
.mosaik{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:dense;
  gap:clamp(10px,1.8vw,24px);
}
.mosaik .stueck{
  position:relative;
  aspect-ratio:4/5;
  border-radius:12px;
  background:var(--ground-sunk);
}
.mosaik .stueck img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.mosaik .gross{
  grid-column-end:span 2;grid-row-end:span 2;
  aspect-ratio:auto;
}
.mosaik .gross.rechts{grid-column:-3 / -1;}
/* Bildtitel: erscheint beim Überfahren mit der Maus oder mit der Tastatur.
   Auf Geräten ohne Maus steht der Titel in der vergrösserten Ansicht. */
.mosaik .titel{
  position:absolute;left:0;right:0;bottom:0;
  padding:3em 14px 12px;
  background:linear-gradient(to top,rgba(26,36,42,.74),rgba(26,36,42,0));
  color:#FDFBF6;
  font-family:var(--sans);font-size:.82rem;font-weight:600;line-height:1.3;text-align:left;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.mosaik .stueck:hover .titel,
.mosaik .stueck:focus-visible .titel{opacity:1;transform:none;}
@media (hover:none){ .mosaik .titel{display:none;} }
@media (prefers-reduced-motion:reduce){ .mosaik .titel{transition:none;transform:none;} }
@media (max-width:900px){ .mosaik{grid-template-columns:repeat(3,minmax(0,1fr));} }
/* Hof-Impressionen unter dem Mosaik: drei Fotos in einer Reihe, auf jeder Breite,
   im vollen Hochformat 3:4 (so sind die Fotos aufgenommen). */
.werkstatt + .werkstatt{padding-top:0;}
.mosaik.mosaik-drei{grid-template-columns:repeat(3,minmax(0,1fr));}
.mosaik-drei .stueck{aspect-ratio:3/4;}
@media (max-width:620px){
  .mosaik{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Schmal: die beiden grossen Bilder über die ganze Breite */
  .mosaik .gross{grid-column:1 / -1;grid-row-end:span 1;aspect-ratio:1/1;}
}

/* ── Lupe: Einzelfoto gross ────────────────────────────────── */
.lupe{
  border:0;padding:0;background:transparent;
  width:min(1100px,100vw - 24px);
  max-width:none;max-height:calc(100vh - 24px);
  overflow:visible;
}
.lupe::backdrop{background:rgba(26,36,42,.88);}
/* Breite nach dem Bild richten, nicht nach dem Fenster - sonst stehen neben
   einem Hochformat breite Farbbalken. */
.lupe img{
  display:block;
  width:auto;height:auto;
  max-width:100%;
  max-height:calc(100vh - 120px);
  margin-inline:auto;
  border-radius:3px;
}
.lupe-text{
  margin:.9em 0 0;text-align:center;
  font-size:.88rem;color:#E8E2D7;
}
.lupe-zaehler{color:#9AA8AF;margin-left:.6em;}
.lupe button{
  position:absolute;
  border:0;border-radius:50%;
  width:46px;height:46px;
  background:rgba(20,28,33,.72);
  color:#F2ECE2;font-size:1.35rem;line-height:1;
  cursor:pointer;
  display:grid;place-items:center;
}
.lupe button:hover{background:rgba(20,28,33,.95);}
.lupe-zu{top:0;right:-58px;}
.lupe-vor{left:-58px;top:calc(50% - 23px);}
.lupe-zurueck{right:-58px;top:calc(50% - 23px);}
/* Auf schmalen Fenstern ist neben dem Bild kein Platz - dann auf dem Bild. */
@media (max-width:1240px){
  .lupe{width:min(1100px,100vw - 32px);}
  .lupe-zu{top:8px;right:8px;}
  .lupe-vor{left:8px;}
  .lupe-zurueck{right:8px;}
}
/* Nur ein Foto: Blättern ergibt keinen Sinn */
.lupe.einzeln .lupe-vor,
.lupe.einzeln .lupe-zurueck,
.lupe.einzeln .lupe-zaehler{display:none;}

/* ── Was du hier findest ───────────────────────────────────── */
.findest{
  border-top:1px solid var(--line);
  padding-block:clamp(40px,6vw,80px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,76px);
  align-items:center;
}
.liste{
  background:var(--sand-wash);
  border-radius:44% 56% 52% 48% / 8% 8% 8% 8%;
  padding:clamp(28px,4vw,46px) clamp(28px,4vw,50px);
}
.liste ul{margin:0;padding-left:1.15em;}
.liste li{
  margin-bottom:.55em;color:var(--ink-2);
  font-size:clamp(1rem,1.4vw,1.1rem);
}
.liste li:last-child{margin-bottom:0;}
.liste li::marker{color:var(--sand-voll);}
.einladung{font-size:clamp(1.5rem,3.4vw,2.35rem);}
.einladung ~ p{
  margin:1.4em 0 0;color:var(--ink-2);max-width:34ch;font-size:.95rem;
}
.einladung ~ p a{color:var(--accent);font-weight:600;text-decoration:none;}
.einladung ~ p a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ── Ort ───────────────────────────────────────────────────── */
.ort{
  border-top:1px solid var(--line);
  padding-block:clamp(40px,6vw,78px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
.adresse{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2rem,4.6vw,3.2rem);
  line-height:1.1;letter-spacing:-.01em;
  margin:.3em 0 0;
}
.adresse span{display:block;color:var(--sand);}
.ort-notiz{color:var(--ink-2);margin:0;max-width:34ch;}
/* Öffnungszeiten: je Zeile links der Tag, rechts die Zeit.
   Anfahrt (.wege): genauso, links der Ort, rechts die Fahrzeit. */
.zeiten,.wege{margin:.75em 0 1.15em;max-width:34ch;}
.zeiten div,.wege div{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;
  gap:.1em 1.4em;padding-block:.5em;border-bottom:1px solid var(--line);
}
.zeiten dt,.wege dt{font-weight:600;}
.zeiten dd,.wege dd{margin:0;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.anfahrt{margin-top:clamp(26px,3.4vw,40px);scroll-margin-top:18px;}
.ort-region{margin-top:.9em;}
.ort-notiz a{color:var(--accent);font-weight:600;text-decoration:none;}
.ort-notiz a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ── Seitenkopf der Unterseiten ────────────────────────────── */
.pfad{
  padding-top:clamp(18px,2.6vw,28px);
  font-size:.8rem;letter-spacing:.03em;color:var(--ink-3);
}
.pfad ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.2em .5em;
}
.pfad li + li::before{content:"›";margin-right:.5em;color:var(--ink-3);}
.pfad a{color:var(--accent);text-decoration:none;}
.pfad a:hover{text-decoration:underline;text-underline-offset:3px;}

.seitenkopf{
  padding-block:clamp(22px,3.4vw,40px) clamp(34px,5vw,60px);
  display:flex;flex-direction:column;
  gap:clamp(14px,2vw,20px);
}
.seitenkopf .gruss{margin-bottom:-.2em;}
.seitenkopf h1{font-size:clamp(2.7rem,8vw,5.2rem);}
.seitenkopf .lead{max-width:50ch;}
.seitenkopf .status{margin-top:clamp(6px,1vw,12px);}

/* Angebote und Galerie als eigene Seiten: Der Seitenkopf bringt den Abstand schon mit */
.seitenkopf + .angebote,
.seitenkopf + .werkstatt{padding-top:0;}

/* ── Hinweis für Gruppen von 4 bis 15 Personen ─────────────── */
/* Kursübersicht: Der Seitenkopf hat zwei Spalten - links Titel und
   Einleitung, rechts spricht Elisabeth die Gruppen in einer Sprechblase an.
   Auf schmalen Fenstern rutscht die Sprechblase unter die Einleitung. */
.seitenkopf-zwei{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,5vw,60px);
}
.seitenkopf-text{display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);}
@media (min-width:901px){
  .seitenkopf-zwei{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;}
  .seitenkopf-zwei .gruppen{justify-self:end;}
}
.gruppen{max-width:470px;width:100%;}
.gruppen-blase{
  position:relative;
  display:flex;flex-direction:column;gap:10px;
  background:var(--paper);
  border-radius:26px 30px 28px 24px;
  padding:clamp(20px,2.6vw,28px) clamp(22px,2.8vw,30px) clamp(20px,2.6vw,26px);
  /* Schatten als Filter, damit er auch den Zipfel der Sprechblase umfasst */
  filter:drop-shadow(0 16px 22px rgba(46,66,78,.13));
}
.gruppen-blase h2{
  font-family:var(--schreib);font-weight:400;
  font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.2;
  color:var(--sand);margin:0;
}
.gruppen-blase p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.6;}
.gruppen-blase .gruppen-kicker{
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--sand-text);line-height:1.4;
}
.gruppen-blase .gruppen-aktion{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin-top:6px;
}
.gruppen-aktion .oder{font-size:.86rem;color:var(--ink-3);}
.gruppen-aktion .oder a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap;}
.gruppen-aktion .oder a:hover{text-decoration:underline;text-underline-offset:3px;}
.gruppen-zipfel{
  position:absolute;left:50px;bottom:-25px;
  width:32px;height:27px;
  fill:var(--paper);
}
.gruppen-wer{
  display:flex;align-items:center;gap:14px;
  margin:20px 0 0 12px;
}
.gruppen-wer img{width:84px;height:84px;border-radius:50%;object-fit:cover;}
.gruppen-wer span{font-size:.86rem;color:var(--ink-3);line-height:1.4;}
.gruppen-wer strong{display:block;color:var(--ink);font-weight:600;font-size:.95rem;}

/* Kursseiten: kleine Fassung unter dem Buchungskasten.
   Dieselbe Form hat der Hinweis „Fragt mich an“ auf der Angebote-Seite (.anfrage-klein). */
.gruppen-klein,
.anfrage-klein{
  display:flex;gap:12px;align-items:flex-start;
  margin:0;
  background:var(--accent-wash);
  border-radius:18px 20px 20px 6px;
  padding:14px 18px;
  font-size:.9rem;line-height:1.55;color:var(--ink-2);
}
.gruppen-klein svg,
.anfrage-klein svg{
  flex:none;width:24px;height:24px;margin-top:.05em;
  fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.gruppen-klein strong,
.anfrage-klein strong{color:var(--ink);font-weight:600;}
.gruppen-klein a,
.anfrage-klein a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap;}
.gruppen-klein a:hover,
.anfrage-klein a:hover{text-decoration:underline;text-underline-offset:3px;}
/* Angebote-Seite: etwas Abstand nach oben. Die kleinere Schrift sitzt hier am
   Text selbst, damit die Breite (62ch) wie bei den Absätzen darüber gerechnet wird. */
.leistung p.anfrage-klein{margin-top:1.5em;font-size:inherit;}
.leistung p.anfrage-klein > span{font-size:.9rem;}

/* ── Kurskarten (Kursübersicht) ────────────────────────────── */
.kursgruppe{padding-bottom:clamp(40px,6vw,72px);}
.karten{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  gap:clamp(22px,3vw,36px);
}
.karte{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--paper);
  border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line-soft),0 22px 44px -34px rgba(46,66,78,.5);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s;
}
.karte:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--line),0 28px 50px -30px rgba(46,66,78,.55);
}
.karte:focus-within{box-shadow:0 0 0 2px var(--accent-voll);}
@media (prefers-reduced-motion:reduce){
  .karte{transition:none;}
  .karte:hover{transform:none;}
}
/* Quadratisch: Die Kursfotos sind Hochformate - so bleibt vom Motiv genug übrig */
.karte-bild{aspect-ratio:1/1;overflow:hidden;background:var(--ground-sunk);}
.karte-bild img{width:100%;height:100%;object-fit:cover;}
.karte-text{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 20px 20px;flex:1;
}
.karte-vor{
  font-family:var(--schreib);font-size:1.2rem;line-height:1.2;
  color:var(--sand);margin:0;
}
.karte h2,
.karte h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.45rem,2.2vw,1.65rem);
  line-height:1.12;letter-spacing:-.005em;
  margin:0;
}
.karte h2 a,
.karte h3 a{color:inherit;text-decoration:none;}
/* Die ganze Karte ist klickbar, im Quelltext aber nur ein einziger Link */
.karte h2 a::after,
.karte h3 a::after{content:"";position:absolute;inset:0;z-index:1;}
.karte h2 a:focus-visible,
.karte h3 a:focus-visible{outline:none;}
.karte-teaser{margin:4px 0 12px;font-size:.9rem;color:var(--ink-2);line-height:1.55;}
.marke{
  display:inline-block;align-self:flex-start;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--accent);background:var(--accent-wash);
  padding:.35em .8em;border-radius:99px;line-height:1.3;
  margin:0 0 12px;
}
.karte-fuss{
  margin-top:auto;padding-top:12px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line-soft);
}
.karte-dauer{font-size:.84rem;color:var(--ink-2);}
.karte-preis{
  font-family:var(--display);font-size:1.45rem;font-weight:500;
  color:var(--sand-text);line-height:1;white-space:nowrap;
  font-variant-numeric:lining-nums;
}

/* Zeichnung als Platzhalter, solange es vom Kurs noch kein Foto gibt */
.illu{
  width:100%;height:100%;
  display:grid;place-items:center;
  background:
    radial-gradient(65% 55% at 26% 22%, var(--wash-blau), transparent 70%),
    radial-gradient(60% 60% at 80% 84%, var(--wash-sand), transparent 72%),
    var(--sand-wash);
  color:var(--sand-text);
}
.illu-blau{
  background:
    radial-gradient(65% 55% at 74% 20%, var(--wash-sand), transparent 70%),
    radial-gradient(60% 60% at 20% 84%, var(--wash-blau), transparent 72%),
    var(--accent-wash);
  color:var(--accent);
}
.illu svg{
  width:min(44%,200px);height:auto;
  fill:none;stroke:currentColor;stroke-width:2px;
  stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
}
/* Gleich starke Linien, egal wie gross die Zeichnung erscheint */
.illu svg *{vector-effect:non-scaling-stroke;}
.illu svg .voll{fill:currentColor;stroke:none;}

/* ── Kursseite: Bild, Titel, Eckdaten, Buchung ─────────────── */
.kurs-kopf{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(26px,4vw,40px);
  padding-block:clamp(18px,3vw,32px) clamp(36px,5vw,64px);
}
@media (min-width:861px){
  .kurs-kopf{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(36px,5vw,72px);
    align-items:start;
  }
}
.kurs-bilder{display:flex;flex-direction:column;gap:12px;}
.kurs-bild{
  aspect-ratio:4/5;
  border-radius:14px;overflow:hidden;
  background:var(--ground-sunk);
}
/* Nur eine Zeichnung: auf dem Handy flacher, sonst steht sie zu lange im Weg */
@media (max-width:860px){ .kurs-bild.nur-illu{aspect-ratio:3/2;} }
/* Quadratisches Bild (z. B. Collage): ganz zeigen statt im Hochformat beschneiden */
.kurs-bild.quadrat{aspect-ratio:1/1;}
.kurs-bild .stueck{height:100%;border-radius:0;}
.kurs-bild img{width:100%;height:100%;object-fit:cover;}
.vorschau{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.vorschau .stueck{aspect-ratio:1;border-radius:10px;}
.vorschau .stueck img{height:100%;object-fit:cover;}
/* Nur zwei Vorschaubilder (Entwicklungsbegleitung): zwei Spalten statt drei */
.vorschau.zwei{grid-template-columns:repeat(2,minmax(0,1fr));}
.bild-hinweis{margin:0;font-size:.8rem;color:var(--ink-3);}

.kurs-info{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,24px);}
.kurs-titel{margin:0;}
.kurs-titel .schreib{
  display:block;
  font-size:clamp(1.45rem,3.2vw,2.1rem);
  margin-bottom:.12em;
}
.kurs-titel .display{
  display:block;
  font-size:clamp(2.5rem,6vw,4.2rem);
}
.kurs-technik{
  margin:0;
  font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--sand-text);
}

.eckdaten{
  margin:0;
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  column-gap:clamp(18px,2.6vw,30px);
  border-top:1px solid var(--line);
}
.eckdaten dt,
.eckdaten dd{margin:0;padding-block:12px;border-bottom:1px solid var(--line-soft);}
.eckdaten dt{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);line-height:1.4;
  padding-top:calc(12px + .3em);
}
.eckdaten dd{color:var(--ink);line-height:1.5;}
.eckdaten .preis{
  font-family:var(--display);font-size:1.75rem;font-weight:500;
  color:var(--sand-text);line-height:1.15;
  font-variant-numeric:lining-nums;
}
.eckdaten dd small{
  font-size:.9rem;color:var(--ink-2);
  margin-left:.45em;
}
/* Zeile „Ort“: der Verweis zur Anfahrt steht unter der Adresse */
.eckdaten .eck-link{
  display:block;width:fit-content;padding-block:3px;
  font-size:.9rem;font-weight:600;color:var(--accent);text-decoration:none;
}
.eckdaten .eck-link:hover{text-decoration:underline;text-underline-offset:3px;}
@media (max-width:460px){
  .eckdaten{grid-template-columns:minmax(0,1fr);}
  .eckdaten dt{border-bottom:0;padding-bottom:0;}
  .eckdaten dd{padding-top:3px;}
}

.buchen{
  background:var(--paper);
  border-radius:12px;
  padding:clamp(18px,2.6vw,24px) clamp(18px,2.8vw,26px);
  box-shadow:0 0 0 1px var(--line-soft),0 22px 44px -36px rgba(46,66,78,.5);
}
.buchen > div{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.buchen p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.6;}
.buchen strong{color:var(--ink);font-weight:600;}
.buchen .klein{font-size:.8rem;color:var(--ink-3);}
.buchen a:not(.knopf){color:var(--accent);font-weight:600;text-decoration:none;}
.buchen a:not(.knopf):hover{text-decoration:underline;text-underline-offset:3px;}

/* ── Kursseite: Beschreibung und Stornierung ───────────────── */
.kurs-inhalt{
  border-top:1px solid var(--line);
  padding-block:clamp(34px,5vw,62px) clamp(36px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,4vw,48px);
}
@media (min-width:961px){
  .kurs-inhalt{
    grid-template-columns:minmax(0,7fr) minmax(0,4fr);
    gap:clamp(40px,5vw,80px);
    align-items:start;
  }
  .kurs-seitenleiste{position:sticky;top:24px;}
}
.kurs-text > p{margin:0 0 1.15em;color:var(--ink-2);max-width:64ch;}
.kurs-text > p:first-child{
  font-size:clamp(1.06rem,1.4vw,1.16rem);
  color:var(--ink);
}
.kurs-text > :last-child{margin-bottom:0;}
.ideen{
  list-style:none;
  margin:.2em 0 1.4em;
  padding:clamp(20px,3vw,28px) clamp(24px,3.6vw,36px);
  background:var(--sand-wash);
  border-radius:22px 30px 24px 34px;
  max-width:64ch;
}
.ideen li{
  position:relative;
  padding-left:1.35em;margin:.3em 0;
  color:var(--ink);
}
.ideen li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--sand-voll);
}
.ideen-zwei{columns:2;column-gap:2.4em;}
.ideen-zwei li{break-inside:avoid;}
@media (max-width:560px){ .ideen-zwei{columns:1;} }
/* Längere Hinweise statt kurzer Stichworte (Malkurs: „Bitte beachte“) */
.ideen-lang li{margin:.8em 0;}
.ideen-lang li:first-child{margin-top:0;}
.ideen-lang li:last-child{margin-bottom:0;}
/* Überschrift über der Kursbeschreibung (Malkurs). Der Absatz danach
   bekommt die größere Schrift, die sonst der erste Absatz hat. */
.kurs-text > h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.55rem,2.8vw,2.05rem);line-height:1.18;
  color:var(--ink);
  margin:0 0 .7em;
  text-wrap:balance;   /* Zeilen gleich lang, wo der Browser es kann */
}
.kurs-text > h2 + p{
  font-size:clamp(1.06rem,1.4vw,1.16rem);
  color:var(--ink);
}
/* Zwischenüberschriften und Gruß im Kurstext (Offenes Atelier) */
.kurs-text > h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,2.1vw,1.55rem);line-height:1.22;
  color:var(--ink);
  margin:1.5em 0 .5em;
}
.kurs-text > p.kurs-gruss{
  font-size:clamp(1.5rem,2.6vw,1.9rem);
  color:var(--ink);
  margin-top:-.4em;
}

.kurs-seitenleiste{display:flex;flex-direction:column;gap:18px;}
.infokasten{
  background:var(--paper);
  border-radius:12px;
  padding:clamp(20px,2.8vw,26px) clamp(20px,3vw,28px);
  box-shadow:0 0 0 1px var(--line-soft);
}
.infokasten h2{
  font-family:var(--sans);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--accent);
  margin:0 0 .75em;line-height:1.4;
}
.infokasten p{margin:0 0 .8em;font-size:.9rem;color:var(--ink-2);line-height:1.6;}
.infokasten p:last-child{margin-bottom:0;}
.infokasten a{color:var(--accent);font-weight:600;text-decoration:none;}
.infokasten a:hover{text-decoration:underline;text-underline-offset:3px;}

.weitere{
  border-top:1px solid var(--line);
  padding-block:clamp(34px,5vw,62px) clamp(40px,6vw,76px);
}
.weitere-fuss{margin:clamp(20px,3vw,28px) 0 0;}

/* ── Für alle Kurse gilt ───────────────────────────────────── */
.fuer-alle{
  border-top:1px solid var(--line);
  padding-block:clamp(40px,6vw,76px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.fuer-alle .liste h2{
  font-family:var(--schreib);font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.2rem);
  color:var(--sand);
  margin:0 0 .45em;line-height:1.25;
}

/* ── Fuß ───────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line);
  padding-block:clamp(28px,4vw,44px) clamp(30px,4.5vw,52px);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
}
.foot-kontakt{display:flex;flex-direction:column;gap:13px;align-items:flex-start;}
.ig{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.8rem);
  color:var(--accent);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:11px;
}
.ig svg{width:1em;height:1em;flex:none;}
.ig:hover{text-decoration:underline;text-underline-offset:5px;}
.zeile{
  font-size:1rem;font-weight:600;letter-spacing:.01em;
  color:var(--accent);text-decoration:none;
  display:inline-flex;align-items:center;gap:11px;
}
.zeile svg{width:1.15em;height:1.15em;flex:none;}
.zeile:hover{text-decoration:underline;text-underline-offset:4px;}
.foot-adresse,.foot-zeiten{
  display:flex;align-items:flex-start;gap:11px;
  margin:0;font-style:normal;
  font-size:.95rem;line-height:1.5;color:var(--ink-2);
}
.foot-adresse svg,.foot-zeiten svg{width:1.15em;height:1.15em;flex:none;margin-top:.15em;color:var(--accent);}
.foot-meta{
  font-size:.8rem;color:var(--ink-3);text-align:right;
  display:flex;flex-direction:column;gap:7px;align-items:flex-end;
}
.foot-meta a{color:var(--accent);text-decoration:none;}
.foot-meta a:hover{text-decoration:underline;text-underline-offset:3px;}
.foot-meta a[aria-current="page"]{color:var(--ink-2);}
.domain{color:var(--ink-2);letter-spacing:.04em;font-weight:600;}

/* ── Rechtstexte: Impressum, Datenschutz und AGB ───────────── */
.recht{padding-block:clamp(34px,5vw,62px) clamp(44px,6vw,80px);}
.recht-inhalt{max-width:70ch;}
.recht h1{
  font-size:clamp(2.3rem,6.4vw,3.8rem);
  margin:.3em 0 0;
  hyphens:manual;
}
.recht h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.35rem,2.4vw,1.65rem);
  line-height:1.2;letter-spacing:-.005em;
  color:var(--ink);
  margin:2.1em 0 .55em;
}
.recht p,.recht li{color:var(--ink-2);}
.recht p{margin:0 0 1em;}
.recht ul{margin:0 0 1em;padding-left:1.15em;}
.recht li{margin-bottom:.3em;}
.recht li::marker{color:var(--sand-voll);}
.recht strong{color:var(--ink);font-weight:600;}
.recht a{
  color:var(--accent);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  overflow-wrap:anywhere;
}

/* AGB: Absätze mit Nummer davor, Aufzählungen mit Buchstaben. Nummern und
   Buchstaben stehen als Text in der Seite (nicht als Listenzeichen), damit
   sie beim Kopieren, Drucken und Vorlesen erhalten bleiben. */
.recht .agb-fuer{margin:1em 0 .5em;color:var(--ink);font-weight:600;}
.recht .agb-anbieterin{margin:0;}
.agb-drucken{margin:1.5em 0 0 !important;}
.agb-drucken .knopf{font-size:.86rem;padding:.7em 1.2em;min-height:44px;}
.agb h2{scroll-margin-top:18px;}
.agb-abs,.agb-bst{list-style:none;margin:0;padding:0;}
.agb-abs > li{position:relative;padding-left:2.5em;margin-bottom:.85em;}
.agb-bst{margin:.45em 0 .55em;}
.agb-bst > li{position:relative;padding-left:1.7em;margin-bottom:.3em;}
.agb-abs .nr{position:absolute;left:0;top:0;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.recht .agb-abs li > p{margin:.45em 0 0;}

/* Die Kurzfassung vorneweg - wie die Liste auf der Startseite */
.kurz{
  background:var(--sand-wash);
  border-radius:3px;
  padding:clamp(22px,3.4vw,34px) clamp(22px,3.6vw,38px);
  margin-top:clamp(26px,3.6vw,40px);
}
.recht .kurz h2{
  font-family:var(--schreib);
  font-weight:400;
  color:var(--sand);
  font-size:clamp(1.55rem,3.2vw,2.05rem);
  line-height:1.25;
  margin:0 0 .45em;
}
.kurz ul{margin:0;}
.kurz li:last-child{margin-bottom:0;}

/* Art. 21 Abs. 4 DSGVO verlangt, dass der Widerspruch "getrennt von anderen
   Informationen" erscheint - daher ein eigener, abgesetzter Kasten. */
.widerspruch{
  border-left:3px solid var(--accent-voll);
  padding:.25em 0 .25em 1.1em;
  margin:1.5em 0;
}
.widerspruch h3{
  font-family:var(--sans);
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--accent);
  margin:0 0 .45em;
}
.recht .widerspruch p{margin:0;color:var(--ink);}

.zurueck{margin-top:2.6em !important;}
.recht .zurueck a{text-decoration:none;font-weight:600;}
.recht .zurueck a:hover{text-decoration:underline;}

/* Impressum: Angaben in Kästchen nebeneinander */
.impressum-raster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(22px,3vw,46px);
  align-items:start;
  margin-top:clamp(26px,3.6vw,40px);
}
/* .recht davor und line-height:inherit, damit die Regel „.recht h2“ der
   Datenschutzseite hier nicht durchschlägt */
.recht .impressum-raster h2{
  font-family:var(--sans);line-height:inherit;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);
  margin:0 0 .8em;
}
.impressum-raster p{
  margin:0 0 .9em;
  font-size:.92rem;line-height:1.65;color:var(--ink-2);
  max-width:40ch;
}
.impressum-raster p:last-child{margin-bottom:0;}
.impressum-raster a{text-decoration:none;}
.impressum-raster a:hover{text-decoration:underline;}

/* ── Eröffnungshinweis ─────────────────────────────────────── */
.ankuendigung{
  border:0;padding:0;background:transparent;
  width:min(430px,calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  color:var(--ink);
}
.ankuendigung::backdrop{
  background:rgba(46,66,78,.46);
}
.ankuendigung-inhalt{
  position:relative;
  background:var(--paper);
  border-radius:3px;
  padding:clamp(30px,6vw,44px) clamp(26px,5vw,40px) clamp(26px,5vw,36px);
  box-shadow:0 26px 60px -22px rgba(46,66,78,.55);
  text-align:center;
  overflow:hidden;
}
/* Aquarellfleck oben rechts, wie auf der Visitenkarte */
.ankuendigung-inhalt::before{
  content:"";position:absolute;
  top:-40%;right:-28%;width:78%;height:88%;
  border-radius:50%;
  background:var(--wash-sand);
  pointer-events:none;
}
.ankuendigung-inhalt > *{position:relative;}
.ankuendigung-gruss{font-size:clamp(1.35rem,4.4vw,1.7rem);margin-bottom:.35em;}
.ankuendigung-titel{
  font-size:clamp(1.9rem,6.4vw,2.5rem);
  line-height:1.12;margin:0;
}
.ankuendigung-titel span{display:block;color:var(--sand);}
.ankuendigung-rest{
  margin:.9em 0 0;
  font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);
}
.ankuendigung-text{
  margin:1.15em auto 0;max-width:34ch;
  font-size:.94rem;color:var(--ink-2);
}
/* Kein Versalsatz und keine Sperrung: Das ist ein Satz, kein Etikett -
   in Grossbuchstaben verliert er seine Waerme und wird ausserdem so breit,
   dass er auf dem Handy nicht mehr in eine Zeile passt. */
.ankuendigung-ok{
  margin-top:1.5em;
  font-family:var(--sans);font-size:.95rem;font-weight:600;
  letter-spacing:.005em;
  color:var(--paper);background:var(--accent-voll);
  border:0;border-radius:2px;
  padding:.8em 1.6em;cursor:pointer;
}
.ankuendigung-ok:hover{background:var(--accent);}
.ankuendigung-zu{
  position:absolute;top:8px;right:10px;
  width:38px;height:38px;line-height:1;
  font-size:1.5rem;
  color:var(--ink-3);background:transparent;border:0;
  cursor:pointer;border-radius:50%;
}
.ankuendigung-zu:hover{color:var(--ink);}
@media (prefers-reduced-motion:no-preference){
  .ankuendigung[open]{animation:hereinkommen .45s cubic-bezier(.2,.7,.3,1);}
  @keyframes hereinkommen{
    from{opacity:0;transform:translateY(14px) scale(.98);}
    to{opacity:1;transform:none;}
  }
}

/* ── Bewegung ──────────────────────────────────────────────── */
/* Nur mit Skript ausblenden - ohne Skript bliebe der Inhalt sonst unsichtbar. */
.js .rise{opacity:0;transform:translateY(16px);}
.js .rise.in{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.2,.7,.3,1) var(--d,0s),
             transform .75s cubic-bezier(.2,.7,.3,1) var(--d,0s);
}
@media (prefers-reduced-motion:reduce){
  .js .rise,.js .rise.in{opacity:1;transform:none;transition:none;}
  .dot{animation:none;}
}

/* ── Schmale Fenster ───────────────────────────────────────── */
@media (max-width:820px){
  /* Die drei Aspekte untereinander statt nebeneinander */
  .saeulen{grid-template-columns:1fr;gap:clamp(18px,4vw,24px);}
}
@media (max-width:560px){
  /* Symbol und Nummer über den Text statt daneben */
  .leistung{grid-template-columns:1fr;gap:clamp(14px,3vw,20px);}
  .leistung-kopf{flex-direction:row;align-items:center;gap:14px;}
}
@media (max-width:900px){
  .feier-raster{grid-template-columns:1fr;}
  .kursprogramm-raster{grid-template-columns:1fr;}
  .findest{grid-template-columns:1fr;}
  .ort{grid-template-columns:1fr;}
  .fuer-alle{grid-template-columns:1fr;}
}
@media (max-width:620px){
  /* Kein Platz mehr für die Trennlinie neben der Überschrift */
  .kopf{gap:12px;}
  .kopf .strich{display:none;}
  .foot{flex-direction:column;align-items:flex-start;}
  .foot-meta{text-align:left;align-items:flex-start;}
  /* Navigation rutscht unter den Schriftzug und wird etwas enger gesetzt */
  .top nav ul{gap:8px 18px;}
  .top nav a{font-size:.7rem;letter-spacing:.12em;}
}

/* Handys quer und kleine Tablets: Reiter enger setzen, damit sie unter dem
   Schriftzug in einer Reihe bleiben (im Querformat ist die Höhe knapp). */
@media (min-width:621px) and (max-width:760px){
  .top nav ul{column-gap:11px;}
}
@media (min-width:621px) and (max-width:699px){
  .top nav a{font-size:.7rem;letter-spacing:.12em;}
}
/* Handys: Für sieben Einträge reicht eine Reihe nicht. „Mein Shop“ steht
   deshalb oben rechts neben dem Schriftzug, die übrigen Reiter in zwei
   Reihen darunter.
   16 px + 21 px = Mitte des Logos (Abstand oben + halbe Logo-Höhe). */
@media (max-width:480px){
  .top{position:relative;}
  .top nav .nav-shop{position:absolute;right:var(--pad);top:37px;transform:translateY(-50%);}
}
/* Schmale Handys: Reiter enger setzen */
@media (max-width:374px){
  .top nav ul{column-gap:13px;}
}
@media (max-width:351px){
  .top nav ul{column-gap:8px;}
  .top nav a{letter-spacing:.08em;}
}

/* ── Touch-Geräte: größere Trefferflächen ──────────────────── */
/* Nur bei Fingerbedienung. Reiter 44 px hoch; die übrigen Links bekommen oben
   und unten 12 px Trefferfläche, ein gleich großer negativer Außenabstand
   gleicht sie aus - das Layout verschiebt sich dadurch nicht. */
@media (pointer:coarse){
  .top nav ul{row-gap:0;}
  .top nav a{min-height:44px;}
  .top nav .ig-mini{padding-inline:8px 14px;margin-inline:-8px -14px;}
  .mark,.pfad a,.foot-meta a,.zurueck a,.pfeil-link{padding-block:12px;margin-block:-12px;}
  .pfad a,.foot-meta a,.zurueck a,.pfeil-link{display:inline-block;}
  .eckdaten .eck-link{padding-block:12px;margin-block:-9px;}
}

/* ── Drucken ───────────────────────────────────────────────── */
/* Beim Drucken scrollt niemand: alles zeigen, auch was sonst erst beim
   Scrollen aufsteigt. Offene Dialoge (Eröffnungshinweis, Fotolupe) lägen
   sonst auf jeder Druckseite über dem Inhalt. */
@media print{
  .js .rise,.js .rise.in{opacity:1;transform:none;transition:none;}
  dialog{display:none;}
  .agb-drucken{display:none;}
}