/* arthurbaum.com — Statik-Neubau
   Alle Werte sind der Live-Site abgemessen (Viewport 1440x900, 2026-10-19):
   Karla 400/700/800, Rand #111, Text #fafafa 15px/20/ls3, Ueberschriften 36/46/ls11.04,
   Nav 16/16/ls7.73, Akzent #cc3366, Rosa #fbacc5, Muted #69727d, Grau #b3b1b1. */

@font-face{font-family:Karla;src:url(../fonts/karla-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --bg:#111;
  --fg:#fafafa;
  --muted:#69727d;
  --grey:#b3b1b1;
  --accent:#cc3366;
  --pink:#fbacc5;
  --head:700 36px/46px Karla,sans-serif;
  --track:11.04px;
  --track-nav:7.73px;
  /* Harte Kante: ab dieser Breite wachst der Inhalt nicht mehr mit, die
     Restflaechen bleiben Seitenhintergrund (wie beim Showreel auf der Startseite).
     Eine Zahl, ein Regler — alles (Kopf, Sektionen, Raster) haengt daran. */
  --stop:1920px;
  /* Einheitlicher Seitenrand: links und rechts auf JEDER Seite derselbe Wert.
     Waechst mit dem Fenster (2 %), auf Mobile mindestens 20 px.
     Er ersetzt das alte 10-px-Wrap-Padding von Elementor. */
  --gut:max(20px,calc(10px + 2%));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:800 15px/20px Karla,sans-serif;letter-spacing:3px;
}
img,video,iframe{display:block;max-width:100%}
a{color:var(--fg);text-decoration:none}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* ---------- Kopfzeile: 96 px, Logo + Claim links, Nav mittig, Icons rechts ---------- */
.site-head{
  display:flex;align-items:center;gap:24px;
  height:96px;padding:14px 72px 0;
  /* Live: zwischen Header (96 px) und erster Sektion liegen 15 px, die mit der
     Sektions-Margin kollabieren (toska: 28,8 px statt 15 + 28,8). */
  margin:0 auto 15px;max-width:var(--stop);
}
.brand{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.brand img{width:62px;height:62px;object-fit:contain}
.brand-tag{font:800 15px/20px Karla,sans-serif;letter-spacing:3px;color:var(--fg)}
.brand-tag em{font-style:normal;color:var(--pink)}
.nav{flex:1 1 auto;display:flex;justify-content:center;gap:30px}
.nav a{
  font:400 16px/16px Karla,sans-serif;letter-spacing:var(--track-nav);text-transform:uppercase;
  color:var(--fg);padding:8px 0;
}
.nav a:hover{color:var(--pink)}
.nav a.on{color:var(--pink)}
.head-social{flex:0 0 auto;display:flex;gap:40px;margin-right:41px;color:var(--fg)}
.head-social .icon{color:var(--fg)}

.icon{display:inline-flex;width:21px;height:21px;color:var(--muted)}
.icon svg{width:100%;height:100%;fill:currentColor}
a.icon:hover{color:var(--pink)}

/* ---------- Inhalt: volle Breite, 10 px Rand wie im Original ---------- */
/* Inhalt wachst mit dem Fenster bis zur harten Kante (--stop); enger wird es
   innerhalb der Sektionen (z. B. .sec.boxed auf 1140 px). */
main{max-width:var(--stop);margin:0 auto}
main h1,main h2{margin:0;font:var(--head);letter-spacing:var(--track);text-transform:uppercase;color:var(--fg)}
main h3,main h4,main h5,main h6{margin:0;color:var(--fg)}
/* Ueberschriften ausserhalb einer Sektion bekommen denselben 10 px Rand */
/* WordPress/Elementor: Absatz-Abstand 0.8em, auch auf dem letzten <p> */
.prose{display:flex;flex-direction:column}
.prose p{margin:0 0 .8em}
.prose a{color:var(--accent)}
.prose a:hover{color:var(--pink)}
.prose em,.prose strong{font-style:normal;font-weight:800}

/* ---------- Rechtsseiten: Impressum und Datenschutz ---------- */
/* Diese Seiten stammen aus dem WordPress-Thema, nicht von Elementor: ruhige
   Typografie (400 / 16 px, normale Grossschreibung) im 1140-Container. */
.doc{max-width:var(--stop);margin:0 auto;padding:10px var(--gut) 0}
/* Die Sektion fuellt die Seite (die zentrierenden Randzonen des Originals
   verpuffen, weil keine freie Breite uebrig bleibt), die Textspalte selbst ist
   auf 1140 px begrenzt und buendig am gemeinsamen Seitenrand. */
.doc .sec.boxed{max-width:none}
.doc .sec .col{--colpad:0px;padding:10px 0}
.doc h1{font:700 40px/48px Karla,sans-serif;letter-spacing:normal;text-transform:none;margin:0 0 16px}
.doc h2{font:700 32px/38.4px Karla,sans-serif;letter-spacing:normal;text-transform:none;margin:0 0 16px}
.doc h3{font:700 24px/30px Karla,sans-serif;letter-spacing:normal;text-transform:none;margin:0 0 16px}
.doc .prose{display:block;max-width:1140px;font:400 16px/25px Karla,sans-serif;letter-spacing:normal}
.doc .prose p{margin:8px 0}
.doc .prose em{font-style:italic;font-weight:400}
.doc .prose strong,.doc .prose b{font-weight:700}

/* Zeilen = die zweispaltigen Sektionen des Originals */
/* Sektionen: randlos mit %-Padding oder innenliegende Box (Elementor-Default 1140) */
.sec{width:100%}
.sec.boxed{max-width:1140px;margin-left:auto;margin-right:auto}
.sec.cols{display:flex;align-items:flex-start}
/* Sektions-Hoehe: min-height + vertikale Ausrichtung des Inhalts.
   Elementor streckt die Spalte und zentriert erst deren Inhalt. */
.sec.vcenter{display:flex;align-items:stretch}
.sec.vcenter .col,.sec.vcenter .colw{display:flex;flex-direction:column;justify-content:center}
.sec.vend{display:flex;align-items:flex-end}
/* Elementor-Padding sitzt auf dem Widget-Wrap: 10px in ALLEN Seiten
   (elementor-column-gap-default), bei gap:no ueberall 0.
   Wie im Original ist der Wrap eine Flex-Spalte: eigene Widget-Maendzen
   addieren sich zum 20-px-Standardabstand und fallen nicht weg. */
.sec .col{--colpad:var(--gut);min-width:0;padding:10px var(--colpad);display:flex;flex-direction:column}
/* Sektionen ohne Spaltenabstand (gap:no) haben innen keinen Rand */
.sec.gap-no .col{--colpad:0px;padding:0}
/* Innenliegende Sektionen buendig mit dem Eltern-Inhalt (Elementor-Verhalten) */
.sec .col > .sec{margin-left:calc(-1 * var(--colpad));margin-right:calc(-1 * var(--colpad))}
.sec.cols .col > *:last-child,.sec .col > *:last-child{margin-bottom:0}
/* Spalten-Wrap: traegt das Spalten-Padding, damit %-Werte wie im Original
   gegen die Spaltenbreite aufgeloeset werden */
.colw{width:100%;min-width:0;display:flex;flex-direction:column}
.sec .colw > .sec{margin-left:calc(-1 * var(--colpad));margin-right:calc(-1 * var(--colpad))}
.sec .colw > *:last-child{margin-bottom:0}
/* Elementor haengt den Abstand an das Widget, nicht an sein Inneres:
   im Standard 20 px zwischen den Widgets einer Spalte. */
.sec .col > *,.sec .colw > *{margin-bottom:20px}

/* ---------- Videos ---------- */
.video{position:relative;width:100%;aspect-ratio:16/9;background:#000 center/cover no-repeat;margin:0}
video.video{aspect-ratio:auto}
.facade{cursor:pointer;border:0}
.facade::after{
  content:"";position:absolute;inset:0;background:rgba(17,17,17,.25);
  transition:background .3s ease;
}
.facade:hover::after{background:rgba(17,17,17,0)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;
  width:72px;height:72px;border-radius:50%;
  background:transparent;border:2px solid var(--pink);color:var(--pink);
  cursor:pointer;transition:background-color .3s ease;
}
.play::before{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent currentColor;
}
.play:hover{background:rgba(251,172,197,.18)}

/* ---------- Startseite: grosses Showreel + Unreel-Button ---------- */
/* Das Showreel laeuft wie im Original bis an die Fensterraender (randlos),
   alles andere haengt an der harten Kante (--stop). Das Bild selbst wird nie
   groesser als der sichtbare Bereich (kein Abschneiden unten). */
.hero{
  position:relative;margin:0 calc(50% - 50vw) 30px;
  --heroH:calc(100vh - 111px);--heroH:calc(100svh - 111px);
}
.hero .video{margin:0;aspect-ratio:auto;height:var(--heroH);background:var(--bg)}
/* Zentrierung ueber inset+auto-Raender (ganzzahlig), nicht per transform:
   ein halbzahliger Transform-Versatz laesst eine Subpixel-Zeile des
   Hintergrundes durchscheinen — als heller Streifen am Videorand sichtbar. */
.hero .video iframe{
  inset:0;margin:auto;z-index:1;
  width:min(100%, calc(var(--heroH) * 16 / 9));height:auto;aspect-ratio:16/9;
}
/* Poster des Hero-Facades: gleiche Geometrie wie das iframe, damit der
   Tausch beim Klick keinen Sprung macht. */
.hero .video img{
  position:absolute;inset:0;margin:auto;z-index:1;
  width:min(100%, calc(var(--heroH) * 16 / 9));height:auto;object-fit:contain;
}
/* Selbst gehosteter Hero-Clip: der Container traegt das Poster (Hintergrund, vom
   Build inline gesetzt) und die Letterbox-Baender. background-size:contain passt
   exakt in die Geometrie des video-Elements, darum gibt es beim ersten Bild keinen
   Sprung. Ein poster-Attribut wuerde das Bild auch im display:none-Zweig laden. */
.hero .video.self{background-color:var(--bg);background-position:center;background-size:contain;background-repeat:no-repeat}
.hero .video video{
  position:absolute;inset:0;margin:auto;z-index:1;
  width:min(100%, calc(var(--heroH) * 16 / 9));height:auto;object-fit:contain;
}
.hero .play{top:auto;bottom:28px;transform:translateX(-50%);width:56px;height:56px;z-index:11}
.hero-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;
  background:transparent;border:2px solid var(--pink);border-radius:2px;color:var(--fg);
  font:700 16px/24px Karla,sans-serif;letter-spacing:normal;text-transform:uppercase;
  padding:15px 30px;white-space:nowrap;transition:background-color .3s ease;
}
.hero-btn:hover{background:var(--pink)}
.hero-mobile{display:none}

/* ---------- Raster: 3 Spalten, 16:9, ohne Abstand, ohne Beschriftung ---------- */
/* Live: Sektions-Margin 1% (14,39 px) + 10 px Wrap-Padding, Buttons 17 px /
   Zeilenhoehe 50 px + 8 px Padding -> Box 66 px, danach 10 px bis zum Raster. */
.filters{display:flex;justify-content:center;gap:10px;margin:14.3906px 0 10px;padding-top:10px}
.filters button{
  background:none;border:0;color:var(--fg);cursor:pointer;
  font:800 17px/50px Karla,sans-serif;letter-spacing:var(--track-nav);text-transform:uppercase;
  padding:8px;
}
.filters button:hover{color:var(--pink)}
/* Live: nur zwei Farben — Weiss und dasselbe helle Pink wie die aktive
   Navigation; kein zweites, dunkleres Akzess-Pink. */
.filters button.on{color:var(--pink)}
/* Raster wie im Original: 3 Spalten ohne Abstand, Randzonen = gemeinsamer
   Seitenrand --gut (auf 1440 px = 38,5 px, auf 390 px = 20 px). */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 var(--gut) 40px}
.tile img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:opacity .3s ease}
.tile:hover img{opacity:.75}
.tile[hidden]{display:none}

