/*! strickbar design layer — Picostrap 5 child theme
    Bootstrap 5 markup + custom skin. Generated from "Vorschlag A". */

/* strickbar – shared theme tokens & primitives
   Warm palette: cream + terracotta + warm brown. Premium & calm. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Fredoka:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Sacramento&display=swap');

/* script font for the hero typewriter line (wie in design-ai.htm) */
:root{ --script:'Sacramento', cursive; }

:root{
  --cream:#f6f0e6;
  --cream-2:#efe5d6;     /* card / panel */
  --cream-3:#e8dcc8;     /* deeper panel */
  --ink:#2b211c;         /* warm near-black */
  --ink-soft:#5d5249;
  --ink-mute:#857a6d;
  --terra:#c1654a;
  --terra-deep:#a84e37;
  --brown:#9c5a3c;
  --gold:#d2a04e;
  --line:rgba(43,33,28,.14);
  --line-soft:rgba(43,33,28,.08);
  --bs-btn-bg: var(--terra-deep);

  /* strickbar yarn-ball glyph as a mask (fill the shape with any one color) */
  --ball-svg:url("data:image/svg+xml,%3Csvg fill='%23000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 271.54 286.28'%3E%3Cpath d='M204.22,102.32c11.26,14.39,19.22,31.37,22.45,50.23-19.71-15.22-40.78-26.67-63.83-34.94-21.15-7.63-43.13-12.16-65.78-14.26.81-15.03,2.96-29.59,6.05-44.25,14.13-1.32,28.17-.24,41.99,3.73l10.05-22.39c-4.24-5.24-5.94-11.52-5.31-18.33C151.08,9.32,162.19-.11,174.73,0s23.39,9.71,24.43,22.48c1.39,14.31-9.45,26.36-23.47,27.13l-9.58,21.37c8.2,4.14,15.5,9.12,22.55,15.07l34.03-30.12c-2.89-11.27,2.28-22.65,12.08-28.06,9.81-5.41,22.69-3.36,30.39,5.12s8.51,21.41,2.02,30.77c-6.6,9.54-18.65,13.22-29.61,9.04l-33.35,29.51h0Z'/%3E%3Cpath d='M101.45,286.28c-29.99-3.29-57.32-18.4-76.08-41.79-6.97-8.7-12.65-17.94-16.87-28.27-19.67-48.28-4.4-103.98,37.56-134.98-2.72,18.31-3.9,36.52-3.1,54.99,2.35,56.28,23,106.63,58.49,150.06Z'/%3E%3Cpath d='M219.25,218.01c-11.02,25.54-31.27,46.38-56.5,58.23-32.24-33.49-54.74-73.02-62.7-118.73,46.38,7.02,87.01,26.83,119.2,60.5Z'/%3E%3Cpath d='M141.96,283.49c-4.44,1.31-9.08,2.15-13.92,2.76-12.98-14.25-24.55-29.54-34.19-46.16-31.37-53.62-37.38-111.92-24.91-172.22,4.27-1.84,8.37-3.32,12.81-4.55-3.91,21.18-5.82,42.19-5.1,63.46,1.28,41.05,13.04,80.75,34.52,115.71,8.83,14.56,19.03,27.9,30.8,41.01h-.01Z'/%3E%3Cpath d='M226.05,196.32c-21.15-20.26-45.89-35.7-73.26-45.91-17.88-6.73-36.25-11.1-55.4-13.66l-.71-13.27c17.08,1.74,33.86,4.83,50.26,10.04,30.38,9.42,57.9,25.29,81.38,46.8l-2.25,16h-.01Z'/%3E%3C/svg%3E");

  --serif:'Spectral', Georgia, serif;
  --wool:'Fredoka', system-ui, sans-serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;

  --r-sm:7px; --r-md:11px; --r-lg:16px; --r-xl:24px;
  --shadow:0 1px 2px rgba(43,33,28,.03), 0 8px 20px -16px rgba(43,33,28,.16);
  --shadow-lg:0 1px 3px rgba(43,33,28,.04), 0 18px 38px -28px rgba(43,33,28,.24);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.25rem;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
body {
    /* Silbentrennung aktivieren */
p, li, blockquote {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  overflow-wrap: break-word;
  word-wrap: break-word;
}

}
ul, ol {
    font-size:1.25rem;
    margin:0;
    padding-left:1rem;;
}

img{max-width:100%}
a{color:inherit}
::selection{background:var(--terra);color:#fff}

h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:.5rem 0 0;}
h3 {
  font-size: clamp(1.75rem, 2.4vw, 2rem);
  margin: .4rem 0 0;
}

/* ---------- typographic helpers ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terra-deep);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:2.5px;background:var(--terra);opacity:.6}

.serif{font-family:var(--serif)}
.wool{font-family:var(--wool)}
.lead{font-size:1.5rem;color:var(--ink-soft);max-width:46ch}
.muted{color:var(--ink-mute)}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em}
.display{font-size:clamp(2.6rem,6vw,5rem)}

/* ---------- buttons ---------- */
.btn{
  --pad-y:.85rem;--pad-x:1.6rem;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  display:inline-flex;align-items:center;gap:.6em;
  padding:var(--pad-y) var(--pad-x);
  border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--terra-deep);color:var(--cream)}
