/* ============================================================
   timmeister.com — vollstaendiges Stylesheet der Seite
   Ersetzt Astra, Elementor, Ultimate Addons und Font Awesome.
   ============================================================ */

@font-face{
  font-family:Exo;
  src:url(schrift/exo.woff2) format('woff2');
  font-weight:300 800;
  font-display:swap;
}

:root{
  --rot:#FB263B;
  --rot-tief:#D4132A;
  --dunkel:#313131;
  --text:#5A5A62;
  --grund:#FFFFFF;
  --kopf-grau:#D1D0D1;

  /* Farben der Housemeister-Kachel. Sie kommen aus dem Stylesheet von
     feelthebeats.de, damit die Kachel dieselbe Handschrift traegt wie das
     Ziel, auf das sie fuehrt. */
  --neon:#D8FF14;
  --neon-tinte:#101216;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:Exo,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1rem;
  line-height:1.6;
  color:var(--text);
  background:var(--grund);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grauer Kopfbereich mit den zwei Ecken, aus dem Original uebernommen.
   Die Grafik wird auf 860px Hoehe gezeichnet — dann sitzen die Ecken bei
   rund 134px, genau wie auf der alten Seite. Anders als dort laeuft der
   Verlauf aber nicht ueber die ganze Seite: Das Band ist auf 420px
   begrenzt und wird nach unten ausgeblendet, damit die Mitte weiss wird.

   Wichtig: bilder/hintergrund.svg muss preserveAspectRatio="none" tragen.
   Ohne das passt der Browser die Grafik mittig in den 860px hohen Kasten
   ein, statt sie zu strecken - oben bleibt dann ein weisser Streifen
   stehen (bei 1280px Fensterbreite rund 69px hoch). Wird die Grafik
   einmal neu aus dem Zeichenprogramm exportiert, geht die Angabe
   verloren und der Streifen ist wieder da. */
body::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:420px;
  z-index:-1;
  pointer-events:none;
  background:url(bilder/hintergrund.svg) center top / 100% 860px no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 42%,transparent 100%);
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

.bahn{width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}

/* ---------------- Kopf ---------------- */
.kopf{padding:clamp(20px,3vw,32px) 0}
.kopf .innen{display:flex;justify-content:flex-end;gap:10px}

.sozial{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  background:var(--rot);
  color:#fff;
  border-radius:4px;
  transition:background .25s,transform .25s;
}
.sozial:nth-child(2){background:var(--dunkel)}
.sozial:hover{background:var(--rot-tief);transform:translateY(-3px)}
.sozial:nth-child(2):hover{background:#1c1c1c}
.sozial svg{width:20px;height:20px;fill:currentColor}

/* ---------------- Mittelteil ---------------- */
main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;
     padding-block:clamp(24px,5vw,56px)}

.schriftzug{display:block;width:min(58%,640px);margin:0 auto clamp(40px,7vw,76px)}
.schriftzug img{width:100%}

/* ---------------- Die drei Bereiche ---------------- */
.bereiche{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(24px,6vw,86px);
  list-style:none;margin:0;padding:0;
}
.bereich{text-align:center}

/* Form und Beschriftung mittig uebereinander.
   Mit display:block und text-align:center ginge das nicht: Ist die
   Beschriftung breiter als die Kachel - und "Housemeister" ist das -,
   laeuft sie nur nach rechts ueber, nicht nach beiden Seiten. Die Schrift
   saesse dann sichtbar neben der Form statt darunter. Im Flexlayout
   verteilt align-items:center den Ueberhang gleichmaessig. */
.bereich a{display:flex;flex-direction:column;align-items:center}

.zeichen{
  position:relative;
  width:96px;height:96px;
  margin:0 auto 14px;
  display:grid;place-items:center;
}
/* Die rote Blob-Form liegt als eigenes Element dahinter, damit sie sich
   drehen kann, ohne das Symbol mitzunehmen. */