/* ---------- Galerien und Einzelbilder ---------- */
.gallery{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--ggap,10px);margin:0}
/* Das Gallery-Widget kann ein festes Seitenverhaeltnis erzwingen (z.B. 16:9). */
.gallery figure{aspect-ratio:var(--far,auto);overflow:hidden}
.gallery figure img{width:100%;height:100%;object-fit:cover}
/* Basic Gallery: Bilder randlos untereinander (6 px Abstand wie im Original) */
.gallery.stack{display:block}
.gallery.stack figure{margin:0 0 6px}
/* Gallery-Widget: Masonry mit Spalten (Toska: 2) */
.gallery.masonry{display:block;column-count:var(--cols,2);column-gap:var(--ggap,10px)}
.gallery.masonry figure{margin:0 0 var(--ggap,10px);break-inside:avoid}
.gallery img,.image img{width:100%;height:auto}
figure{margin:0}

/* ---------- Formulare (Zeilenbreite = Spaltenbreite, wie im Original) ---------- */
/* Live zaehlt den letzten Feld-Abstand (15 px) noch in die Formular-Box.
   Die Felder wachsen mit der Spalte, damit sie buendig unter der Ueberschrift
   stehen (auf 1440 px = 345 px, auf breiten Viewports entsprechend mehr). */
