/* Frisörsalon Aloisia */

@font-face{font-family:"Inclusive Sans";src:url("schrift/inclusive-sans-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inclusive Sans";src:url("schrift/inclusive-sans-latin-400-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inclusive Sans";src:url("schrift/inclusive-sans-latin-700-normal.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --blau:#183E98;--gold:#AA8E51;--gold-hell:#E3C177;
  --gelb:#FFD23F;--pink:#FF3D8B;--oliv:#9AA61F;--violett:#7B4DEA;
  --tinte:#101322;--papier:#F4F1E8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inclusive Sans",system-ui,sans-serif;font-size:18px;line-height:1.5;
  color:var(--tinte);background:var(--papier);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
/* Sichtbare Markierung für alle, die mit der Tastatur navigieren */
:focus-visible{outline:3px solid var(--gold-hell);outline-offset:3px}
.f-gelb :focus-visible,.f-papier :focus-visible,.f-oliv :focus-visible{outline-color:var(--tinte)}
img{display:block;max-width:100%}
/* iOS faerbt Knopftext sonst systemblau, deshalb ueberall die Textfarbe erben */
button{color:inherit;-webkit-appearance:none;appearance:none;border-radius:0}

/* ---------- Hero ---------- */
.hero{background:var(--blau);color:var(--papier);min-height:100svh;display:flex;flex-direction:column;
  justify-content:space-between;padding:30px clamp(20px,5vw,64px) 0}
.hero-kopf{display:flex;justify-content:flex-start;align-items:flex-start}
.hero-kopf nav{display:flex;gap:clamp(16px,2.6vw,40px);flex-wrap:wrap;
  font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--gold-hell)}
.hero-kopf a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.hero-kopf a:hover{color:#fff;border-color:var(--gold-hell)}

.hero-mitte{flex:1;display:flex;align-items:center;gap:clamp(20px,5vw,56px);padding:34px 0}
.wortmarke{font-size:clamp(2.3rem,9.3vw,8.3rem);line-height:.83;font-weight:700;
  letter-spacing:-.045em;text-transform:uppercase}
.wortmarke .zwei{color:var(--gold-hell)}
.claim{margin-top:clamp(18px,2.6vw,30px);font-size:clamp(1.15rem,3.1vw,2.35rem);
  line-height:1.08;letter-spacing:-.015em;color:#fff;opacity:.92}
.logo-buehne{width:clamp(96px,15vw,210px);flex:0 0 auto;perspective:900px;margin-left:clamp(8px,3vw,54px)}
.dreher{transform-style:preserve-3d;width:100%;aspect-ratio:3/4;position:relative}
.dreher .schicht{position:absolute;inset:0}
.dreher svg{width:100%;height:100%;display:block}

.hero-fuss{border-top:1px solid rgba(227,193,119,.4);display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:20px 0 28px;font-size:clamp(1rem,1.35vw,1.24rem)}
.hero-fuss a{text-decoration:none;color:var(--gold-hell);font-weight:700}

/* ---------- Raster ---------- */
/* 24 Spalten: erlaubt halbe Schritte, damit Bildkacheln genau ins Hochformat passen */
.raster{display:grid;grid-template-columns:repeat(24,1fr)}
.b{padding:clamp(24px,2.9vw,40px)}
.b h2{font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.06;font-weight:700;letter-spacing:-.025em}
/* Alle Bereichsbeschriftungen in einer Größe, ohne Versalien */
.b .label,.waehler-text .label{font-size:clamp(1rem,1.15vw,1.1rem);letter-spacing:0;
  text-transform:none;opacity:.72;margin-bottom:9px}
.b p{font-size:1.04rem}
.b p+p{margin-top:12px}
/* .b p ist spezifischer, deshalb hier mit .b davor */
/* Bleibt als Einheit in einer Zeile, statt mitten im Begriff zu brechen */
.zusammen{white-space:nowrap}
.b .gross{font-size:clamp(1.5rem,3.9vw,3.3rem);line-height:1;font-weight:700;letter-spacing:-.035em;white-space:nowrap}
.b .gross-unter{margin-top:14px;font-size:clamp(1.15rem,2.3vw,1.9rem);line-height:1.15;letter-spacing:-.015em}
.sp12{grid-column:span 24}.sp8{grid-column:span 16}.sp7{grid-column:span 14}
.sp6{grid-column:span 12}.sp5{grid-column:span 10}.sp4{grid-column:span 8}.sp3{grid-column:span 6}
.sp15{grid-column:span 15}.sp9{grid-column:span 9}
.f-gelb{background:var(--gelb)}
.f-blau{background:var(--blau);color:var(--papier)}
.f-pink{background:var(--pink);color:#fff;display:flex;flex-direction:column;justify-content:flex-start}
.f-oliv{background:var(--oliv)}
.f-violett{background:var(--violett);color:#fff}
.f-papier{background:var(--papier)}
.f-tinte{background:var(--tinte);color:var(--papier)}

.zeiten div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;
  border-bottom:1px solid rgba(16,19,34,.18);
  font-size:clamp(1.15rem,2.3vw,1.9rem);line-height:1.15;letter-spacing:-.015em}
.zeiten div:last-child{border:0}

/* ---------- Bewertungen ---------- */
.karussell{position:relative;min-height:196px;transition:height .5s cubic-bezier(.2,.8,.3,1)}
.stimme{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateX(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.3,1);
  pointer-events:none}
.stimme.da{opacity:1;transform:none;pointer-events:auto}
.stimme .zitat{font-size:clamp(1.02rem,1.7vw,1.3rem);line-height:1.32;max-width:56ch;
  overflow-wrap:anywhere}
.stimme .wer{margin-top:18px;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase}
.sterne{letter-spacing:.2em;margin-top:6px}
.steuerung{display:flex;gap:8px;align-items:center;margin-top:16px;position:relative;z-index:2}
.steuerung button{width:38px;height:38px;border:1px solid rgba(16,19,34,.45);background:transparent;
  cursor:pointer;font-size:1.1rem;line-height:1;font-family:inherit;
  color:inherit}
.steuerung button:hover{background:rgba(16,19,34,.12)}
.punkte{display:flex;gap:7px;margin-left:12px}
.punkte i{width:8px;height:8px;background:rgba(16,19,34,.3);display:block}
.punkte i.da{background:var(--tinte)}

/* ---------- Bilder ---------- */
.bildfeld{position:relative;overflow:hidden;background:#d9d3c4;min-height:340px}
.bildfeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Das Porträt ist von Jonas selbst zugeschnitten. Wo die Kachel schmaler ist
   als das Bild, wird links beschnitten, damit der rechte Rand stehen bleibt. */
.bildfeld.voll img{object-position:78% center}
.panorama-links img{object-position:left center}
.panorama-rechts img{object-position:right center}
/* Bildkacheln, die durchwechseln */
.wechsel img{opacity:0;transition:opacity 1s ease}
.wechsel img.da{opacity:1}
/* Eine Kachel über zwei Textblöcke: die Hochkantfotos werden kaum beschnitten */
.zwei-reihen{grid-row:span 2}
.hochkant{min-height:560px}
.hoch{aspect-ratio:3/4}
.quer{aspect-ratio:4/3}

/* ---------- Charakterwähler ---------- */
.waehler{display:grid;grid-template-columns:5fr 7fr;background:var(--blau);color:var(--papier)}
.waehler-buehne{background:#FBF7F1;display:grid;place-items:center;padding:14px;min-height:440px}
.waehler-buehne svg{width:100%;height:auto;max-height:600px;display:block}
.waehler-text{padding:clamp(26px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center;
  min-width:0}
.waehler-text h2{font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.06;font-weight:700;letter-spacing:-.025em}
.waehler-text p{font-size:1.04rem;max-width:46ch}
#waehler-pult{margin-top:22px;display:grid;gap:18px;max-width:760px;min-width:0}
/* Frisur, Gesicht, Bart links, Brille und Kleidung rechts daneben */
.regler-feld{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);
  grid-template-columns:1fr 1fr;gap:14px clamp(20px,3vw,44px);min-width:0}
.regler{min-width:0}
.waehler-titel{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0;
  overflow-wrap:anywhere;
  font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-hell);margin-bottom:5px}
.waehler-zeile{display:flex;align-items:center;gap:12px;min-width:0}
.waehler-zeile .pfeil{width:36px;height:36px;flex:0 0 auto;border:1px solid rgba(244,241,232,.45);background:transparent;
  color:var(--papier);font-size:1.15rem;line-height:1;cursor:pointer;font-family:inherit}
.waehler-zeile .pfeil:hover{background:rgba(244,241,232,.16)}
.waehler-zeile .wert{flex:1;min-width:0;font-size:1.05rem;font-weight:700;text-align:center;
  overflow-wrap:anywhere;hyphens:auto}
.waehler-titel .zaehler{font-size:.78rem;font-style:normal;opacity:.6;letter-spacing:0}
.farben{display:flex;gap:7px;flex-wrap:wrap}
.farben button{width:28px;height:28px;border:2px solid rgba(244,241,232,.3);cursor:pointer;padding:0}
.farben button[aria-pressed="true"]{border-color:var(--papier)}
.waehler-aktionen{display:flex;gap:10px;flex-wrap:wrap}
.waehler-aktionen button{background:var(--gelb);color:var(--tinte);border:0;padding:12px 20px;
  font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer}
.waehler-aktionen button:hover{background:var(--gold-hell)}
.waehler-aktionen button.zweit{background:transparent;color:var(--papier);
  border:1px solid rgba(244,241,232,.5)}
.waehler-aktionen button.zweit:hover{background:rgba(244,241,232,.16);color:var(--papier)}

/* ---------- Vermietung ---------- */
/* Immer zwei oder vier Spalten: bei drei bliebe neben der Leinwand eine leere Zelle */
.merkmale{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:26px;background:rgba(255,255,255,.35)}
.merkmale div{background:var(--pink);padding:16px 14px;min-width:0}

.merkmale b{display:block;font-size:1.45rem;line-height:1.1;overflow-wrap:anywhere}
.merkmale span{font-size:.9rem;opacity:.9}
.mailknopf{display:inline-block;align-self:flex-start;margin-top:26px;background:#fff;color:var(--pink);
  padding:15px 26px;text-decoration:none;font-weight:700;font-size:1.08rem}
.mailknopf:hover{background:var(--gelb);color:var(--tinte)}

@media(min-width:1150px){.merkmale{grid-template-columns:repeat(4,1fr)}}
/* Sehr schmal oder hineingezoomt: eine Spalte. 1, 2 und 4 teilen die vier
   Einträge restlos auf, deshalb bleibt nie eine leere Zelle übrig. */
@media(max-width:340px){
  .merkmale{grid-template-columns:1fr}
  /* Hier darf alles umbrechen, statt aus der Kachel zu laufen */
  .b .gross{white-space:normal;font-size:1.35rem}
  .zusammen{white-space:normal}
}

/* ---------- Karte ---------- */
.kartenfeld{position:relative;min-height:460px;height:100%;overflow:hidden;background:#e8e3d6}
.kartenfeld img.plan{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kartenfeld iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kartenhinweis{position:absolute;left:0;right:0;bottom:0;padding:22px clamp(18px,2.6vw,32px);
  background:rgba(16,19,34,.9);color:var(--papier);display:flex;gap:18px;align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.kartenhinweis p{font-size:.9rem;opacity:.8;max-width:46ch}
.kartenhinweis button{background:var(--gelb);color:var(--tinte);border:0;
  padding:13px 24px;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;white-space:nowrap}

footer{background:var(--blau);color:rgba(244,241,232,.8);border-top:1px solid rgba(227,193,119,.35);padding:44px clamp(20px,5vw,64px) 60px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.94rem}
footer a{color:var(--gold-hell)}

/* ---------- Rechtsseiten ---------- */
.recht{max-width:760px;margin:0 auto;padding:60px 24px 90px}
.recht a.zurueck{display:inline-block;margin-bottom:34px;font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;color:var(--gold)}
.recht h1{font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.03em;margin-bottom:28px;color:var(--blau)}
.recht h2{font-size:1.2rem;margin-top:34px;margin-bottom:10px;font-weight:700}
.recht p{margin-top:10px}
.recht ul{margin:10px 0 0 20px}
.recht li{margin-top:6px}

@media(max-width:900px){
  .sp8,.sp7,.sp6,.sp5,.sp4,.sp3,.sp15,.sp9{grid-column:span 24}
  .zwei-reihen{grid-row:auto}
  .hochkant{min-height:340px}
  .hero-mitte{flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
  /* Auf dem Tablet dürfen Navigation und Logo mitwachsen */
  .logo-buehne{width:clamp(120px,23vw,230px);order:-1;margin-left:0}
  .hero-kopf nav{font-size:clamp(1.05rem,2.9vw,1.75rem);gap:clamp(16px,3.2vw,34px)}
  .hero-fuss{font-size:clamp(.95rem,2.1vw,1.3rem)}
  /* Auf dem Handy bleibt die Figur oben stehen, während man unten auswählt */
  .waehler{display:block}
  .waehler-buehne{position:sticky;top:0;z-index:4;min-height:0;height:36svh;padding:8px;
    overflow:hidden;box-shadow:0 8px 20px rgba(16,19,34,.16)}
  .waehler-buehne svg{height:100%;width:auto;max-width:100%;max-height:none}
  .regler-feld{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
    grid-template-rows:auto;gap:12px 14px}
  .regler-feld .regler:nth-child(1){grid-column:1/-1}
  .waehler-zeile .pfeil{width:34px;height:34px}
  .waehler-zeile .wert{font-size:.98rem}
  .waehler-titel{font-size:.86rem}
  /* Hochkantfotos bleiben hochkant, statt auf ein Querformat beschnitten zu werden */
  .bildfeld{min-height:0;aspect-ratio:3/4}
  /* auf dem Handy vollständig, ohne jeden Beschnitt */
  .bildfeld.voll{aspect-ratio:2706/3237}
  .kartenfeld{aspect-ratio:auto}
  /* Höhe folgt der sichtbaren Bewertung, deshalb kein unteres Anhaften */
  .stimme{bottom:auto;justify-content:flex-start}
  .stimme .zitat{font-size:1rem;line-height:1.3}
  .karussell{min-height:120px}
  .kartenfeld{min-height:400px}
}

/* Mittlere Bildschirme: die Bildspalte bekommt etwas mehr Breite,
   sonst wird das Hochformat zu schmal beschnitten. */
@media(min-width:901px) and (max-width:1299px){
  .sp15{grid-column:span 13}
  .sp9{grid-column:span 11}
  #raum{grid-column:span 14}
  .hochkant{grid-column:span 10}
}

/* Zwischen Handy und Rechner: die Fotos laufen nicht mehr über die volle Breite,
   sonst wären sie im Hochformat höher als der Bildschirm. */
@media(min-width:560px) and (max-width:900px){
  .bildfeld{width:min(100%,62vw);margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ---------- 404 ---------- */
.verirrt{min-height:100svh;background:var(--blau);color:var(--papier);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,6vw,90px);gap:14px}
.verirrt .label{font-size:clamp(1rem,1.15vw,1.1rem);opacity:.72;color:var(--gold-hell)}
.verirrt h1{font-size:clamp(2rem,6vw,4.4rem);line-height:1;font-weight:700;letter-spacing:-.035em}
.verirrt p{max-width:46ch;font-size:1.04rem}
.verirrt .wege{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.verirrt .wege a{color:var(--gold-hell);font-weight:700;font-size:1.15rem}