/* ==========================================================================
   fliesenwissen.com — Stylesheet
   Farben und Typografie sind bewusst an den Buchumschlag angelehnt.
   ========================================================================== */

:root{
  /* Palette */
  --estrich:      #E4E5E1;  /* Untergrund, heller Zementton */
  --estrich-hell: #EFF0ED;  /* Karten, aufgehellt */
  --fuge:         #C3C6C1;  /* Fugengrau, Trennlinien */
  --fuge-dunkel:  #9AA09B;  /* Fugengrau kräftig */
  --anthrazit:    #23282B;  /* Text, dunkle Flächen */
  --anthrazit-2:  #2E3438;  /* Fliesenraster dunkel */
  --ziegel:       #B74431;  /* Akzent, aus dem Buchumschlag */
  --ziegel-hell:  #CE5941;

  /* Maße */
  --fugenbreite:  5px;      /* Abstand zwischen "Fliesen" */
  --bund:         clamp(1.25rem, 4vw, 3rem);
  --max:          1180px;
  --radius:       2px;      /* Fliesen haben keine runden Ecken */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--estrich);
  color:var(--anthrazit);
  font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
  font-size:clamp(1.02rem, 0.98rem + 0.3vw, 1.14rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* --------------------------------------------------------------- Typografie */
h1,h2,h3,h4,.eyebrow,.nav a,.btn,.karte-titel{
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif;
}

h1{
  font-size:clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
  font-weight:800;
  line-height:0.98;
  letter-spacing:-0.025em;
  margin:0 0 1rem;
  text-transform:uppercase;
}
h2{
  font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.015em;
  margin:0 0 1rem;
}
h3{
  font-size:clamp(1.18rem, 1.05rem + 0.6vw, 1.42rem);
  font-weight:700;
  line-height:1.25;
  margin:2.2rem 0 0.6rem;
}
p{ margin:0 0 1.15rem; }
a{ color:var(--ziegel); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--anthrazit); }

/* Getrackte Versalien — zitiert die Kicker-Zeilen vom Buchumschlag */
.eyebrow{
  display:block;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ziegel);
  margin:0 0 0.9rem;
}
.eyebrow--hell{ color:var(--fuge); }

.lead{
  font-size:clamp(1.12rem, 1rem + 0.6vw, 1.34rem);
  line-height:1.55;
  max-width:52ch;
}

/* ------------------------------------------------------------------ Struktur */
.wrap{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--bund);
}
section{ padding-block:clamp(3rem, 7vw, 5.5rem); }
.trenner{ border-top:1px solid var(--fuge); }

/* ------------------------------------------------------------------- Kopf */
.kopf{
  position:sticky; top:0; z-index:50;
  background:var(--anthrazit);
  color:#fff;
  border-bottom:var(--fugenbreite) solid var(--ziegel);
}
.kopf-inner{
  display:flex; align-items:center; gap:1.5rem;
  justify-content:space-between;
  min-height:64px;
  flex-wrap:wrap;
  padding-block:0.6rem;
}
.logo{
  font-family:"Archivo", Arial, sans-serif;
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
.logo span{ color:var(--ziegel-hell); }

.nav{ display:flex; gap:clamp(0.9rem,2.4vw,1.9rem); flex-wrap:wrap; }
.nav a{
  color:#DCDEDC;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding-block:0.35rem;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav a:focus-visible{ color:#fff; border-bottom-color:var(--ziegel); }
.nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--ziegel); }

