/* Farbwerk Hansen — Musterseite zum Paket Basic.
   Charakter: freundlich, handgemacht, farbenfroh. Runde Formen und
   Farbkleckse statt Linien; eine Seite, ein Abschnitt, ein Formular. */
:root{
  --creme:#fbf6ee; --tinte:#23304a; --grau:#5b6373;
  --koralle:#e5532f; --senf:#f4b63f; --petrol:#2f8f83; --rosa:#f7c6c0;
  --r:28px; --rand:clamp(1.25rem,5vw,4rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--creme);color:var(--tinte);
     font-family:"DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:6px}

/* Kopf */
.kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem var(--rand);position:relative;z-index:2}
.logo{display:flex;align-items:center;gap:.6rem;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none}
.logo em{font-style:italic;font-weight:400}
.logo-klecks{width:28px;height:28px;flex-shrink:0;border-radius:58% 42% 55% 45%/48% 60% 40% 52%;
  background:conic-gradient(var(--koralle) 0 25%,var(--senf) 0 50%,var(--petrol) 0 75%,var(--tinte) 0)}
.kopf-tel{font-weight:500;text-decoration:none;white-space:nowrap;padding:.65rem 1.15rem;border:2px solid var(--tinte);border-radius:999px;transition:background .2s,color .2s}
.kopf-tel:hover{background:var(--tinte);color:var(--creme)}

/* Buehne: der eine Abschnitt */
/* overflow:hidden haelt die Farbkleckse im Abschnitt — sonst schieben sie
   die Seite auf dem Handy seitlich auf. */
.buehne{flex:1;position:relative;overflow:hidden;width:100%;max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:center;
  padding:clamp(1rem,3vw,2.5rem) var(--rand) clamp(3rem,6vw,5rem)}
