/* ===== Tokens ===== */
:root{
  --coral: #DB7474;
  --coral-dark: #B94F4F;
  --ink: #241A19;
  --ink-soft: #4A3B39;
  --cream: #FBF6F1;
  --cream-deep: #F3E9DF;
  --sun: #F0B429;
  --white: #FFFFFF;

  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Inter", sans-serif;

  --shadow: 0 20px 50px -20px rgba(36,26,25,0.35);
  --shadow-sm: 0 10px 24px -12px rgba(36,26,25,0.25);

  /* Hand-painted brush-stroke masks for buttons */
  --brush-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 100' preserveAspectRatio='none'%3E%3Cpath d='M3,54 C1,38 9,23 26,18 C55,7 95,19 132,11 C182,0 233,11 271,7 C301,4 323,11 333,25 C339,33 337,43 330,49 C337,58 332,73 317,80 C281,94 231,83 191,91 C151,99 99,91 59,95 C29,98 8,89 4,75 C0,68 1,61 3,54 Z'/%3E%3C/svg%3E");
  --brush-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 100' preserveAspectRatio='none'%3E%3Cpath d='M4,61 C1,45 8,25 29,17 C61,5 111,15 151,9 C201,1 251,7 289,15 C313,20 331,21 337,35 C341,45 333,51 323,55 C333,63 331,77 313,83 C271,97 221,85 177,93 C131,101 81,95 45,99 C19,102 4,91 2,77 C-1,71 2,65 4,61 Z'/%3E%3C/svg%3E");

  /* Large hand-painted frame for cards/panels */
  --brush-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 440' preserveAspectRatio='none'%3E%3Cpath d='M16,24 L120,8 L200,22 L280,4 L360,20 L440,6 L520,22 L580,8 L594,30 L586,72 L598,112 L588,158 L598,212 L586,258 L598,308 L588,358 L594,412 L520,428 L460,416 L380,432 L300,418 L220,434 L140,420 L60,430 L14,414 L8,368 L18,318 L4,268 L16,218 L6,168 L18,118 L2,68 L16,24 Z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: normal;
  hyphens: none;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--coral-dark);
  margin-bottom: 10px;
}
.eyebrow.center{text-align:center;}

