/* Luca Grazioli – Website. Eine Datei für alle Seiten. */
@font-face{font-family:'Instrument Sans';src:url(../fonts/instrument-sans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/instrument-sans-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --papier:#F2F0EB; --blau:#2347C8; --neon:#FFFF00; --weiss:#FFFFFF;
  --font:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --rand:80px; --fuge:24px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--blau);font-family:var(--font);font-weight:400;letter-spacing:-.025em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
img{display:block;width:100%;height:auto;max-width:100%}
.page{position:relative;padding-left:max(var(--rand),env(safe-area-inset-left,0px));padding-right:max(var(--rand),env(safe-area-inset-right,0px))}

/* Kopf */
header{padding-block:48px 64px;display:flex;justify-content:space-between;align-items:last baseline;gap:24px;flex-wrap:wrap}
.marke{display:flex;align-items:last baseline;gap:24px}
.logo{font-weight:600;font-size:32px;line-height:.88;letter-spacing:-.025em}
.logo:hover{text-decoration:none}
.satz{margin:0;font-size:16px;line-height:1.2}
nav{display:flex;align-items:last baseline;gap:36px;margin-bottom:0;font-size:14px;line-height:1.2}
/* Menü: blauer Strich unter dem Punkt, wächst beim Drüberfahren; aktive Seite bleibt unterstrichen */
nav a,.fuss a,.textlink{position:relative;padding-bottom:4px}
nav a::after,.fuss a::after,.textlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
nav a:hover::after,nav a[aria-current="page"]::after,.fuss a:hover::after,.textlink:hover::after{transform:scaleX(1)}
/* Textlinks: dünne Linie immer sichtbar, beim Drüberfahren wächst die dicke Linie darüber */
.textlink{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}

/* Bildstrom */
.block{display:flex;gap:var(--fuge);align-items:flex-start;margin-bottom:var(--fuge)}
.col{display:flex;flex-direction:column;gap:var(--fuge);min-width:0}
.r.klein{width:72%;margin-top:42%}
.voll{margin-bottom:var(--fuge)}

/* Textseiten */
.intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--fuge);margin-bottom:96px;padding-right:190px}
h1{font-weight:600;font-size:56px;line-height:1;letter-spacing:-.035em;margin:0}
.lead{font-size:22px;line-height:1.35;margin:0;max-width:34ch}
.text{max-width:62ch;font-size:17px;line-height:1.55}
.text p{margin:0 0 1.1em}
.text h2{font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.025em;margin:2.2em 0 .7em}
/* Zwischenüberschriften als blaues Etikett, Abstand rundum gleich (nicht auf Rechtsseiten) */
.spalten:not(.rechtlich) .text h2{display:table;background:var(--blau);color:var(--papier);font-size:22px;line-height:1;padding:.36em;text-box:trim-both cap alphabetic}
@supports not (text-box:trim-both cap alphabetic){.spalten:not(.rechtlich) .text h2{padding:.22em .36em .3em}}
.text ol,.text ul{margin:0 0 1.1em;padding-left:1.2em}
.text li{margin-bottom:.5em}
.text strong{font-weight:600}
.pakete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin:0 0 1.4em}
.paket{border-top:2px solid currentColor;padding-top:14px}
.paket h3{font-weight:600;font-size:20px;line-height:1.2;margin:0 0 .4em}
.paket p{margin:0 0 .8em}
.paket ul{font-size:16px}
@media (max-width:760px){.pakete{grid-template-columns:1fr}}
.spalten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--fuge);margin-block:96px}
.spalten .text{grid-column:1}
.trenner{padding-top:48px}
.portrait{margin:0 0 88px;max-width:420px}
.faq details{border-top:1px solid currentColor;padding-block:16px}
.faq details:last-child{border-bottom:1px solid currentColor}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.8em 0 0}
.rechtlich .text{font-size:15px}
.rechtlich h2{font-size:18px}

