/*  Fassung für Handy und Tablet – greift bis 1099 px.
 *  Der Umschaltpunkt steht auch in assets/js/grenze.js und in den
 *  Stilblöcken der Seiten (media="(min-width: 1100px)").
 *
 *  Haltung: so reduziert wie die Seite selbst. Keine Trennlinien, keine
 *  Rundungen, keine Schatten, kein Weichzeichner, keine Symbole – nur
 *  Schrift, Weissraum und Bild. Grossbuchstaben wie im Original, dafür
 *  etwas mehr Zeilenabstand, damit längere Texte lesbar bleiben.
 *
 *  Die Desktop-Blöcke (proj-offset, lage, fix-scroll, text-breite,
 *  luft-unten, menu-abstand) tragen media="(min-width: 1100px)".
 */

@media (max-width: 1099px) {

  html { -webkit-text-size-adjust: 100%; }
  html, body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff;
    /* Das Theme setzt html { margin:130px 0 0 130px } und
       body.section-2 { width:880px } – beides hier aufheben. */
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body { zoom: 1 !important; }

  /* ══════════ Kopfzeile ══════════ */
  #menu {
    position: fixed !important;
    left: 0 !important; right: 0 !important; top: 0 !important;
    bottom: auto !important;
    width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; float: none !important;
    background: #fff;
    z-index: 9000;
  }
  #menu .container {
    margin: 0 !important; padding: 0 !important;
    width: auto !important;
    display: block;
  }

  /* Name – zwei Zeilen wie auf der Seite, führt zur Startseite */
  #menu .container > p {
    margin: 0;
    padding: 20px 60px 20px 20px;
    line-height: 1.25;
  }
  #menu .container > p br + br { display: none; }
  #menu .container > p a { border: none; }

  /* ══════════ Burger – drei feine Striche, nichts weiter ══════════ */
  #hs-burger {
    position: fixed; top: 21px; right: 20px; z-index: 9200;
    width: 24px; height: 21px; padding: 0;
    display: block;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #hs-burger span {
    display: block; width: 24px; height: 1px; background: #000;
    margin: 5px 0;
    transition: transform .2s ease, opacity .12s ease;
  }
  #hs-burger.offen span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #hs-burger.offen span:nth-child(2) { opacity: 0; }
  #hs-burger.offen span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ══════════ Menü ══════════ */
  #menu ul {
    display: none;
    margin: 0; padding: 0 20px;
    list-style: none;
  }
  /* Geöffnetes Menü: dahinter liegt das Bild, das im Projekt gerade
     offen ist (--hs-menuebild, gesetzt von handy-menue.js). Auf Seiten
     ohne Bild – Startseite, Kontakt, Impressum – das Startbild aus
     assets/css/startbild.css, die beim Bildwechsel mitgeschrieben wird. */
  #menu.offen {
    bottom: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-image:
      linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.62)),
      var(--hs-startbild);
    background-size: auto, cover;
    background-position: center, center bottom;
    background-repeat: no-repeat, no-repeat;
    /* fixed wird auf iOS oft ignoriert – scroll ist verlässlich */
    background-attachment: scroll, scroll;
  }
  #menu.offen ul { display: block; }
  #menu.offen ul:last-of-type { padding-bottom: 44px; }

  #menu ul li { margin: 0; padding: 0; }

  /* Genau wie am Rechner: Sektionstitel bündig, Einträge 38 px eingerückt,
     keine Symbole, keine Hervorhebung. Nur etwas Luft nach oben und unten,
     damit die Zeilen mit dem Finger zu treffen sind. */
  /* Eine durchgehend gleichmässige Liste wie am Rechner: gleiche
     Zeilenhöhe für Sektionstitel und Einträge, kein Abstand dazwischen.
     Getroffen wird über die ganze Zeilenbreite, darum reicht das aus. */
  #menu ul { margin: 0 !important; }
  #menu ul.auf { margin: 0 !important; }

  #menu ul li.section-title {
    padding: 2px 0;
    font-weight: 400;
    cursor: pointer;
  }
  #menu ul li:not(.section-title) {
    margin: 0 0 0 38px !important;
  }
  #menu ul li a {
    display: block;
    padding: 2px 0;
    text-decoration: none;
  }
  #menu ul li.active > a { text-decoration: none; }

  /* 16 px: bei 17 px bricht „Greifenhagener Strasse, Berlin" um –
     mit 16 px steht wie am Rechner jeder Eintrag in einer Zeile */
  #menu, #menu * { font-size: 16px !important; line-height: 20px !important; }

  /* ══════════ Inhalt ══════════ */
  #content {
    position: static !important;
    margin: 0 !important; float: none !important;
    width: auto !important; max-width: 100% !important;
  }
  #content .container {
    position: static !important;
    margin: 0 !important; padding: 84px 20px 64px !important;
    width: auto !important; max-width: 100% !important;
    min-height: 0 !important; float: none !important;
  }

  /* Überreste der alten Galerie im Theme */
  #s1, #s1.pics, .pics {
    width: auto !important; height: auto !important;
    position: static !important; float: none !important;
  }
  #s1 .img-wrap, .img-wrap { left: auto !important; right: auto !important; }

  /* Auf den Textseiten steht ein leerer Platzhalter fürs Bild –
     der nimmt sonst 68 px am Anfang weg. */
  .img-container p.no_nav { display: none; }
  .img-container { padding: 0 !important; }

  /* ── Bild: volle Breite, ohne Rundung ── */
  #img-container { position: static !important; margin: 0 !important; z-index: auto !important; }
  #s1 .img-wrap {
    position: static !important;
    left: auto !important; top: auto !important;
    margin: 0 !important;
  }
  #s1 .img-wrap img {
    display: block !important;
    width: 100% !important; height: auto !important;
    max-width: 100% !important; max-height: none !important;
  }
  #s1 .img-wrap p { display: none; }

  /* Abstand zwischen Bild und Text – der Zähler ist bewusst weggelassen */
  #img-container { margin-bottom: 30px !important; }

  /* ── Text ── */
  .content-wrapper, div.scrollable {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; max-width: none !important;
    float: none !important; height: auto !important;
    overflow: visible !important; cursor: auto !important;
    z-index: auto !important;
    padding: 0 0 24px !important;
  }
  div.scrollable div.items, div.scrollable div {
    width: auto !important; max-width: none !important; height: auto !important;
  }

  /* Grossbuchstaben wie im Original – mit mehr Zeilenabstand,
     damit längere Absätze lesbar bleiben */
  .content-wrapper p, div.scrollable div {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .content-wrapper p { margin: 0 0 18px; }
  .content-wrapper p.projekt-titel,
  .content-wrapper h1.projekt-titel { margin: 0 0 20px; }

  a { word-break: break-word; }

  /* Rückweg zur Übersicht – auf dem Handy mit etwas mehr Luft,
     damit er sich vom Text absetzt und gut zu treffen ist */
  .zurueck-uebersicht { margin: 30px 0 0 !important; }
  .zurueck-uebersicht a { display: inline-block; padding: 8px 0; }

  /* ── Publikationsliste und Medium ──
     Gleiche ruhige Liste wie im Menü: Überschrift bündig, Beiträge
     eingerückt. Luft entsteht nur um eine aufgeklappte Gruppe.
     Am Rechner bleibt jeder Beitrag einzeilig und wird gekürzt –
     hier darf er umbrechen, das Medium rutscht in die zweite Zeile. */
  .pubwrap ul.publist li,
  .pubwrap ul.publist li.ptitle {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .pubwrap ul.publist { margin: 0 !important; }
  .pubwrap ul.publist.auf { margin: 14px 0 !important; }
  .pubwrap ul.publist.auf:first-of-type { margin-top: 0 !important; }

  .pubwrap ul.publist li.ptitle {
    margin: 0 !important;
    padding: 2px 0 !important;
  }
  .pubwrap ul.publist li:not(.ptitle) {
    margin: 0 0 0 38px !important;
    padding: 4px 0 !important;
    line-height: 1.3 !important;
  }
  .pubwrap ul.publist li a { display: inline; }
  .pubwrap .pmed { display: block; }    /* Medium in eigener Zeile */

  /* ── Archivliste ── */
  ul.archivelist { padding: 0; list-style: none; }
  ul.archivelist li a { display: block; padding: 11px 0; }

  /* ══════════ Startseite ══════════ */
  body.section-1 #bg {
    position: fixed; inset: auto 0 0 0;
    height: 100%;
    background-size: cover !important;
    background-position: center bottom !important;
  }
  /* Der Name steht über dem Bild – ein zarter Aufheller darunter, sonst nichts */
  body.section-1 #menu {
    background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.55) 60%, rgba(255,255,255,0));
  }
  /* Geöffnet auch hier das Bild dahinter – die Kurzschreibweise oben
     würde den Hintergrund von #menu.offen sonst überschreiben. */
  body.section-1 #menu.offen {
    background-image:
      linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.62)),
      var(--hs-startbild);
    background-size: auto, cover;
    background-position: center, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
  }
  body.section-1 #content .container { padding: 0 !important; }

  /* Preis-Zeichen: auf Projektseiten am Seitenende, auf der Startseite unten rechts */
  #hs-badge {
    position: static !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    display: block;
    width: 84px !important; max-width: 84px !important; height: auto !important;
    margin: 6px 20px 36px auto !important;
    z-index: auto !important;
  }
  body.section-1 #hs-badge {
    position: fixed !important;
    right: 20px !important; bottom: 20px !important;
    width: 72px !important; max-width: 72px !important;
    margin: 0 !important;
    z-index: 8000 !important;
    pointer-events: none;
  }

  /* Redaktionswerkzeuge – gesetzt wird am Rechner */
  #hs-modi, #hs-modus-info, #hs-panel, #hs-knopf, #hs-start { display: none !important; }
}