.section-title{font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 16px;}
.section-title.center{text-align:center;}
.section-lead{max-width:640px; color:var(--ink-soft); font-size:1.05rem;}
.section-lead.center{margin:0 auto 48px; text-align:center;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 20px 38px 22px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-mask-image: var(--brush-a);
  mask-image: var(--brush-a);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: drop-shadow(0 10px 16px rgba(36,26,25,0.22));
  transition: transform .25s ease, filter .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{ transform: translateY(-3px) rotate(-0.6deg) scale(1.02); }
.btn:active{ transform: translateY(-1px) scale(0.99); }

.btn-primary{
  background: var(--coral);
  color: var(--white);
}
.btn-primary:hover{ background: var(--coral-dark); }

.btn-ghost-light{
  -webkit-mask-image: var(--brush-b);
  mask-image: var(--brush-b);
  background: var(--cream);
  color: var(--ink);
}
.btn-ghost-light:hover{ background: var(--coral); color: var(--white); }

.btn-outline{
  -webkit-mask-image: var(--brush-b);
  mask-image: var(--brush-b);
  background: var(--ink);
  color: var(--cream);
}
.btn-outline:hover{ background: var(--coral); color: var(--white); }

.center-btn{ display:flex; margin: 8px auto 0; width:max-content; }

/* ===== Topbar ===== */
.topbar{
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 8px 16px;
}

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(251,246,241,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(36,26,25,0.08);
}
.header-inner{
  display:flex; align-items:center; gap: 24px;
  padding-top: 6px; padding-bottom: 6px;
}
.brand{ display:flex; align-items:center; gap:14px; margin-right:auto; }
.brand-logo{ width:96px; height:96px; object-fit:contain; }
.brand-name{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.05;
  color: var(--ink);
}
.main-nav{ display:flex; gap: 30px; }
.main-nav a{
  font-weight: 600; font-size: 0.95rem; color: var(--ink-soft);
  position: relative; padding: 4px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--coral); transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a:hover::after{ transform: scaleX(1); }

.nav-item{ position:relative; }
.nav-item > a{ display:block; }
.nav-item .submenu{
  display:none; position:absolute; top:100%; left:0; padding-top:14px;
  min-width:210px; z-index:150;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu{ display:block; }
.submenu-inner{
  background: var(--white); box-shadow: var(--shadow);
  border-top: 2px solid var(--coral); padding: 8px 0;
}
.submenu a{
  display:block; padding: 10px 22px; font-weight:600; font-size:0.9rem;
  color: var(--ink-soft); white-space:nowrap;
}
.submenu a::after{ display:none; }
.submenu a:hover{ color: var(--coral-dark); background: var(--cream); }

.header-cta{ padding: 15px 26px 17px; font-size:0.85rem; }
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; }
.nav-toggle span{ display:block; height:2px; background:var(--ink); }

/* ===== Hero ===== */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color: var(--white);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: 50% 22%; }
.hero-shade{
  position:absolute; inset:0;
  background: linear-gradient(260deg, rgba(24,16,15,0.6) 0%, rgba(24,16,15,0.38) 38%, rgba(24,16,15,0.12) 62%, rgba(24,16,15,0.04) 100%),
              linear-gradient(0deg, rgba(24,16,15,0.55) 0%, rgba(24,16,15,0) 32%);
}
.hero-content{ position:relative; padding-top: 160px; padding-bottom: 96px; max-width: 720px; text-shadow: 0 2px 16px rgba(0,0,0,0.3); }
.hero h1{
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  margin-bottom: 22px;
}
.hero-sub{ font-size: 1.15rem; color: rgba(255,255,255,0.92); max-width: 520px; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  width:28px; height:28px; color: var(--white);
  animation: cueBob 1.7s ease-in-out infinite;
}
.scroll-cue svg{ width:100%; height:100%; }
@keyframes cueBob{
  0%, 100%{ transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%{ transform: translateX(-50%) translateY(9px); opacity: 0.45; }
}

/* ===== Quote band ===== */
.quote-band{
  padding: 110px 0; background: var(--white);
}
.quote-inner{
  display:flex; align-items:center; gap: 64px;
  max-width: 920px;
}

.quote-portrait-frame{
  width: 420px; height: 420px;
  overflow: hidden;
  box-shadow: var(--shadow);
  flex-shrink:0;
}
.quote-portrait{
  width: 100%; height: 100%;
  object-fit: cover;
  display:block;
}
.quote-band blockquote p{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 16px;
}
.quote-band cite{ font-style:normal; color: var(--coral-dark); font-weight:700; font-size:0.95rem; }

/* ===== Leistungen ===== */
.leistungen-section{ padding: 56px 0 110px; }
.leistungen-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 8px;
}
.leistung-card{
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.leistung-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow); }
.leistung-media{ aspect-ratio: 4/3; overflow:hidden; }
.leistung-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.leistung-card:hover .leistung-media img{ transform: scale(1.06); }
.leistung-body{ padding: 26px 26px 30px; }
.leistung-body h3{ font-size:1.3rem; margin-bottom:10px; }
.leistung-body p{ color: var(--ink-soft); font-size:0.95rem; margin-bottom: 16px; }
.leistung-link{ font-weight:700; color: var(--coral-dark); font-size:0.9rem; }

/* ===== Farbwelt — big immersive stage ===== */
.farbwelt-section{ padding: 130px 0 60px; background: var(--cream-deep); overflow:hidden; }

