/* ============================================================
   baum-gartl.com  –  Benedikt Baumgartl  /  Arts+Services
   Handgebaut, statisch, mobile-first.  Font: JanzEinfachBuchstabe
   ============================================================ */

@font-face{
  font-family:"Janz";
  src:url("fonts/JanzEinfachBuchstabe.woff2") format("woff2"),
      url("fonts/JanzEinfachBuchstabe.ttf")  format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#1d1d1b;      /* Tinte / Schwarz  */
  --red:#e30613;      /* Marken-Rot       */
  --red2:#f40000;     /* Logo-Akzent      */
  --paper:#ffffff;
  --maxw:840px;
  --pad:clamp(20px,5vw,48px);
  --fallback:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:"Janz",var(--fallback);
  font-size:clamp(19px,2.4vw,23px);
  line-height:1.45;
  letter-spacing:.2px;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}

/* ---------- Grundgerüst ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--pad) var(--pad) 0;
  flex:1 0 auto;
}

/* Kopf-Zeile (Slogan) */
.slogan{
  font-size:clamp(15px,1.8vw,18px);
  line-height:1.35;
  color:var(--ink);
  margin:0 0 clamp(18px,4vw,34px);
  max-width:640px;
}

/* ---------- Logo ---------- */
.logo{display:block;line-height:0;}
.logo img{
  width:100%;
  max-width:520px;
  height:auto;
  display:block;
}
.logo--sm img{max-width:420px;}

/* ---------- Roter Rahmen (mit Schatten-Rahmen) ---------- */
.frame{
  position:relative;
  border:2px solid var(--red);
  padding:clamp(22px,5vw,40px);
  margin-top:clamp(-38px,-7vw,-26px); /* Logo überlappt Rahmenkante */
}
.frame::before{                    /* versetzter Schatten-Rahmen */
  content:"";
  position:absolute;
  inset:16px -16px -16px 16px;
  border:2px solid var(--red);
  z-index:-1;
  pointer-events:none;
}
.frame--flat{margin-top:clamp(20px,5vw,34px);}
.frame--flat::before{display:none;}

.frame .logo{position:relative;margin-bottom:clamp(8px,2vw,14px);}

/* ---------- Arts+Services ---------- */
.tagline-as{
  font-size:clamp(30px,7vw,52px);
  line-height:1;
  margin:.15em 0 0;
}
.rule{
  height:9px;
  background:var(--red);
  border:0;
  width:min(360px,70%);
  margin:.35em 0 0;
}

/* ---------- Kontaktblock ---------- */
.contact{margin-top:clamp(26px,6vw,40px);}
.contact .line{
  font-size:clamp(20px,3.6vw,30px);
  line-height:1.3;
  margin:0;
}
.contact .mail{display:inline-block;color:var(--ink);}
.contact .mail:hover{color:var(--red);}

.btns{
  display:flex;
  gap:clamp(14px,3vw,22px);
  margin-top:clamp(18px,4vw,26px);
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  border:3px solid var(--red);
  color:var(--red);
  background:transparent;
  padding:.28em .9em .34em;
  font-size:clamp(24px,4.5vw,34px);
  line-height:1;
  transition:background .12s ease,color .12s ease;
}
.btn:hover,.btn:focus-visible{background:var(--red);color:#fff;outline:none;}

/* ---------- Projekte (zweite auswahl) ---------- */
.projects{
  display:flex;
  flex-direction:column;
  gap:clamp(26px,6vw,40px);
  margin-top:clamp(24px,6vw,40px);
}
.proj{max-width:520px;}
.proj .label{
  font-size:clamp(22px,4vw,30px);
  margin:0 0 .35em;
}
.proj .chip{
  display:inline-block;
  background:var(--red);
  color:#fff;
  padding:.18em .7em .26em;
  font-size:clamp(30px,6.5vw,46px);
  line-height:1;
}
.proj .chip:hover,.proj .chip:focus-visible{background:var(--ink);outline:none;}
/* leichte Versätze wie im Entwurf */
.proj.i2{align-self:flex-end;text-align:right;}
.proj.i3 .chip{margin-left:.2em;}

/* ---------- Textseiten (Impressum / Datenschutz) ---------- */
.doc{margin-top:clamp(28px,6vw,44px);max-width:720px;}
.doc h1{
  font-size:clamp(26px,5vw,38px);
  margin:0 0 .8em;
  font-weight:normal;
}
.doc h2{
  font-size:clamp(21px,3.4vw,27px);
  margin:1.5em 0 .35em;
  font-weight:normal;
}
.doc p{margin:0 0 .8em;font-size:clamp(17px,2.2vw,20px);line-height:1.5;}
.doc .addr{margin:.2em 0 .8em;line-height:1.5;}
.doc a{color:var(--red);}
.doc a:hover{text-decoration:underline;}

/* zweispaltig auf breiten Schirmen (Impressum) */
.cols{display:flex;flex-direction:column;gap:0 clamp(30px,5vw,60px);}
.cols>div{flex:1 1 0;min-width:0;}
@media(min-width:760px){
  .cols{flex-direction:row;}
}

/* ---------- Footer ---------- */
footer{
  flex-shrink:0;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(40px,9vw,72px) var(--pad) clamp(22px,5vw,30px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  font-size:clamp(14px,1.7vw,16px);
}
footer nav{display:flex;flex-direction:column;gap:.15em;}
footer nav a{color:var(--red);}
footer nav a:hover{text-decoration:underline;}
footer nav a[aria-current="page"]{opacity:.55;}
footer .copy{color:var(--red);white-space:nowrap;}

/* ---------- Desktop-Feinschliff Startseite ---------- */
@media(min-width:760px){
  .stage .frame{padding:clamp(34px,4vw,52px);}
  .stage .contact{
    display:flex;flex-direction:column;align-items:flex-end;text-align:right;
    margin-top:clamp(34px,5vw,56px);
  }
  .stage .contact .btns{justify-content:flex-end;}
}

/* ---------- Reduced motion / focus ---------- */
a:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* Kleinstschirme: Slogan/Buttons nicht zu groß */
@media(max-width:360px){
  body{font-size:18px;}
}