/* -------------------------------------------------------------------- Hero */
.hero{
  background:var(--anthrazit);
  color:#F2F3F2;
  padding-block:clamp(3.5rem, 9vw, 7rem);
  position:relative;
  overflow:hidden;
}
/* Fliesenraster im Halbverband als Hintergrund — wie auf dem Buchumschlag */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--anthrazit-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--anthrazit-2) 1px, transparent 1px);
  background-size:150px 100px;
  opacity:0.55;
  pointer-events:none;
}
.hero > *{ position:relative; }
.hero h1{ color:#fff; max-width:16ch; }
.hero .lead{ color:#C9CDCB; }

.hero-band{
  display:inline-block;
  background:var(--ziegel);
  color:#fff;
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:0.5rem 1rem;
  margin-bottom:1.6rem;
}

/* ------------------------------------------------------- Musterwand (Signature)
   Die Kacheln liegen im Halbverband wie an einer Musterwand in der Ausstellung.
   Die Abstände sind Fugen — schmal und exakt, nicht die üblichen Card-Gutter. */
.musterwand{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--fugenbreite);
  background:var(--fuge-dunkel);
  padding:var(--fugenbreite);
  border:1px solid var(--fuge-dunkel);
}
@media (max-width:560px){
  .musterwand{ grid-template-columns:1fr; }
}

.kachel{
  display:flex; flex-direction:column;
  background:var(--estrich-hell);
  padding:clamp(1.3rem,2.6vw,2rem);
  min-height:230px;
  text-decoration:none;
  color:var(--anthrazit);
  border-radius:var(--radius);
  transition:transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.kachel:hover,.kachel:focus-visible{
  background:#fff;
  transform:translateY(-3px);          /* Muster leicht von der Wand nehmen */
  box-shadow:0 6px 18px rgba(35,40,43,0.16);
  color:var(--anthrazit);
}
.kachel--dunkel{ background:var(--anthrazit); color:#F2F3F2; }
.kachel--dunkel:hover,.kachel--dunkel:focus-visible{ background:#2C3236; color:#fff; }
.kachel--dunkel .kachel-text{ color:#B9BEBC; }
.kachel--ziegel{ background:var(--ziegel); color:#fff; }
.kachel--ziegel:hover,.kachel--ziegel:focus-visible{ background:var(--ziegel-hell); color:#fff; }
.kachel--ziegel .kachel-text,.kachel--ziegel .kachel-nr{ color:rgba(255,255,255,0.86); }

.kachel-nr{
  font-family:"Archivo",Arial,sans-serif;
  font-size:0.7rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--fuge-dunkel);
  margin-bottom:0.7rem;
}
.karte-titel{
  font-size:1.22rem; font-weight:700; line-height:1.2;
  letter-spacing:-0.01em;
  margin:0 0 0.5rem;
}
.kachel-text{
  font-size:0.95rem; line-height:1.5;
  color:#5A6165; margin:0;
}
.kachel-pfeil{
  margin-top:auto; padding-top:1rem;
  font-family:"Archivo",Arial,sans-serif;
  font-size:0.78rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
}

/* ------------------------------------------------------------------ Buttons */
.btn{
  display:inline-block;
  background:var(--ziegel); color:#fff;
  font-weight:700; font-size:0.84rem;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:0.85rem 1.5rem;
  text-decoration:none;
  border:2px solid var(--ziegel);
  border-radius:var(--radius);
  transition:background 140ms ease, color 140ms ease;
}
.btn:hover,.btn:focus-visible{ background:transparent; color:var(--ziegel); }
.btn--linie{ background:transparent; color:var(--anthrazit); border-color:var(--anthrazit); }
.btn--linie:hover,.btn--linie:focus-visible{ background:var(--anthrazit); color:#fff; }
.btn--hell{ background:#fff; color:var(--anthrazit); border-color:#fff; }
.btn--hell:hover,.btn--hell:focus-visible{ background:transparent; color:#fff; }
.btn-reihe{ display:flex; gap:0.8rem; flex-wrap:wrap; margin-top:1.6rem; }

/* ------------------------------------------------------------- Artikelliste */
.artikelliste{ list-style:none; padding:0; margin:2rem 0 0; }
.artikelliste li{ border-top:1px solid var(--fuge); }
.artikelliste li:last-child{ border-bottom:1px solid var(--fuge); }
.artikelliste a{
  display:flex; gap:1.2rem; align-items:baseline; flex-wrap:wrap;
  padding:1.4rem 0.2rem;
  text-decoration:none; color:var(--anthrazit);
}
.artikelliste a:hover{ background:var(--estrich-hell); }
.artikelliste .titel{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700; font-size:1.15rem; letter-spacing:-0.01em;
  flex:1 1 16rem;
}
.artikelliste .zeile-text{ color:#5A6165; font-size:0.95rem; flex:2 1 20rem; margin:0; }
.artikelliste .marke{
  font-family:"Archivo",Arial,sans-serif;
  font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ziegel);
}

/* ---------------------------------------------------------------- Buchkarte */
.buecher{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:760px){ .buecher{ grid-template-columns:1fr 1fr; } }
.buch{
  background:var(--estrich-hell);
  border:1px solid var(--fuge);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.buch h3{ margin-top:0; }
.buch .preis{
  font-family:"Archivo",Arial,sans-serif;
  font-weight:700; letter-spacing:0.06em;
}

/* ------------------------------------------------------------- Artikelseite */
.artikel{ max-width:70ch; margin-inline:auto; }
.artikel h2{ margin-top:2.8rem; }
.artikel ul,.artikel ol{ margin:0 0 1.3rem; padding-left:1.3rem; }
.artikel li{ margin-bottom:0.5rem; }
.meta{
  font-family:"Archivo",Arial,sans-serif;
  font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase;
  color:#6B7276; margin-bottom:2rem;
}
.kasten{
  background:var(--anthrazit); color:#E7E9E8;
  padding:1.4rem 1.5rem;
  border-left:var(--fugenbreite) solid var(--ziegel);
  margin:2.2rem 0;
}
.kasten p:last-child{ margin-bottom:0; }
.kasten .eyebrow{ color:var(--ziegel-hell); }

/* -------------------------------------------------------------------- Fuß */
.fuss{
  background:var(--anthrazit); color:#A8AEAB;
  padding-block:3rem 2rem;
  font-size:0.92rem;
  border-top:var(--fugenbreite) solid var(--ziegel);
}
.fuss a{ color:#DCDEDC; }
.fuss a:hover{ color:#fff; }
.fuss-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:720px){ .fuss-grid{ grid-template-columns:2fr 1fr 1fr; } }
.fuss h4{
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  color:#fff; margin:0 0 0.9rem;
}
.fuss ul{ list-style:none; margin:0; padding:0; }
.fuss li{ margin-bottom:0.5rem; }
.fuss-unten{
  margin-top:2.5rem; padding-top:1.4rem;
  border-top:1px solid #3A4145;
  font-size:0.82rem;
}

/* --------------------------------------------------------------- Bedienung */
:focus-visible{ outline:3px solid var(--ziegel); outline-offset:2px; }
.skip{
  position:absolute; left:-9999px;
  background:#fff; color:var(--anthrazit);
  padding:0.7rem 1rem; z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }

/* Hinweis für unfertige Stellen — vor dem Live-Gehen entfernen */
.todo{
  background:#FFF3CD; border-left:5px solid #C8A21A;
  padding:1rem 1.2rem; margin:1.5rem 0;
  font-family:"Archivo",Arial,sans-serif; font-size:0.9rem;
}


/* ---- Signatur "by Andreas Tile" unter dem Logo ---- */
.logo-wrap{ display:flex; flex-direction:column; line-height:1; }
.logo-sig{
  font-family:"Archivo",Arial,sans-serif;
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fuge);
  margin-top:3px;
}
.logo-sig span{ color:var(--ziegel-hell); }

/* ---- Hero mit Kompass zweispaltig ---- */
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center;
}
@media (min-width:820px){
  .hero-grid{ grid-template-columns:1.4fr 1fr; }
}
.hero-kompass{
  display:flex; justify-content:center; align-items:center;
}
.hero-kompass img{
  width:min(300px, 72vw);
  height:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
@media (max-width:819px){
  .hero-kompass{ order:-1; margin-bottom:0.5rem; }
  .hero-kompass img{ width:min(200px,54vw); }
}