.contact-form{display:flex;flex-direction:column;gap:15px;width:100%;margin:0 0 30px;padding-bottom:15px}
.contact-form input,.contact-form textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--fg);border-radius:0;
  color:var(--fg);font:400 16px/25px Karla,sans-serif;letter-spacing:normal;padding:8px 16px;
}
.contact-form input{height:42px}
.contact-form textarea{min-height:111px;resize:vertical}
.contact-form ::placeholder{color:var(--fg);opacity:1}
.contact-form input:focus,.contact-form textarea:focus{outline:0;border-bottom-color:var(--pink)}
.contact-form button{
  align-self:center;height:40px;background:transparent;border:3px solid var(--pink);border-radius:0;color:var(--fg);
  font:800 16px/16px Karla,sans-serif;letter-spacing:7.73px;text-transform:uppercase;
  padding:0 15px;cursor:pointer;transition:background-color .3s ease;
}
.contact-form button:hover{background:var(--pink)}

/* ---------- "BACK" ---------- */
.back{margin:40px 0 10px;text-align:center}
.back a,.back button{
  display:inline-block;background:var(--bg);border:3px solid var(--pink);border-radius:1px;color:var(--fg);
  font:700 16px/16px Karla,sans-serif;letter-spacing:var(--track-nav);text-transform:uppercase;
  padding:12px 24px;cursor:pointer;transition:background-color .3s ease;
}
.back a:hover{background:var(--pink)}