/* Kontakt + Fuß */
#kontakt{margin-top:96px;padding-block:48px 160px;border-top:3px solid var(--blau);display:flex;justify-content:space-between;align-items:center;column-gap:160px;row-gap:24px;flex-wrap:wrap}
.schreib{margin:0;font-size:40px;line-height:1}
.mail{background:var(--blau);color:var(--weiss);padding:14px 20px;font-size:18px;display:inline-block}
.mail:hover{background:#1b38a3}
.kontakt-rechts{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ig-kontakt{display:none}
.ig-kontakt svg{width:24px;height:24px}
.seo-text{max-width:62ch;font-size:17px;line-height:1.55;margin:96px 0 0}
.seo-text a{text-decoration:underline;text-underline-offset:3px}
footer{padding-block:24px 40px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;font-size:12px}
.fuss-name{font-size:16px;font-weight:600;line-height:1;padding-bottom:3px}
.fuss{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.fuss .leise{opacity:.75;padding-bottom:4px}
.fuss-ig{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fuss-ig a.ig::after{display:none}

/* Schrift-Globus: bleibt beim Scrollen mit im Bild und dreht sich */
.globus{position:fixed;right:56px;top:250px;width:150px;height:150px;perspective:600px;z-index:5;pointer-events:none;color:inherit}
.globus .kugel{pointer-events:auto;cursor:pointer;transition:transform .3s ease}
.globus:hover .kugel{transform:scale(1.06)}
.globus:focus-visible{outline:none}.globus:focus-visible .kugel{outline:2px solid var(--blau);outline-offset:4px}
.wirbel{position:absolute;transform-style:preserve-3d}
.globus.wirbelt .wirbel{animation:wirbel var(--wirbel,1.6s) cubic-bezier(.45,0,.2,1)}
@keyframes wirbel{from{transform:rotateY(0)}to{transform:rotateY(-1080deg)}}
.kugel{position:absolute;left:30px;top:30px;width:90px;height:90px;border-radius:50%;background:var(--neon)}
.achse{position:absolute;left:75px;top:75px;transform-style:preserve-3d;transform:rotateX(-16deg) rotateZ(-8deg)}
.ring{position:absolute;transform-style:preserve-3d;animation:dreh 14s linear infinite}
.gl{position:absolute;left:-5px;top:-8px;width:10px;text-align:center;font-size:12px;line-height:16px;font-weight:600}
@keyframes dreh{from{transform:rotateY(0deg)}to{transform:rotateY(-360deg)}}

/* Bilder fahren beim Scrollen weich hoch – jedes einzelne, erst wenn es geladen ist (per Script, läuft auch auf iPhone) */
.js .r{opacity:0;transform:translateY(56px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.js .r.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .r{opacity:1;transform:none;transition:none}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}nav a::after{transition:none}}

/* Tablet */
@media (max-width:1100px){
  :root{--rand:40px}
  .intro,.spalten{grid-template-columns:1fr}
  .intro{padding-right:0}
  .spalten .text{grid-column:1}
  .portrait{max-width:100%;margin-bottom:48px}
  h1{font-size:44px}
}
/* Handy */
@media (max-width:760px){
  :root{--rand:16px;--fuge:12px}
  header{padding-block:24px 32px;flex-direction:column;align-items:stretch;gap:20px}
  .marke{justify-content:space-between}
  .satz{max-width:16ch;text-align:right}
  nav{justify-content:space-between;gap:0;font-size:15px;border-top:1px solid currentColor;padding-top:12px;margin:0}
  .block{flex-direction:column}
  .col{width:100%!important;margin-top:0!important}
  .r.klein{width:100%;margin-top:0}
  .block.reihe{flex-direction:row}
  .reihe .col{width:auto!important}
  .globus{top:auto;bottom:16px;right:8px;transform:scale(.55);transform-origin:bottom right}
  h1{font-size:36px}
  .lead{font-size:19px}
  .intro{margin-bottom:56px}
  .spalten{margin-block:56px}
  .trenner{padding-top:32px}
  #kontakt{padding-block:32px 72px;flex-direction:column;align-items:flex-start}
  .schreib{font-size:30px}
  .mail{font-size:16px}
  .ig-kontakt{display:block}
  footer{flex-direction:column;align-items:stretch;gap:44px;padding-top:8px;padding-bottom:112px}
  .fuss{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;column-gap:10px;align-items:end;row-gap:18px;width:100%;font-size:13px}
  .fuss .leise{grid-row:2;grid-column:1/4;white-space:nowrap;padding-bottom:4px}
  .fuss .spulen{grid-row:2;grid-column:4;justify-self:end}
  .fuss > a[href='agb.html']{justify-self:end}
  .fuss-ig{display:contents}
  .fuss-ig .ig{display:none}
}