.farbwelt-carousel{ position:relative; }
.farbwelt-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5; width:52px; height:52px;
  background: var(--coral); color: var(--white);
  border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: var(--shadow-sm);
  transition: background .2s ease, transform .2s ease;
  font-size: 1.7rem; line-height:1;
}
.farbwelt-nav svg{ width:26px; height:26px; }
.farbwelt-nav:hover{ background: var(--coral-dark); transform: translateY(-50%) scale(1.06); }
.farbwelt-prev{ left:14px; }
.farbwelt-next{ right:14px; }
.farbwelt-strip{
  overflow-x:auto;
  padding: 10px 0 44px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.farbwelt-strip::-webkit-scrollbar{ display:none; }
.farbwelt-track{
  display:flex; gap:20px;
  padding: 0 6vw;
}
.farbwelt-swatch{
  position:relative;
  flex: 0 0 auto;
  width: min(74vw, 640px);
  height: min(78vh, 620px);
  min-height: 380px;
  overflow: hidden;
  scroll-snap-align: center;
  box-shadow: var(--shadow);
  transition: transform .4s ease, box-shadow .4s ease;
}
.farbwelt-swatch:hover{ box-shadow: 0 26px 55px -18px rgba(36,26,25,0.4); }
.farbwelt-swatch:hover{ transform: translateY(-6px); }
.farbwelt-swatch img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.farbwelt-swatch:hover img{ transform: scale(1.04); }
.farbwelt-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 20px 32px 30px;
  background: linear-gradient(0deg, rgba(10,7,6,0.88) 0%, rgba(10,7,6,0.5) 55%, transparent 100%);
  color: var(--white);
}
.farbwelt-caption h3{ font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom:8px; }
.farbwelt-caption p{ font-size:1rem; color: rgba(255,255,255,0.85); max-width: 420px; }
@media (max-width: 720px){
  .farbwelt-carousel{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; }
  .farbwelt-strip{ order:1; flex:0 0 100%; padding-bottom:16px; }
  .farbwelt-nav{
    position:static; order:2; transform:none; width:44px; height:44px; font-size:1.3rem;
  }
  .farbwelt-nav:hover{ transform: scale(1.06); }
  .farbwelt-nav svg{ width:20px; height:20px; }
  .farbwelt-swatch{ height:auto; aspect-ratio: 1 / 1; min-height:0; }
}

/* ===== Team ===== */
.team-section{ padding: 110px 0; }
.team-inner{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items:center; }
.team-media img{ box-shadow: var(--shadow); }
.team-copy p{ color: var(--ink-soft); margin: 18px 0 28px; font-size:1.02rem; }

/* ===== CTA band ===== */
.cta-band{
  background: var(--ink);
  color: var(--cream);
  padding: 100px 0;
  text-align:center;
}
.cta-inner h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom:16px; }
.cta-inner p{ color: rgba(251,246,241,0.75); max-width:520px; margin: 0 auto 32px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ===== Footer ===== */
.site-footer{ background: var(--cream-deep); padding-top: 70px; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer-logo{ width:190px; margin-bottom:18px; }
.footer-brand h4,
.footer-col h4{ font-family:var(--font-display); font-size:0.95rem; margin-bottom:14px; line-height:1.3; }
.footer-brand p,
.footer-col p{ font-size:0.92rem; line-height:1.5; margin-bottom:8px; color: var(--ink-soft); }
.footer-brand-name{ font-weight:700; }
.footer-col a:hover{ color: var(--coral-dark); }
.footer-bottom{
  border-top: 1px solid rgba(36,26,25,0.1);
  padding: 20px 28px 26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:0.82rem; color: var(--ink-soft);
}
.footer-bottom a{ font-weight:600; color: var(--ink); }

/* ===== Subpage hero (photo) ===== */
.sub-hero{
  position: relative;
  min-height: 62vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color: var(--white);
}
.sub-hero .hero-media{ position:absolute; inset:0; }
.sub-hero .hero-media img{ width:100%; height:100%; object-fit:cover; }
.sub-hero .hero-media img.hero-shift-left{ object-position: 58% 40%; }
.sub-hero .hero-shade{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(24,16,15,0.78) 0%, rgba(24,16,15,0.15) 55%, rgba(24,16,15,0.05) 100%);
}
.sub-hero-content{ position:relative; padding-top: 160px; padding-bottom: 60px; }
.sub-hero h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); }
.breadcrumb{ font-size:0.85rem; font-weight:600; margin-bottom:14px; color: rgba(255,255,255,0.85); }
.breadcrumb a{ color: rgba(255,255,255,0.85); }
.breadcrumb a:hover{ color: var(--white); }