/* ---------- Fusszeile: Icons, Copyright, Rechtslinks — alles mittig ---------- */
.site-foot{text-align:center;padding:50px 20px 60px}
.site-foot .foot-social{display:flex;justify-content:center;gap:22px;margin-bottom:26px}
.site-foot .copy{
  margin:0 0 18px;font:400 16px/16px Karla,sans-serif;
  letter-spacing:var(--track-nav);text-transform:uppercase;color:var(--grey);
}
.site-foot .legal{margin:0;display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
.site-foot .legal a{
  font:700 12px/25px Karla,sans-serif;letter-spacing:5px;text-transform:uppercase;color:var(--fg);
}
.site-foot .legal a:hover{color:var(--pink)}

.warn{color:var(--accent);margin:0 0 30px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Skip-Link: unsichtbar, bis sie per Tastatur fokussiert wird */
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--pink);color:#111;padding:10px 16px}
.skip:focus{top:8px}

/* ---------- Mobiles Menue (Overlay wie im Original: rechtsbuendige Links) ---------- */
.burger{display:none;flex-direction:column;justify-content:center;gap:6px;width:32px;height:32px;margin-left:auto;background:none;border:0;padding:0;cursor:pointer}
.burger span{display:block;height:3px;background:var(--fg)}
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--bg);padding:24px 24px 40px;display:flex;flex-direction:column}
.mobile-menu[hidden]{display:none}
.mm-close{align-self:flex-end;background:none;border:0;color:var(--fg);font:400 42px/1 Karla,sans-serif;cursor:pointer;padding:0}
.mobile-menu nav{display:flex;flex-direction:column;align-items:flex-end;gap:26px;margin:26px 0 20px}
.mobile-menu nav a{font:800 28px/28px Karla,sans-serif;letter-spacing:6px;text-transform:uppercase;color:var(--fg);text-decoration:none}
.mobile-menu nav a:hover,.mobile-menu nav a.on{color:var(--pink)}
.mobile-menu hr{border:0;border-top:1px solid var(--fg);margin:0 0 26px}
.mm-social{display:flex;justify-content:flex-end;gap:26px}
.mm-social .icon{color:var(--fg)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .site-head{padding:0 var(--gut)}
  main h1,main h2{font-size:28px;line-height:36px;letter-spacing:8px}
}
@media (max-width:760px){
  .site-head{height:108px;padding:23px var(--gut)}
  .nav,.head-social,.hero-btn{display:none}
  .burger{display:flex;margin-right:12px}
  main h1,main h2{font-size:22px;line-height:30px;letter-spacing:6px}
  .sec.cols{flex-direction:column}
  .sec.cols .col{width:100%!important}
  .grid{grid-template-columns:1fr}
  .gallery.grid{grid-template-columns:1fr}
  .hero-mobile{display:block}
  .hero{--heroH:calc(100vh - 123px);--heroH:calc(100svh - 123px)}
  .hero .video iframe{width:min(100%, calc(var(--heroH) * 9 / 16));aspect-ratio:9/16}
  .hero .video img{width:min(100%, calc(var(--heroH) * 9 / 16))}
  .hero-desktop{display:none}
}