.zeichen .form{
  position:absolute;inset:0;
  background:url(bilder/blob.svg) center/contain no-repeat;
  transition:transform .55s cubic-bezier(.2,.8,.3,1);
}
.zeichen svg{position:relative;width:34px;height:34px;fill:#fff}

.bereich .name{
  font-size:clamp(1.15rem,2vw,1.4rem);
  font-weight:600;
  color:var(--dunkel);
  letter-spacing:-.01em;
  transition:color .25s;
}
.bereich a:hover .form{transform:rotate(22deg)}

/* Beim Ueberfahren legt sich ein farbiger Block hinter die Beschriftung.
   Frueher faerbte sich stattdessen die Schrift rot. Das liess sich fuer
   die Housemeister-Kachel nicht uebernehmen: Neon auf Weiss hat so gut
   wie keinen Kontrast, eine neongruene Beschriftung waere nicht lesbar.
   Statt fuer diese eine Kachel etwas anderes zu bauen, tragen jetzt alle
   vier denselben Effekt - jede in ihrer Farbe. */
.bereich .name{
  padding:1px 8px;
  border-radius:2px;
  transition:color .25s,background-color .25s;
}
.bereich a:hover .name{color:#fff;background-color:var(--rot)}

/* ---- Housemeister: dieselbe Kachel, andere Farbe ----
   Der Verweis fuehrt nach aussen auf feelthebeats.de, und die Kachel
   traegt darum die Farben von dort: Neon als Flaeche, Tinte darauf.
   Ein weisses Symbol auf Neon waere kaum zu erkennen — auf der Zielseite
   gilt dieselbe Regel, Neon traegt dort nie Text.

   Der Blob liegt als Hintergrundbild in der Form, seine Farbe steckt
   deshalb in der Datei. Fuer diese eine Kachel gibt es eine zweite
   Fassung, blob-neon.svg — bis auf den Farbwert Zeichen fuer Zeichen
   dieselbe Form. */
.bereich.musik .form{background-image:url(bilder/blob-neon.svg)}
.bereich.musik .zeichen svg{fill:var(--neon-tinte)}

/* Derselbe Block wie bei den anderen drei, nur in Neon - und mit Tinte
   darauf statt Weiss. Weiss auf Neon waere kaum zu lesen. */
.bereich.musik a:hover .name{
  color:var(--neon-tinte);
  background-color:var(--neon);
}

/* Die Kacheln sind so breit wie ihr laengster Bestandteil. "Housemeister"
   ist breiter als die Blob-Form, wodurch der letzte Blob aus dem Raster
   rutschte - die Abstaende zwischen den Formen waren 152, 151 und 171
   Pixel. Auf breiten Schirmen bekommen die Kacheln darum die Breite der
   Form, und die Beschriftung darf seitlich darueber hinausragen. Sie
   steht mittig, ragt also nach beiden Seiten gleich weit in die Luecke,
   und die ist dort mit bis zu 86 Pixeln weit genug.

   Unterhalb von 768px bleibt es beim alten Verhalten: dort ist die Luecke
   auf 30px zusammengezogen und die Beschriftung wuerde an die Nachbarn
   stossen. */
@media (min-width:768px){
  .bereich{width:96px}
  .bereich .name{white-space:nowrap}
}

/* ---------------- Inhaltsseiten ---------------- */
.inhalt{max-width:44rem;margin:0 auto;padding-block:clamp(20px,4vw,44px)}
.inhalt h1{
  font-size:clamp(2rem,5.5vw,3.2rem);
  font-weight:600;letter-spacing:-.025em;line-height:1.12;
  color:var(--dunkel);margin:0 0 clamp(20px,3vw,30px);
  text-align:center;
}
.inhalt p{margin:0 0 1.2em;font-size:1.05rem;line-height:1.8}

/* Erster Absatz groesser, als Einstieg in den Text */
.inhalt .anriss{
  font-size:clamp(1.12rem,1.7vw,1.28rem);
  line-height:1.7;
  color:var(--dunkel);
  margin-bottom:1.4em;
}

/* Verweise im Fliesstext */
.inhalt .verweis{
  color:var(--rot);
  font-weight:600;
  border-bottom:1px solid rgba(251,38,59,.35);
  padding-bottom:1px;
  transition:border-color .2s,color .2s;
}
.inhalt .verweis:hover{color:var(--rot-tief);border-color:var(--rot-tief)}

/* Leistungen */
.leistungen{margin:0 0 1.6em;padding:0;list-style:none}
.leistungen li{
  position:relative;
  padding:11px 0 11px 26px;
  border-bottom:1px solid #ECECEE;
  font-size:1.02rem;
}
.leistungen li:first-child{border-top:1px solid #ECECEE}
.leistungen li::before{
  content:"";
  position:absolute;left:2px;top:1.15em;
  width:8px;height:8px;border-radius:50%;
  background:var(--rot);
}
.zurueck{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-weight:600;color:var(--rot);transition:gap .25s;
}
.zurueck:hover{gap:15px}

/* ---------------- Fuss ---------------- */
/* Fussbereich, Masse aus dem Original uebernommen:
   rote Flaeche mindestens 300px hoch, Knick 100px, Grunge-Textur in ihrer
   natuerlichen Groesse gekachelt. Wichtig ist das Verhaeltnis — der Knick
   nimmt ein Drittel der Flaeche ein, nicht drei Viertel wie in meinem
   vorigen Versuch. Genau daran lag es, dass er wie ein riesiges V wirkte. */
.fuss{
  flex:none;
  position:relative;
  overflow:hidden;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:100px 0 0;                 /* laesst den Knick frei */
  background:var(--rot) url(bilder/grunge.svg) center center repeat;
}
.knick{
  position:absolute;top:0;left:0;
  width:calc(100% + 1.3px);
  height:100px;
  line-height:0;pointer-events:none;
}
.knick svg{width:100%;height:100%;display:block}
.knick path{fill:var(--grund)}

.fuss nav{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px,4vw,44px);
  font-size:1rem;
}
.fuss nav a{color:#fff;transition:color .25s}
.fuss nav a:hover{color:var(--dunkel)}
.fuss nav a[aria-current="page"]{color:var(--dunkel)}

/* ---------------- Einblendungen ---------------- */
/* Reine CSS-Animation. Ohne sie waeren die Inhalte trotzdem da — nichts
   haengt hier an JavaScript. */
@media (prefers-reduced-motion: no-preference){
  .schriftzug{animation:einzug 1s cubic-bezier(.2,.8,.3,1) both}
  /* Je Kachel eine Regel, weil CSS die Verzoegerung nicht aus der Position
     ableiten kann. Kommt eine Kachel dazu, gehoert hier eine Zeile mehr
     hin - sonst springt sie ohne Einblendung ins Bild, waehrend die
     anderen noch einlaufen. */
  .bereich:nth-child(1){animation:aufzug .75s cubic-bezier(.2,.8,.3,1) .35s both}
  .bereich:nth-child(2){animation:aufzug .75s cubic-bezier(.2,.8,.3,1) .5s both}
  .bereich:nth-child(3){animation:aufzug .75s cubic-bezier(.2,.8,.3,1) .65s both}
  .bereich:nth-child(4){animation:aufzug .75s cubic-bezier(.2,.8,.3,1) .8s both}
  .inhalt{animation:aufzug .7s cubic-bezier(.2,.8,.3,1) .2s both}
}
@keyframes einzug{
  from{opacity:0;transform:translateY(-34px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes aufzug{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}

/* ---------------- Kleine Schirme ---------------- */
/* Bei fester Knickhoehe wird die Steigung umso steiler, je schmaler das
   Fenster ist. Das Original loest das mit einem Umbruch bei 767px: dort
   wird der Knick auf 20px flach gezogen und auf 136 Prozent verbreitert.
   Uebernommen, damit der Knick auf dem Handy nicht kippt. */
@media (max-width:767px){
  .knick{width:calc(136% + 1.3px);left:-18%;height:20px}
  .fuss{min-height:190px;padding-top:34px}
  body::before{height:300px;background-size:100% 520px}
}
@media (max-width:560px){
  .schriftzug{width:82%}
  .zeichen{width:84px;height:84px}
  /* Vier Kacheln im Flusslayout ergaben hier drei oben und eine allein
     darunter. Zwei feste Spalten machen daraus ein 2x2 - unabhaengig
     davon, wie breit die Beschriftungen ausfallen. */
  .bereiche{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:34px 12px;
    justify-items:center;
  }
}