/* ===========================
   Theme: airy, modern, friendly
=========================== */
:root{
  --bg:#FDF7F2; --paper:#fff; --ink:#2B2B2B; --muted:#6E7580;
  --rose:#E97BA3; --rose-700:#C95F89; --peach:#FFD9C8; --sage:#A6C3BE;
  --line:#EFE7E2; --ring:rgba(233,123,163,.28);
  --radius:18px; --radius-lg:22px;
  --shadow:0 20px 40px rgba(28,18,13,.08);
  --shadow-soft:0 12px 24px rgba(28,18,13,.06);
  --container:1100px;
}

/* Layout base + sticky footer */
*{box-sizing:border-box}
html,body{height:100%}
body{
  min-height:100svh; display:flex; flex-direction:column;
  font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased;
}
main{flex:1}

h1,h2,h3{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  line-height:1.15; margin:0 0 .5rem
}
.display{font-size:clamp(2.4rem,4.6vw,3.4rem);letter-spacing:.2px}
.display-sm{font-size:clamp(1.8rem,3vw,2.4rem)}
.lead{color:var(--muted);font-size:clamp(1.05rem,.6vw + .95rem,1.2rem)}
.center{text-align:center}
.container{width:min(var(--container),92%);margin-inline:auto}
.narrow{width:min(860px,92%);margin-inline:auto}
.muted{color:var(--muted)}
a{color:var(--rose-700);text-decoration:none}
a:hover{text-decoration:underline}