.farben{position:absolute;inset:0;pointer-events:none;z-index:0}
.farben i{position:absolute;display:block;aspect-ratio:1}
.farben i:nth-child(1){width:clamp(200px,28vw,380px);right:4%;top:2%;background:var(--senf);border-radius:58% 42% 55% 45%/48% 60% 40% 52%;animation:schweben 9s ease-in-out infinite}
.farben i:nth-child(2){width:clamp(120px,15vw,210px);right:34%;bottom:4%;background:var(--koralle);border-radius:45% 55% 40% 60%/55% 45% 55% 45%;animation:schweben 11s ease-in-out infinite reverse}
.farben i:nth-child(3){width:clamp(70px,7vw,100px);right:1%;bottom:16%;background:var(--petrol);border-radius:50%}
.farben i:nth-child(4){width:48px;left:47%;top:8%;background:var(--rosa);border-radius:50%}
@keyframes schweben{50%{transform:translate(10px,-14px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.farben i{animation:none}}

.intro,.kontakt{position:relative;z-index:1}
.marke{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;color:var(--petrol);margin-bottom:1.25rem}
.marke::before{content:"";width:30px;height:5px;border-radius:5px;background:currentColor}
h1{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(2.5rem,6vw,5.2rem);line-height:.98;letter-spacing:-.035em;margin-bottom:1.5rem}
h1 em{font-style:italic;font-weight:600;color:var(--koralle);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.2em;border-radius:.1em;background:var(--senf);opacity:.75;z-index:-1}
.text{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.75;color:var(--grau);max-width:34em;margin-bottom:1.75rem}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2.5rem}
.tags li{display:flex;align-items:center;gap:.5rem;padding:.55rem 1.05rem;border-radius:999px;background:#fff;font-weight:500;font-size:.92rem;box-shadow:0 2px 0 rgba(35,48,74,.07)}
.tags li::before{content:"";width:.65em;height:.65em;border-radius:50%;background:var(--c,var(--koralle))}
.tags li:nth-child(2){--c:var(--senf)} .tags li:nth-child(3){--c:var(--petrol)} .tags li:nth-child(4){--c:var(--tinte)}
.fakten{display:flex;flex-wrap:wrap;gap:1.5rem 2.75rem}
.fakten strong{display:block;font-family:"Fraunces",Georgia,serif;font-size:2.1rem;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.fakten span{font-size:.88rem;color:var(--grau)}

/* Kontaktkarte */
.kontakt{background:#fff;border-radius:var(--r);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:0 30px 60px -24px rgba(35,48,74,.28)}
.kontakt h2{font-family:"Fraunces",Georgia,serif;font-size:1.8rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.4rem}
.kontakt>p{color:var(--grau);line-height:1.6;margin-bottom:1.5rem;font-size:.97rem}
form{display:grid;gap:1rem}
label{display:grid;gap:.4rem;font-size:.88rem;font-weight:500}
input,textarea{width:100%;font:inherit;font-weight:400;color:inherit;padding:.85rem 1rem;border:2px solid #efe7d9;border-radius:16px;background:var(--creme);resize:vertical;transition:border-color .2s,background .2s}
input:focus,textarea:focus{outline:none;border-color:var(--petrol);background:#fff}
.einwilligung{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.82rem;line-height:1.5;color:var(--grau)}
.einwilligung input{width:auto;margin-top:.2rem;accent-color:var(--petrol)}
button[type=submit]{font:inherit;font-weight:700;font-size:1rem;border:0;border-radius:999px;padding:1rem 1.5rem;cursor:pointer;
  background:var(--tinte);color:#fff;box-shadow:0 6px 0 var(--koralle);transition:transform .15s,box-shadow .15s}
button[type=submit]:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--koralle)}
button[type=submit]:active{transform:translateY(6px);box-shadow:0 0 0 var(--koralle)}
.rm-form-hinweis{background:#e3f2ef;color:#1d6a61}

/* Fuss */
.fuss{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.5rem var(--rand) 5rem;font-size:.88rem;color:var(--grau);position:relative;z-index:1}
.fuss nav{display:flex;gap:1.25rem}
.fuss a{text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.fuss a:hover{border-color:var(--koralle)}

/* Rechtliches */
.recht{width:min(760px,calc(100% - 2.5rem));margin:.5rem auto 3rem;background:#fff;border-radius:var(--r);padding:clamp(1.5rem,5vw,3.5rem)}
.zurueck{display:inline-block;font-weight:500;text-decoration:none;color:var(--petrol);margin-bottom:1.25rem}
.recht-hinweis{background:#fdf0dc;border-radius:16px;padding:1rem 1.25rem;font-size:.92rem;line-height:1.6}
.recht h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:1.75rem 0 1rem}
.recht h2{font-family:"Fraunces",Georgia,serif;font-size:1.2rem;letter-spacing:-.01em;margin:1.75rem 0 .4rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.recht p{line-height:1.75;color:#3f4757}

@media (max-width:880px){
  .buehne{grid-template-columns:minmax(0,1fr)}
  .farben i:nth-child(1){top:auto;bottom:38%;right:-18%}
  .farben i:nth-child(2){right:auto;left:-12%;bottom:30%}
  /* Der kleine rosa Klecks landet einspaltig genau auf der Dachzeile */
  .farben i:nth-child(4){display:none}
}
@media (max-width:420px){
  .kopf{padding-block:1.1rem}
  .logo{font-size:1.15rem}
  /* Nummer und Logo passen nicht nebeneinander. Sichtbar steht „Anrufen",
     die Nummer bleibt als Text im Link und damit fuer Screenreader lesbar. */
  .kopf-tel{padding:.55rem .95rem;font-size:0}
  .kopf-tel::before{content:"Anrufen";font-size:.9rem}
}

/* Sehr kleine Handys (320px): Logo und Anrufen-Knopf passten nicht nebeneinander,
   der Knopf ragte 16px aus dem Bild und die Seite liess sich seitlich schieben. */
@media (max-width:360px){
  .kopf{gap:.5rem}
  .logo{font-size:1rem;gap:.45rem;min-width:0}
  .logo-klecks{width:22px;height:22px}
  .kopf-tel{padding:.5rem .8rem}
}