/* ===== Simple text hero (non-photo pages) ===== */
.simple-hero{ padding: 170px 0 90px; background: var(--cream-deep); text-align:center; }
.simple-hero h1{ font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom:18px; }
.simple-hero p{ max-width:600px; margin:0 auto; color:var(--ink-soft); font-size:1.1rem; }

/* ===== Content rows (alternating image/text) ===== */
.content-row{
  padding: 90px 0;
  border-bottom: 1px solid rgba(36,26,25,0.08);
}
.content-row:last-of-type{ border-bottom:none; }
.content-row-inner{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items:center;
}
.content-row.reverse .content-row-inner{ direction: rtl; }
.content-row.reverse .content-row-inner > *{ direction: ltr; }
.content-row-media{ display:grid; gap:16px; }
.content-row-media.two-up{ grid-template-columns: 1fr 1fr; }
.content-row-media img{ width:100%; height:100%; object-fit:cover; box-shadow: var(--shadow-sm); }
.content-row-media.two-up img:first-child{ margin-top: 36px; }
.content-row-copy .eyebrow{ margin-bottom:8px; }
.content-row-copy h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom:16px; }
.content-row-copy p{ color: var(--ink-soft); font-size:1.02rem; margin-bottom:14px; }
.content-row-copy p:last-child{ margin-bottom:0; }

.content-row-tint{ background: var(--cream-deep); border-bottom:none; }
.content-row-tint .content-row-inner{ align-items:start; }

.content-row-copy p.handwritten{
  font-family: 'Caveat', cursive; font-size: 1.8rem; font-weight:600;
  color: var(--ink); line-height:1.3;
}
.content-row-copy p.signature{
  font-family: 'Caveat', cursive; font-size: 2.6rem; font-weight:600;
  color: var(--ink); transform: rotate(-4deg);
  margin-top: 12px !important; margin-left: 8px;
}