.btn-primary:hover{background:#1d1611;box-shadow:0 8px 18px -14px rgba(43,33,28,.45)}
.btn-terra{background:var(--terra);color:#fff}
.btn-terra:hover{background:var(--terra-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--cream-2);border-color:var(--ink)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- placeholder image ---------- */
.ph{
  position:relative;overflow:hidden;background:var(--cream-3);
  background-image:repeating-linear-gradient(135deg,rgba(43,33,28,.05) 0 10px,rgba(43,33,28,0) 10px 20px);
  display:flex;align-items:flex-end;
}
.ph::after{
  content:attr(data-ph);
  position:absolute;left:14px;bottom:12px;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:1rem;letter-spacing:.04em;color:var(--ink-mute);
  background:rgba(246,240,230,.82);padding:4px 9px;border-radius:6px;
  backdrop-filter:blur(2px);
}

/* ---------- reveal-on-scroll (base = visible end-state; hide only when motion is OK) ---------- */
[data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
  [data-reveal].is-in{opacity:1;transform:none}
}

/* ---------- nav (base) ---------- */
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{height:100px;width:auto;display:block}

/* ---------- knit fabric (used by needle animation) ---------- */
/* a tiling "V" stitch pattern, recolored per use via --stitch */
.knit-fabric{
  --stitch:var(--terra);
  background-image:
    linear-gradient(transparent 0 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 26 22'%3E%3Cpath d='M2 1 L13 19 L24 1' fill='none' stroke='%23c1654a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:auto,26px 18px;
}

/* container width */
.wrap{width:min(1180px,92vw);margin-inline:auto}

/* footer base */
.foot-link{color:inherit;text-decoration:none;opacity:.8;transition:opacity .2s}
.foot-link:hover{opacity:1}

/* floating proposal switcher */
.switcher{
  position:fixed;z-index:1000;right:18px;bottom:18px;
  display:inline-flex;align-items:center;background:var(--ink);color:var(--cream);
  border-radius:999px;padding:5px;gap:4px;box-shadow:var(--shadow-lg);
  font-family:var(--sans);font-weight:600;font-size:1rem;
}
.switcher a{
  text-decoration:none;color:inherit;padding:7px 14px;border-radius:999px;opacity:.6;transition:.2s;
}
.switcher a.active{background:var(--terra);opacity:1}
.switcher a:hover{opacity:1}


/* =========================================================
   PAGE LAYOUT (Bootstrap-5 structure + strickbar skin)
   ========================================================= */
/* ============ VORSCHLAG A · calm editorial · Bootstrap 5 structure ============ */
/* container: Bootstrap .container governs layout; cap width to match the design */
.container{max-width:1200px}
section{position:relative}

/* ---- nav (skin only; layout via Bootstrap utilities + .fixed-top) ---- */
.nav-a{z-index:1030;transition:background .35s, box-shadow .35s, padding .35s;padding:18px 0}
.nav-a.scrolled{background:rgba(246,240,230,.86);backdrop-filter:blur(12px);box-shadow:0 1.5px 0 var(--line-soft);padding:10px 0}
.nav-a .links a{text-decoration:none;font-weight:500;font-size:1.125rem;color:var(--ink);position:relative;padding:4px 0;white-space:nowrap}
.nav-a .links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--terra);transition:width .3s}
.nav-a .links a:hover::after{width:100%}
.nav-toggle{background:none;border:0;padding:6px;color:var(--ink);cursor:pointer}
.nav-toggle .burger,.nav-toggle .burger::before,.nav-toggle .burger::after{content:"";display:block;width:36px;height:3px;border-radius:3px;background:currentColor}
.nav-toggle .burger{position:relative;transition:background .15s .15s}
.nav-toggle .burger::before{position:absolute;top:-11px;left:0;transition:top .15s .15s, transform .15s}
.nav-toggle .burger::after{position:absolute;top:11px;left:0;transition:top .15s .15s, transform .15s}

/* open state: middle bar fades, outer bars cross */
.nav-a.open .nav-toggle .burger{background:transparent;transition:background .15s}
.nav-a.open .nav-toggle .burger::before{top:0;transform:rotate(45deg);transition:top .15s, transform .15s .15s}
.nav-a.open .nav-toggle .burger::after{top:0;transform:rotate(-45deg);transition:top .15s, transform .15s .15s}

/* mobile slide-in from right */
@media(max-width:991.98px){
  /* disable backdrop-filter on nav — it creates a compositing layer that makes fixed children transparent */
  .nav-a.scrolled{backdrop-filter:none;background:rgba(246,240,230,.97)}
  .nav-a .links{display:flex!important;position:fixed;top:0;right:0;bottom:0;width:66%;flex-direction:column;align-items:flex-start;background:#f6f0e6;padding:90px 7vw 30px;gap:1.4rem;box-shadow:-6px 0 40px rgba(43,33,28,.2);transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility .38s;visibility:hidden}
  .nav-a.open .links{transform:translateX(0);visibility:visible}
  .nav-a.open .links a{font-size:1.2rem}
  .nav-a .links li{display:flex;align-items:center}
  .nav-a .links li::before{content:'';flex:none;width:1.1em;height:1.1em;background-color:var(--terra-deep);-webkit-mask:var(--ball-svg) center/contain no-repeat;mask:var(--ball-svg) center/contain no-repeat;margin-right:.55em}
  /* backdrop */
  body.nav-open::before{content:'';position:fixed;inset:0;background:rgba(43,33,28,.38);z-index:1028;transition:opacity .38s}
}

/* ---- hero ---- */
.hero{padding:160px 0 70px;overflow:hidden}
.hero .eyebrow{margin-bottom:1.4rem}
/* floating strickbar-ball dots (masked SVG, one exact color) */
.balls{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.balls.on-dark .ball-dot{--ball:var(--cream);opacity:.10}
.ball-dot{
  --ball:var(--terra);
  position:absolute;
  opacity:.18;
  background-color:var(--ball);
  -webkit-mask:var(--ball-svg) center/contain no-repeat;
  mask:var(--ball-svg) center/contain no-repeat;
  will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  .ball-dot{animation:ballfloat var(--dur,8s) ease-in-out var(--del,0s) infinite}
}
@keyframes ballfloat{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(var(--rise,-24px)) rotate(calc(var(--rot,0deg) + 10deg))}
}

/* split hero */
.hero-split{padding:140px 0 84px}
.hero-figure{display:flex;justify-content:center}
.hero-round{width:100%;max-width:430px;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:50%;box-shadow:var(--shadow-lg);display:block}
.hero .script-line{font-family:var(--script);font-weight:400;font-size:clamp(2.8rem,6vw,5.2rem);line-height:1;letter-spacing:0;color:#6b4a36;margin:0;min-height:2.1em}
.hero .script-line .cursor{display:inline-block;color:var(--terra);font-weight:400}
@media (prefers-reduced-motion:no-preference){.hero .script-line .cursor{animation:blink 1s steps(1) infinite}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero-split .lead{margin:1.2rem 0 1.9rem;max-width:42ch}
.hero-split .lead strong{font-weight:700;color:var(--ink)}
@media(max-width:991.98px){
  .hero-split{padding:120px 0 64px}
  .hero-split .lead{margin-inline:auto}
  .hero .script-line{font-size:clamp(3.6rem,13vw,4.8rem);min-height:0;margin-bottom:.2em}
}

/* ---- section shell ---- */
.sec{padding:96px 0}
.sec .container,.foot .container{position:relative;z-index:1}
.sec-head{margin-bottom:54px}


/* ---- Termine timeline ---- */
.timeline{position:relative}
.tl-line{position:absolute;left:0;right:0;top:70px;height:0;border-top:2px dashed var(--terra);opacity:.5}
@media(max-width:767.98px){.tl-line{display:none}}
.tnode{position:relative}
.tdot{width:92px;height:92px;border-radius:50%;background:var(--cream);border:2px solid var(--terra);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 22px;position:relative;z-index:2;box-shadow:0 0 0 8px var(--cream)}
.tdot .d{font-family:var(--serif);font-weight:700;font-size:1.9rem;line-height:1;color:var(--ink)}
.tdot .m{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-deep);margin-top:2px}
.tcard{background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:transform .35s,box-shadow .35s;height:100%}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tpic{width:100%;height:170px;object-fit:cover;display:block}
.tcard .tb{padding:20px 24px 22px}
.tcard .dow{font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-deep)}
.tcard h3{font-family:var(--serif);margin:.3rem 0 .5rem}
.tcard p{margin:0;color:var(--ink-soft);}
.tcard .tmeta{margin-top:1em;color:var(--terra-deep);font-weight:600}

/* ---- Einzel-Termin als horizontales Band ---- */
.tband{gap:30px;margin-top:34px;background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 30px;transition:transform .35s,box-shadow .35s}
.tband:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tband .tdot{margin:0;box-shadow:none}
.tband-pic{width:220px;height:130px;object-fit:cover;border-radius:var(--r-md);display:block;flex:none}
.tband-body h3{font-family:var(--serif);margin:.25rem 0 .4rem}
.tband-body .dow{font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-deep)}
.tband-body p{margin:0;color:var(--ink-soft);max-width:52ch}
.tband-side{flex:none}
.tband-side .tmeta{font-size:1rem;color:var(--terra-deep);font-weight:600;margin:0}
@media(max-width:767.98px){
  .tband-pic{width:100%;height:160px}
  .tband-side{align-items:flex-start!important;text-align:left}
}

/* ---- Zahlen ---- */
.stats{background:var(--cream-2);border-radius:var(--r-xl);padding:64px 40px}
.stat{text-align:center;padding:14px 10px}
.stat .num{font-family:var(--serif);font-weight:800;font-size:clamp(4.8rem,9vw,7.2rem);line-height:.92;color:var(--terra);letter-spacing:-.04em}
.stat .lab{margin-top:.7rem;color:var(--ink-soft);max-width:18ch;margin-inline:auto}
.stat+.stat{border-left:1.5px solid var(--line)}
@media(max-width:767.98px){.stat+.stat{border-left:0}.stat{border-top:1.5px solid var(--line)}.stat:first-child{border-top:0}}

/* ---- Cards ---- */
.ocard{background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:30px 30px 34px;height:100%;transition:transform .35s,box-shadow .35s,border-color .35s;display:flex;flex-direction:column}
.ocard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--terra)}
.ocard .ic{width:50px;height:50px;border-radius:11px;display:grid;place-items:center;background:var(--cream-3);color:var(--terra-deep);margin-bottom:20px}
.ocard h3{margin:0 0 .5rem}
.ocard p{margin:0 0 1.2rem;color:var(--ink-soft);}
.ocard .go{margin-top:auto;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;gap:.5em;align-items:center}
.ocard .go .arr{transition:transform .25s}
.ocard:hover .go .arr{transform:translateX(4px)}