/* Fancy background */
.bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(45% 50% at 15% 10%,rgba(255,217,200,.7),transparent 60%),
    radial-gradient(40% 55% at 85% 5%,rgba(230,245,240,.9),transparent 60%),
    radial-gradient(30% 45% at 80% 70%,rgba(233,123,163,.18),transparent 60%),
    linear-gradient(180deg,#FFF,#FBF2EA 60%,#FFF)
}
.fx-blobs::before,.fx-blobs::after{
  content:"";position:absolute;filter:blur(40px);opacity:.7;mix-blend-mode:multiply;
  width:48vmin;height:48vmin;border-radius:50%
}
.fx-blobs::before{top:18%;left:-6%;background:conic-gradient(from 90deg,#FFD9C8,#F6BBD6,#FFD9C8);animation:float1 16s ease-in-out infinite}
.fx-blobs::after {bottom:10%;right:-4%;background:conic-gradient(from 200deg,#D7F0E9,#FFE6DC,#E6F5F0);animation:float2 18s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

/* ===========================
   Header (modern, bigger logo)
=========================== */
.site-header{
  position:sticky; top:0; z-index:20;
  border:0;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(28,18,13,.06);
}
.header-inner{
  display:flex; align-items:center; gap:.6rem; padding:1.2rem 0;
  justify-content:flex-start;
}
.brand-logo{ height:72px; width:auto; display:block; image-rendering:-webkit-optimize-contrast; filter: drop-shadow(0 2px 6px rgba(0,0,0,.06)) }
.brand-name{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-weight:700; color:#2b2b2b; font-size:clamp(1rem,2vw,1.15rem);
  margin-left:.6rem; white-space:nowrap;
}
.main-nav{ margin-left:auto; display:flex; align-items:center }

/* Dropdown */
.menu{ position:relative }
.menu-toggle{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:.65rem 1rem; border-radius:999px; font-weight:700; box-shadow:var(--shadow-soft); cursor:pointer
}
.menu-panel{
  position:absolute; right:0; top:calc(100% + .5rem);
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 22px 40px rgba(28,18,13,.12); padding:.4rem; display:none;

  /* –– Breiter + einzeilig –– */
  min-width:360px; width:max-content; max-width:calc(100vw - 32px);
}
.menu.open .menu-panel{ display:block }
.menu-panel a{
  display:block; padding:.65rem .9rem; border-radius:10px; color:var(--ink);
  text-decoration:none; white-space:nowrap; line-height:1.2;
}
.menu-panel a:hover{ background:#FFF4EF }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.75rem 1rem; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:700; text-decoration:none;
  box-shadow: var(--shadow-soft);
  transition: transform .14s, box-shadow .14s, background .14s;
}
.btn:hover{ transform: translateY(-2px) }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 8px var(--ring) }
.btn-primary{ background: linear-gradient(135deg, var(--rose), var(--rose-700)); border-color:transparent; color:#fff }
.btn-lg{ padding:.9rem 1.25rem }
.btn-xl{ padding:1rem 1.35rem }

/* Sections & hero */
.section{ padding:clamp(28px,4.6vw,64px) 0 }
.hero-headline .accent{
  background: linear-gradient(90deg, #e97ba3 0%, #f3c6d4 45%, #a6c3be 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-intro{ max-width:780px; margin:.6rem auto 0 }
.center-img{ margin:1rem auto 0; max-width:560px; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow) }
.centered-actions{ display:flex; justify-content:center; margin-top:.8rem }

/* Cards / Angaben */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); padding:clamp(18px,2.2vw,26px) }
.about-info .kv{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line) }
.about-info .kv li{ display:contents }
.about-info .kv span{ padding:.9rem .3rem; border-bottom:1px solid var(--line) }
.about-info .kv span:first-child{ color:#555; font-weight:700 }
.about-info .kv span:last-child{ text-align:right; word-break:break-word; overflow-wrap:anywhere }

/* Carousel */
.carousel{ position:relative }
.track{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  gap:1rem; padding-bottom:.25rem; scrollbar-width:none
}
.track::-webkit-scrollbar{ display:none }
.track>*{ scroll-snap-align:center }
.card-spotlight{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(18px,2.2vw,26px); box-shadow:var(--shadow) }
.card-spotlight.tc h2,.card-spotlight.tc p{ text-align:center }
.dots{ display:flex; gap:.4rem; justify-content:center; margin:.8rem 0 0 }
.dots button{ width:10px; height:10px; border-radius:999px; border:1px solid var(--line); background:#f0e8e2 }
.dots button[aria-current="true"]{ background:var(--rose) }

/* Accordion – clean */
.accordion details{ margin:.9rem 0 }
.accordion summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:flex-start;
  font-weight:800; padding:1rem 1.2rem;
  border-radius:16px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
  user-select:none; position:relative;
}
.accordion summary::-webkit-details-marker{ display:none }
.accordion summary:hover{
  background:#FFF8F4; box-shadow:0 14px 30px rgba(28,18,13,.08); transform:translateY(-1px)
}
/* Akzent-Leiste links */
.accordion summary::before{
  content:""; width:6px; height:70%; border-radius:6px;
  background:linear-gradient(180deg,var(--rose),var(--rose-700));
  position:absolute; left:8px; top:15%; opacity:.28; transition:opacity .18s ease;
}
.accordion summary:hover::before{ opacity:.45 }
.accordion summary span{ margin-left:12px }
.accordion .acc-body{
  margin-top:.6rem; padding:.95rem 1.1rem 1.1rem;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-soft); color:var(--ink)
}

/* Forms – robust & mobile */
.form-elev{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow) }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start }
@media (max-width:760px){ .form-grid{ grid-template-columns:1fr; gap:.9rem } }
.wide{ grid-column:1 / -1 }
.field{ position:relative }
.field input,.field textarea{
  width:100%; display:block; font:inherit; font-size:16px;
  color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:1rem .95rem; line-height:1.35;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02)
}
.field textarea{ min-height:180px; resize:vertical }
.field input:focus,.field textarea:focus{
  outline:none; border-color:transparent; box-shadow:0 0 0 8px var(--ring); background:#fff
}
/* Floating labels */
.field label{
  position:absolute; left:.9rem; top:.95rem; padding:0 .35rem;
  background:#fff; color:#8b8f98; transform-origin:left top;
  transform:translateY(0) scale(1);
  transition:transform .18s ease, color .18s ease; pointer-events:none
}
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field input:focus + label,
.field textarea:focus + label{
  transform:translateY(-1.05rem) scale(.88); color:#7a3e55
}
.field .msg{ display:block; min-height:1.1em; font-size:.9rem; color:#c95f89; margin-top:.28rem }
/* Select field styling */
.field-block{ display:flex; flex-direction:column }
.block-label{ font-weight:700; color:#555; margin: .15rem 0 .35rem }
.select-wrap{ position:relative }
.select-wrap select{
  width:100%; appearance:none; font:inherit; color:var(--ink);
  border:1px solid var(--line); border-radius:14px; padding:.9rem 2.3rem .9rem .9rem; background:#fff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02)
}
.select-wrap::after{
  content:"▾"; position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  pointer-events:none; color:#7a3e55; font-weight:900;
}

.checkbox{ display:flex; gap:.6rem; align-items:flex-start; cursor:pointer }
.checkbox input{ position:absolute; opacity:0 }
.checkbox .box{ width:1.2rem; height:1.2rem; border-radius:6px; border:1px solid var(--line); background:#fff; margin-top:.15rem; flex:0 0 auto; display:inline-block }
.checkbox input:checked + .box{ background:var(--rose); border-color:var(--rose) }

.form-actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.6rem }
@media (max-width:760px){ .form-actions{ flex-direction:column; align-items:stretch } .form-actions .btn{ width:100%; justify-content:center } }
.section-head + .form, .form-elev{ padding:clamp(18px,2.2vw,26px) }

/* Footer */
.site-footer{ border-top:1px solid var(--line); padding:18px 0 28px }
.footer-flex{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap }
.footer-links{ display:flex; align-items:center; gap:.5rem }
.footer-links a{ color:var(--ink) }
.footer-links a:hover{ color:var(--rose-700) }

/* Reveals */
.reveal-up{ opacity:0; transform:translateY(14px); transition:opacity .6s, transform .6s }
.reveal-fade{ opacity:0; transition:opacity .8s }
.revealed{ opacity:1; transform:none }

/* Responsive tweaks */
@media (min-width:1100px){ :root{ --container:1180px } }
@media (max-width:640px){
  .brand-logo{ height:52px }
  .header-inner{ padding:.9rem 0 }
  .menu-toggle{ padding:.55rem .85rem }
  .menu-panel{ min-width: unset; width: calc(100vw - 24px); }
}
@media (max-width:760px){
  .section{ padding:22px 0 }
}
.hidden{ display:none !important }
.card-glass img{ display:block; width:100%; height:auto }

/* Floating-Select: gleiche Optik wie Inputs */
.field-select{ position:relative }
.field-select select{
  width:100%; appearance:none; font:inherit; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding: 1rem 2.3rem 1rem .95rem; line-height:1.35;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.field-select::after{
  content:"▾"; position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  pointer-events:none; color:#7a3e55; font-weight:900;
}

/* Fokus-Ring wie bei Inputs */
.field-select select:focus{
  outline:none; border-color:transparent; box-shadow:0 0 0 8px var(--ring);
}

/* Label wie beim Input schweben lassen */
.field-select label{
  position:absolute; left:.9rem; top:.95rem; padding:0 .35rem;
  background:#fff; color:#8b8f98; transform-origin:left top;
  transform:translateY(0) scale(1);
  transition:transform .18s ease, color .18s ease; pointer-events:none;
}

/* Regeln, wann das Label hochspringt */
.field-select select:focus + label,
.field-select.filled label{
  transform:translateY(-1.05rem) scale(.88);
  color:#7a3e55;
}

/* Fehlermeldungshöhe konsistent */
.field-select .msg{ display:block; min-height:1.1em; font-size:.9rem; color:#c95f89; margin-top:.28rem }

/* Schöne E-Mail-Umbrüche mobil: nur an <wbr>, sonst NICHT mitten im Wort */
.nice-email, .nice-email span{
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
  hyphens: manual;
}

/* In der Angaben-Tabelle: Link darf die Zelle nutzen, ohne komisch zu umbrechen */
.about-info .kv span:last-child a{
  display:inline-block;
  max-width:100%;
}