/* ===== Cross-links "weitere Leistungen" ===== */
.cross-links{ background: var(--cream-deep); padding: 80px 0; }
.cross-links-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; margin-top:32px; }
.cross-link-card{
  background: var(--white); padding: 28px 30px; box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cross-link-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.cross-link-card h3{ font-size:1.1rem; margin-bottom:4px; }
.cross-link-card p{ font-size:0.9rem; color: var(--ink-soft); }
.cross-link-arrow{ font-size:1.4rem; color: var(--coral-dark); flex-shrink:0; }

/* ===== Über uns team blocks ===== */
.team-block{ padding: 90px 0; border-bottom: 1px solid rgba(36,26,25,0.08); }
.team-block:last-of-type{ border-bottom:none; }
.team-block-inner{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:start; }
.team-block.reverse .team-block-inner{ direction: rtl; }
.team-block.reverse .team-block-inner > *{ direction: ltr; }
.team-block-media img{ width:100%; height: 560px; object-fit: cover; object-position: top center; box-shadow: var(--shadow); }
.team-block-copy h2{ font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 6px; }
.team-block-copy .role{ color: var(--coral-dark); font-weight:700; font-size:0.95rem; margin-bottom:22px; }
.team-block-copy p{ color: var(--ink-soft); margin-bottom:16px; font-size:1.02rem; }

/* ===== Video grid ===== */
.video-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.video-grid video{ width:100%; box-shadow: var(--shadow-sm); background:#000; }
@media (max-width: 900px){
  .video-grid{ grid-template-columns: 1fr; }
}

/* ===== Gallery preview + lightbox ===== */
.content-row-media.gallery-preview{
  display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:10px;
  aspect-ratio: 1 / 1;
}
.gallery-thumb{
  position:relative; overflow:hidden; padding:0; border:none; background:none; cursor:pointer;
  display:block; width:100%; height:100%;
}
.gallery-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .4s ease;
}
.gallery-thumb:hover img{ transform: scale(1.06); }
.gallery-thumb-more{
  position:absolute; inset:0;
  background: rgba(24,16,15,0.62);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:1.15rem;
  text-align:center;
}

.lightbox{
  position:fixed; inset:0; z-index:1000;
  background: rgba(15,10,9,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .25s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-figure{
  position:relative; max-width: 90vw; max-height: 84vh;
  display:flex; flex-direction:column; align-items:center;
}
.lightbox-figure img{
  max-width: 90vw; max-height: 78vh; width:auto; height:auto;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.lightbox-counter{ color: rgba(255,255,255,0.75); font-size:0.9rem; margin-top:16px; letter-spacing:0.04em; }
.lightbox-close{
  position:absolute; top:24px; right:24px; z-index:2;
  background:none; border:none; color: var(--white); font-size:2rem; line-height:1;
  cursor:pointer; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,0.12); border:none; color: var(--white);
  width:56px; height:56px; cursor:pointer; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.lightbox-nav:hover{ background: rgba(255,255,255,0.28); }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
@media (max-width: 720px){
  .lightbox-nav{ width:44px; height:44px; font-size:1.3rem; }
  .lightbox-prev{ left:6px; }
  .lightbox-next{ right:6px; }
}

/* ===== Farbpsychologie + Weiterlesen (combined) ===== */
.farbpsych-section{ padding: 90px 0; background: var(--white); text-align:center; }
.farbpsych-grid{ display:flex; flex-direction:column; align-items:center; }
.farbpsych-copy{ max-width: 640px; }
.farbpsych-copy h2{ margin-bottom:18px; }
.farbpsych-copy p{ color: var(--ink-soft); font-size:1.05rem; margin-bottom:14px; }
.farbpsych-copy p:last-child{ margin-bottom:0; }
.farbpsych-box{
  margin-top: 44px; padding-top: 40px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.reading-tip-label{
  font-family: var(--font-display); font-weight:700; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.08em; color: var(--coral-dark);
}
.reading-tip-text{ color: var(--ink-soft); font-size:1rem; max-width:460px; margin-bottom:4px; }

/* ===== Farbwelt quiz ===== */
.quiz-section{ padding: 60px 0 100px; background: var(--cream-deep); }
.quiz-card{
  max-width: 980px; margin: 0 auto;
  background: var(--white);
  padding: 72px 80px;
  box-shadow: var(--shadow);
}
.quiz-intro-text{ max-width: 560px; margin: 0 auto 32px; text-align:center; color: var(--ink-soft); font-size:1.1rem; }

.quiz-progress{ height:6px; background: var(--cream-deep); margin-bottom: 30px; overflow:hidden; }
.quiz-progress-bar{ height:100%; background: var(--coral); width:0%; transition: width .4s ease; }
.quiz-step{ font-size:0.85rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--coral-dark); margin-bottom:12px; }
.quiz-question{ font-size: clamp(1.5rem, 2.8vw, 1.95rem); margin-bottom:28px; line-height:1.3; }

.quiz-options{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:26px; }
.quiz-option{
  display:flex; align-items:center; gap:12px;
  padding: 22px 24px; background: var(--cream); border: 1.5px solid rgba(36,26,25,0.1);
  text-align:left; font-family: var(--font-body); font-size:1.05rem; font-weight:600; color: var(--ink);
  cursor:pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.quiz-option:hover{ border-color: var(--coral); background: var(--cream-deep); transform: translateY(-2px); }
.quiz-back{ background:none; border:none; color: var(--ink-soft); font-weight:600; font-size:0.9rem; cursor:pointer; padding:0; }
.quiz-back:hover{ color: var(--coral-dark); }
.quiz-back:disabled{ visibility:hidden; }

.quiz-result-swatches{ display:flex; justify-content:center; gap:16px; margin-bottom: 26px; }
.quiz-result-swatches img{ width:120px; height:120px; object-fit:cover; box-shadow: var(--shadow-sm); }
.quiz-result-title{ text-align:center; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom:18px; }
.quiz-result-text{ text-align:center; max-width:560px; margin:0 auto 32px; color: var(--ink-soft); font-size:1.05rem; }
.quiz-result-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ===== Legal pages (Impressum / Datenschutz) ===== */
.legal-text{ padding: 80px 0 100px; }
.legal-text .wrap{ max-width: 760px; }
.legal-text h2{
  font-family: var(--font-display); font-size:1.25rem;
  margin-top:44px; margin-bottom:12px;
}
.legal-text h2:first-of-type{ margin-top:0; }
.legal-text p{ color: var(--ink-soft); margin-bottom:16px; line-height:1.75; }
.legal-text a{ color: var(--coral-dark); font-weight:600; }
.legal-text a:hover{ color: var(--ink); }

.footer-legal a{ margin-right:14px; }
.footer-legal a:last-child{ margin-right:0; }

/* ===== Kontakt page ===== */
.kontakt-section{ padding: 90px 0 110px; }
.kontakt-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; }
.kontakt-cards{ display:flex; flex-direction:column; gap:20px; }
.kontakt-card{ background: var(--cream-deep); padding: 26px 28px; }
.kontakt-card h4{ font-family: var(--font-display); font-size:1rem; margin-bottom:10px; }
.kontakt-card p{ color: var(--ink-soft); font-size:0.98rem; }
.kontakt-card a{ color: var(--ink); font-weight:600; }
.kontakt-card a:hover{ color: var(--coral-dark); }

.kontakt-media{ height:100%; min-height:420px; }
.kontakt-media img{ width:100%; height:100%; object-fit:cover; box-shadow: var(--shadow-sm); }

/* ===== Scroll reveal ===== */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .main-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background: var(--cream); flex-direction:column; gap:0;
    box-shadow: var(--shadow-sm);
  }
  .main-nav.nav-open{ display:flex; }
  .main-nav a{ padding: 16px 28px; border-bottom: 1px solid rgba(36,26,25,0.06); }
  .sub-hero .hero-media img.hero-shift-left{ object-position: 58% 30%; }
  .nav-item .submenu{
    display:block; position:static; padding-top:0; min-width:0;
  }
  .submenu-inner{
    background: var(--cream-deep); box-shadow:none; border-top:none; padding:0;
  }
  .submenu a{ padding: 14px 28px 14px 44px; font-size:0.88rem; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
  .nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .leistungen-grid{ grid-template-columns: 1fr; }
  .team-inner{ grid-template-columns: 1fr; }
  .quote-inner{ flex-direction:column; text-align:center; gap:26px; }
  .quote-portrait-frame{ width: min(80vw, 340px); height: min(80vw, 340px); }
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-brand p, .footer-col p{ font-size:1rem; }
  .footer-bottom{ font-size:0.9rem; }
  .content-row{ padding: 48px 0; }
  .hero{ align-items: flex-start; }
  .hero-content{ padding-top:420px; padding-bottom:60px; }
  .hero-media img{ object-position: 20% 22%; }
  .content-row-inner{ grid-template-columns: 1fr; }
  .content-row.reverse .content-row-inner{ direction: ltr; }
  .content-row-media.two-up{ grid-template-columns: 1fr 1fr; }
  .content-row-media.two-up img:first-child{ margin-top:0; }
  .cross-links-grid{ grid-template-columns: 1fr; }
  .team-block-inner{ grid-template-columns: 1fr; }
  .team-block.reverse .team-block-inner{ direction: ltr; }
  .kontakt-grid{ grid-template-columns: 1fr; }
  .kontakt-media{ min-height:300px; }
  .quiz-card{ padding: 36px 24px; }
  .quiz-options{ grid-template-columns: 1fr; }
  .quiz-result-swatches img{ width:90px; height:90px; }
}

/* ===== Cookie notice ===== */
.cookie-notice{
  position: fixed; left:0; right:0; bottom:0; z-index: 300;
  background: var(--ink); color: var(--cream);
  box-shadow: 0 -12px 30px -14px rgba(0,0,0,0.35);
}
.cookie-notice-inner{
  padding: 20px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.cookie-notice p{ font-size:0.92rem; color: rgba(251,246,241,0.85); max-width:640px; margin:0; }
.cookie-notice a{ color: var(--cream); text-decoration:underline; }
.cookie-notice .btn{ flex-shrink:0; }
@media (max-width: 600px){
  .cookie-notice-inner{ padding:18px 20px; }
  .cookie-notice p{ font-size:0.86rem; }
}