/*
  Stylesheet für die minimalistische Web‑Visitenkarte der Kanzlei Kettner.
  In diesem Entwurf verzichten wir vollständig auf ein farbiges Layout und
  nutzen stattdessen neutrale Farben sowie eingebettete Schriftarten.
  Die Seite ist reduziert auf eine zentrale Visitenkarte mit allen
  Pflichtangaben; zusätzliche Navigation oder Seitenbereiche wurden entfernt.
*/

/* Einbettung lokaler Schriftarten. Die Schriftdateien liegen im
   Unterordner assets/fonts und werden nicht von externen Servern geladen. */
@font-face {
  font-family: 'Liberation Sans';
  src: url('assets/fonts/LiberationSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/*
 * Hamburger-Menü: der Button in der linken oberen Ecke und das seitliche Menü.
 * Der Button nutzt eine SVG mit drei Linien, die farblich an das Wappen
 * angelehnt ist. Das Menü schiebt sich beim Öffnen von links ins Bild.
 */

.menu-toggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: #204a87; /* Blauton, der zum Wappen passt */
  cursor: pointer;
  z-index: 8;
}

.menu-toggle:focus {
  outline: none;
}

/* Seitliches Menü, das sich bei Klick auf das Hamburger-Icon öffnet */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 7;
  /* Zusätzlicher Abstand oben, damit der erste Menüpunkt nicht vom
     Hamburger-Icon überlagert wird */
  padding: 4rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu li {
  margin-bottom: 1rem;
}

.mobile-menu a {
  color: #204a87;
  text-decoration: none;
  font-family: 'Liberation Sans', Arial, sans-serif;
  font-size: 1rem;
}

.mobile-menu a:hover {
  text-decoration: underline;
}

@font-face {
  font-family: 'Gentium Book Basic';
  src: url('assets/fonts/GenBkBasR.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Einbettung der URW Bookman Light Schriftart für den Namenszug. Diese
   Schrift stammt aus dem freien URW‑Fontpaket und wird lokal eingebunden,
   um externe Abhängigkeiten zu vermeiden. */
@font-face {
  font-family: 'URW Bookman Light';
  src: url('assets/fonts/URWBookman-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Boldes Sans‑Serif für den Namenszug */
@font-face {
  font-family: 'Liberation Sans Bold';
  src: url('assets/fonts/LiberationSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

html {
  font-size: 16px;
  line-height: 1.5;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  /* Die Seite wird relativ positioniert, um die absolut positionierten
     Elemente (Visitenkarte und Wasserzeichen) korrekt ausrichten zu können. */
  position: relative;
  min-height: 100vh;
  font-family: 'Liberation Sans', Arial, sans-serif;
  color: #333;
  /* Der Seitenhintergrund und der Footer teilen sich denselben hellgrauen
     Farbton. Dadurch wirkt die Seite ruhiger und die weiße Visitenkarte
     hebt sich deutlich ab. */
  background-color: #f4f4f4;
}

/* Dynamische Viewport-Unterstützung für moderne Browser */
@supports (height: 100dvh) {
  body { 
    min-height: 100dvh;
  }
}

/* Zentrale Visitenkarte */
/* Visitenkarte im goldenen Schnitt: sie wird absolut positioniert und
   horizontal zentriert. Die vertikale Position beträgt circa 38 % der
   Fensterhöhe, was dem Verhältnis des goldenen Schnitts entspricht. */
.card {
  width: 100%;
  max-width: 550px;
  aspect-ratio: 1.586 / 1;
  padding: 2rem 1.5rem;
  position: absolute;
  top: 38vh;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  /* Leicht transparent, damit das Wappen im Hintergrund stärker durchscheinen kann.
     Ein niedrigerer Alphawert erzeugt einen deutlicheren Schimmer, behält
     jedoch ausreichenden Kontrast für den Text. */
  background-color: rgba(255, 255, 255, 0.60);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;
  z-index: 2;
  /* Inhalte innerhalb der Karte werden mit Flexbox vertikal und horizontal
     zentriert, damit der Text harmonisch verteilt wird. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Wasserzeichen: großes Wappen im Hintergrund der Seite. Über ein
   Pseudo‑Element wird das Wappen im goldenen Schnitt platziert. Dadurch
   bleibt der HTML‑Code sauber und die Visitenkarte verdeckt das
   Wasserzeichen vollständig. */
body::before {
  content: "";
  position: absolute;
  /* Position weiter nach oben verschieben, sodass der obere Teil des Wappens
     über die Visitenkarte hinausragt */
  /* Das Wappen wird nochmals höher positioniert, sodass der obere Teil
     deutlich über die Visitenkarte hinausragt. */
  top: 40vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  height: 70vw;
  background-image: url('assets/wappen_transparent.png');
  background-repeat: no-repeat;
  background-size: contain;
  /* Etwas höhere Deckkraft, damit das Wappen deutlicher sichtbar wird */
  /* Die Deckkraft wird weiter erhöht: das Wappen soll noch deutlicher
     durch die Karte hindurch erkennbar sein. */
  opacity: 0.05;

  /* Zentriere das Wappen innerhalb seines Containers, damit es horizontal
     perfekt zur Visitenkarte ausgerichtet ist. */
  background-position: center center;
  pointer-events: none;
  z-index: 1;
}

/* Der Namenszug nutzt nun eine klare, serifenlose Schrift. Die fette Variante
   der eingebetteten Liberation Sans sorgt für einen modernen, gut lesbaren
   Eindruck. */
.card h1 {
  margin-top: 0;
  /* Für den Namenszug wird die elegante Serifenschrift URW Bookman Light
     verwendet. Sie verleiht dem Namen einen klassischen, aber freundlichen
     Charakter. Fallback‑Schriften stehen bereit, falls die Einbettung nicht
     geladen werden kann. */
  font-family: 'Playfair Display', 'Liberation Serif', Georgia, serif;
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  color: #111;
  font-weight: 400;
  position: relative;
  z-index: 1;
}

.card .subtitle {
  font-family: 'Playfair Display', 'Liberation Serif', Georgia, serif;
  margin-top: 0.25rem;
  font-size: 1.25rem;
  font-weight: normal;
  letter-spacing: 0.06em;
  color: #444;
  position: relative;
  z-index: 1;
}

.card .services {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.4;
  color: #555;
  position: relative;
  z-index: 1;
}

.card .contact {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
  position: relative;
  z-index: 1;
}

.card .contact a {
  color: #0066cc;
  text-decoration: none;
}

.card .contact a:hover {
  text-decoration: underline;
}

/* Hinweistext in kursiv für Termine auf Vereinbarung */
.card .notice {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: italic;
  color: #666;
  position: relative;
  z-index: 1;
}

/* Fußbereich */
footer {
  text-align: center;
  /* Platziere den Footer immer am unteren Rand des Browserfensters. Durch
     position:absolute kann er unabhängig vom restlichen Inhalt platziert
     werden. */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  font-size: 0.85rem;
  color: #666;
  background-color: #f4f4f4;
  border-top: none;
}

footer a {
  color: #0066cc;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Der Footer enthält nun eine flexbox‑Zeile, in der Text, Link und QR‑Code
   elegant nebeneinander stehen. Die Elemente umbrechen automatisch auf
   schmalen Bildschirmen. */
footer .footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Kleine Anpassungen für das QR‑Code‑Bild im Footer */
footer .qr-footer {
  width: 64px;
  height: 64px;
  display: inline-block;
}

/* Gestaltung der Impressums‑ und Datenschutzseite. Diese nutzt keine Navigation
   mehr und orientiert sich an einem klaren, leserlichen Layout. */
.legal {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-size: 0.95rem;
  color: #333;
}

.legal h1 {
  font-family: 'Gentium Book Basic', Georgia, serif;
  font-size: 1.8rem;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #111;
}

.legal h2 {
  font-family: 'Gentium Book Basic', Georgia, serif;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.legal h3,
.legal h4,
.legal h5,
.legal h6 {
  font-family: 'Gentium Book Basic', Georgia, serif;
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.legal p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.legal ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  list-style-type: disc;
}

/* === MOBILE OPTIMIERUNGEN === */

/* Hamburger-Icon Safe-Area für moderne Smartphones */
.menu-toggle {
  top: max(1rem, calc(env(safe-area-inset-top, 0px) + 0.75rem));
  left: max(1rem, calc(env(safe-area-inset-left, 0px) + 1rem));
}

/* Mobile Anpassungen für Geräte bis 768px Breite */
@media (max-width: 768px) {
  .card {
    /* Karte positionieren: etwas höher und weniger extreme Transformation */
    top: 50vh;
    transform: translate(-50%, -50%);
    
    /* Responsive Größenänderungen */
    max-width: calc(100vw - 2rem);
    width: calc(100% - 2rem);
    margin: 0 1rem;
    
    /* Flexibles Seitenverhältnis für mobile Geräte */
    aspect-ratio: 1.2 / 1;
    
    /* Angepasstes Padding mit Platz für Hamburger-Icon */
    padding: 1.5rem;
    padding-left: 4rem;
    
    /* Sichere Abstände für Safe-Area */
    margin-left: max(1rem, env(safe-area-inset-left, 0px));
    margin-right: max(1rem, env(safe-area-inset-right, 0px));
  }
  
  /* Typografie-Anpassungen für mobile Geräte */
  .card h1 {
    font-size: 2rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
  }
  
  .card .subtitle {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  .card .services {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
  }
  
  .card .contact {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1rem;
  }
  
  .card .notice {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  
  /* Wappen-Anpassung für mobile Geräte */
  body::before {
    top: 50vh;
    width: 80vw;
    height: 80vw;
    opacity: 0.03;
  }
  
  /* Footer-Anpassungen für mobile Geräte */
  footer {
    position: fixed;
    padding: 0.75rem max(1rem, env(safe-area-inset-left, 0px));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
  
  footer .footer-content {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  footer .qr-footer {
    width: 48px;
    height: 48px;
  }
}

/* Anpassungen für sehr kleine Geräte (Smartphones im Hochformat) */
@media (max-width: 480px) {
  .card {
    /* Noch kompaktere Darstellung */
    aspect-ratio: 1 / 1;
    padding: 1.25rem;
    padding-left: 3.5rem;
    max-width: calc(100vw - 1.5rem);
    
    /* Vertikale Position für kleine Bildschirme optimieren */
    top: 45vh;
  }
  
  .card h1 {
    font-size: 1.7rem;
    letter-spacing: 0.04em;
  }
  
  .card .subtitle {
    font-size: 1rem;
  }
  
  .card .services,
  .card .contact {
    font-size: 0.85rem;
  }
  
  .card .notice {
    font-size: 0.75rem;
  }
  
  /* Hamburger-Icon etwas kompakter */
  .menu-toggle {
    width: 28px;
    height: 28px;
  }
  
  /* Mobile Menu schmaler */
  .mobile-menu {
    width: 220px;
  }
}

/* Spezielle Anpassungen für sehr schmale Geräte */
@media (max-width: 360px) {
  .card {
    padding: 1rem;
    padding-left: 3rem;
    margin: 0 0.5rem;
    max-width: calc(100vw - 1rem);
  }
  
  .card h1 {
    font-size: 1.5rem;
  }
  
  .card .subtitle {
    font-size: 0.9rem;
  }
  
  .card .services,
  .card .contact,
  .card .notice {
    font-size: 0.8rem;
  }
}

/* Rechtsanwalt-Seite spezifische mobile Anpassungen */
@media (max-width: 768px) {
  .card.card-lawyer {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    aspect-ratio: auto;
    min-height: auto;
    padding: 1.5rem;
    padding-left: 4rem;
    top: 20vh;
    transform: translate(-50%, 0);
  }
  
  .card.card-lawyer .portrait {
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    justify-self: center;
  }
  
  .card.card-lawyer .vita-list {
    padding-left: 1rem;
    font-size: 0.9rem;
  }
  
  .card.card-lawyer .vita-list li {
    margin: 0.4rem 0;
  }
}

/* Landscape-Modus für Smartphones */
@media (max-width: 768px) and (orientation: landscape) {
  .card {
    top: 50vh;
    max-height: 80vh;
    overflow-y: auto;
    aspect-ratio: auto;
    padding: 1rem;
    padding-left: 3.5rem;
  }
  
  .card h1 {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
  }
  
  .card .subtitle {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
  
  .card .services {
    margin-bottom: 1rem;
  }
  
  .card .contact {
    margin-bottom: 0.75rem;
  }
  
  .card.card-lawyer {
    top: 10vh;
    transform: translate(-50%, 0);
    max-height: 80vh;
  }
}

/* Hover-Effekte nur auf Desktop-Geräten */
@media (hover: hover) {
  .menu-toggle:hover {
    color: #2d5aa0;
  }
  
  .mobile-menu a:hover {
    text-decoration: underline;
    color: #2d5aa0;
  }
  
  .card .contact a:hover {
    color: #0052a3;
  }
  
  footer a:hover {
    color: #0052a3;
  }
}