/* ---- Galerie / Carousel ---- */
.cbtn{width:58px;height:58px;border-radius:50%;border:2px solid var(--line);background:var(--cream);color:var(--ink-mute);cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s,transform .25s}
.cbtn svg{width:28px;height:28px;display:block}
.cbtn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:translateY(-2px)}
.carousel-strip{position:relative;margin-top:6px}
.ctrack{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ctrack::-webkit-scrollbar{display:none}
.cslide{flex:0 0 calc((100% - 52px)/3);scroll-snap-align:start;margin:0}
.cslide img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-lg);display:block;box-shadow:var(--shadow)}
.cslide figcaption{margin-top:14px;font-size:1.125rem;color:var(--ink-soft);font-family:var(--serif);font-style:italic}
.cdots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0;transition:background .25s,transform .25s}
.cdots button.active{background:var(--terra);transform:scale(1.35)}
@media(max-width:767.98px){.cslide{flex:0 0 100%}}
.gallery-lead{margin:-30px 0 40px;max-width:62ch;font-size:1.25rem}
.gallery-lead a{color:var(--terra-deep);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--line);transition:border-color .2s}
.gallery-lead a:hover{border-color:var(--terra)}

/* ---- map ---- */
.mapsec{padding:0 0 30px}
.map-card{border-radius:var(--r-xl);overflow:hidden;border:1.5px solid var(--line);background:var(--cream-2);box-shadow:var(--shadow)}
.map-info{padding:48px 44px;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.map-info h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.2rem 0 .6rem}
.map-info .btn{align-self:flex-start}
.map-embed{position:relative;min-height:340px}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:saturate(.9)}
@media(max-width:767.98px){.map-info{padding:34px 26px}.map-embed{min-height:300px}}

/* ---- footer ---- */
.foot{background:var(--ink);color:var(--cream);padding:70px 0 36px;position:relative;overflow:hidden}
.foot a{color:var(--cream)}

.foot img{height:100px;margin-bottom:18px}
.logo-light{filter:brightness(0) invert(1)}

.foot h4{font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot .news{display:flex;gap:8px;margin-top:14px}
.foot .news input{flex:1;background:rgba(246,240,230,.08);border:1.5px solid rgba(246,240,230,.2);color:var(--cream);border-radius:999px;padding:11px 16px;font-family:var(--sans)}
.foot .news input::placeholder{color:rgba(246,240,230,.5)}
.foot .news button{border:0;border-radius:999px;background:var(--terra);color:#fff;padding:0 18px;font-weight:600;cursor:pointer}
.foot .base{margin-top:54px;padding-top:22px;border-top:1.5px solid rgba(246,240,230,.14);color:rgba(246,240,230,.6)}

/* ---- nav open-state (desktop dropdown via .open class) ---- */
.switcher{display:none!important}