/* ------------------------------------------------------------------
   rothmayer-planung.de
   Gemeinsames Stylesheet. Farben und Schriftgrößen stehen ganz oben
   und können hier zentral geändert werden.
   Es werden ausschließlich Systemschriften verwendet (keine Google
   Fonts), damit keine Daten an Dritte übertragen werden.
------------------------------------------------------------------- */

:root{
  --papier:      #EAEBE7;
  --papier-hell: #F5F6F3;
  --tusche:      #14181A;
  --linie:       #B9BDB7;
  --gruen:       #6E2A47;   /* dunkles Burgund – Fließtext-Akzente, Links, Labels */
  --gruen-hell:  #C98CAE;   /* helles, warmes Lila-Rosé – große Akzentworte, Dekorelement */

  /* Hauptschrift: warm, etwas eigenständig, aber gut lesbar. Nur Systemschriften. */
  --serif:  "Trebuchet MS", "Segoe UI", Geneva, Verdana, sans-serif;
  --grotesk: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --rand: clamp(1.25rem, 5vw, 4.5rem);
}

*{ box-sizing: border-box; }

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

body{
  margin:0;
  background: var(--papier);
  color: var(--tusche);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media (min-width: 45rem){
  body{ font-size: 1.125rem; }
}

.huelle{
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* --- Auszeichnungsschrift: technische Beschriftung ---------------- */

.label{
  font-family: var(--grotesk);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gruen);
}

/* --- Maßkette: das wiederkehrende Gestaltungselement -------------- */

.masskette{
  position: relative;
  margin: 3.5rem 0;
  border-top: 1px solid var(--linie);
}
.masskette::before,
.masskette::after{
  content:"";
  position:absolute;
  top:-6px;
  width:1px;
  height:13px;
  background: var(--linie);
}
.masskette::before{ left:0; }
.masskette::after{ right:0; }
.masskette span{
  position:absolute;
  top:-.75rem;
  left:50%;
  transform: translateX(-50%);
  background: var(--papier);
  padding: 0 .9rem;
  font-family: var(--grotesk);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gruen);
  white-space: nowrap;
}

/* --- Kopfzeile ---------------------------------------------------- */

.kopf{
  padding: 1.75rem 0 0;
}
.kopf-innen{
  display:flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}
.marke{
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tusche);
}
.marke em{
  font-style: normal;
  font-weight: 400;
  color: var(--gruen);
}
.menue{
  display:flex;
  gap: 1.5rem;
  font-family: var(--grotesk);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.menue a{
  color: var(--tusche);
  text-decoration: none;
  padding-bottom: .2rem;
  border-bottom: 1px solid transparent;
}
.menue a:hover,
.menue a:focus-visible{ border-bottom-color: var(--gruen); }
.menue a[aria-current="page"]{
  color: var(--gruen);
  border-bottom-color: var(--gruen);
}

/* --- Titelbereich ------------------------------------------------- */

.titel{
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 9vw, 6rem) 0 0;
}
.titel::before{
  content:"";
  position:absolute;
  top:-5rem;
  right:-7rem;
  width:24rem;
  height:24rem;
  border-radius:50%;
  background: radial-gradient(circle at 32% 32%, var(--gruen-hell), transparent 70%);
  opacity:.16;
  pointer-events:none;
}
.titel h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 7vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: .9rem 0 0;
}
.titel h1 .zweite{
  display:block;
  color: var(--gruen);
}
.vorspann{
  max-width: 34rem;
  margin: 1.75rem 0 0;
}

/* --- Textbereiche ------------------------------------------------- */

h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}
h3{
  font-family: var(--grotesk);
  font-size: .8125rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 .6rem;
}
p{ margin: 0 0 1.15rem; max-width: 38rem; }
a{ color: var(--gruen); }

.spalten{
  display: grid;
  gap: 2.5rem;
  margin: 2.5rem 0;
}
@media (min-width: 48rem){
  .spalten{ grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}
.spalten p{ margin-bottom: 0; }

/* --- Porträt ------------------------------------------------------ */

.vorstellung{
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 48rem){
  .vorstellung{
    grid-template-columns: minmax(14rem, 20rem) 1fr;
    gap: 3.5rem;
  }
}
.portraet{
  margin: 0;
}
.portraet img{
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  border: 1px solid var(--linie);
  filter: grayscale(1);
}
.portraet figcaption{
  font-family: var(--grotesk);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gruen);
  margin-top: .7rem;
  max-width: 20rem;
}

/* --- Leistungsliste ----------------------------------------------- */

.leistungen{
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 40rem;
}
.leistungen li{
  border-top: 1px solid var(--linie);
  padding: .85rem 0;
  display:flex;
  gap: 1.25rem;
  align-items: baseline;
}
.leistungen li:last-child{ border-bottom: 1px solid var(--linie); }
.leistungen .nr{
  font-family: var(--grotesk);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--gruen);
  flex: 0 0 2.25rem;
}

/* --- Kontaktblock ------------------------------------------------- */

.kontakt{
  background: var(--papier-hell);
  border: 1px solid var(--linie);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin: 3rem 0;
}
.kontakt .zeile{
  display:flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  padding: .6rem 0;
  border-top: 1px solid var(--linie);
}
.kontakt .zeile:first-of-type{ border-top: 0; }
.kontakt .was{
  font-family: var(--grotesk);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gruen);
  flex: 0 0 8rem;
  padding-top: .3rem;
}
.kontakt .wert{ font-size: 1.15rem; }
.kontakt .wert a{ text-decoration: none; }
.kontakt .wert a:hover{ text-decoration: underline; }

/* --- Fußzeile ----------------------------------------------------- */

.fuss{
  border-top: 1px solid var(--linie);
  margin-top: 4rem;
  padding: 1.75rem 0 3rem;
  font-family: var(--grotesk);
  font-size: .75rem;
  letter-spacing: .06em;
  color: #5A625D;
}
.fuss-innen{
  display:flex;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
  justify-content: space-between;
}
.fuss a{ color: #5A625D; text-decoration: none; }
.fuss a:hover{ color: var(--gruen); }

/* --- Rechtstexte -------------------------------------------------- */

.recht{ max-width: 40rem; padding-top: 2.5rem; }
.recht h2{ margin-top: 2.75rem; font-size: 1.35rem; }
.recht h2:first-of-type{ margin-top: 1.5rem; }
.recht address{
  font-style: normal;
  margin-bottom: 1.15rem;
}

/* --- Zugänglichkeit ----------------------------------------------- */

:focus-visible{
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}