/* =====================================================================
   Breite Bildschirme. Bis 899 px gilt das Handy-Layout (höchstens 600 px breit, mittig),
   ab 900 px ordnen sich die Seiten in Spalten, die Navigation wandert nach oben.
   ===================================================================== */
@media (max-width: 899px) { .nur-gross { display: none !important; } }
@media (min-width: 900px) {
  .nur-klein { display: none !important; }
  .seite { max-width: none; }
  .rahmen { width: 100%; max-width: 1264px; margin: 0 auto; padding: 0 32px 64px; }

  /* Kopfzeile über die ganze Breite, Inhalt auf Rahmenbreite */
  .kopf { position: sticky; top: 0; z-index: 10; background: var(--bg); gap: 28px;
    padding: 12px max(32px, calc((100% - 1200px) / 2)); }
  .kopf .logo { font-size: 23px; }
  .haupt { display: flex; gap: 4px; }
  .haupt a { padding: 9px 14px; border-radius: 10px; text-decoration: none; color: var(--meta); font-weight: 700; font-size: 15px; transition: background .15s, color .15s; }
  .haupt a:hover { background: var(--flaeche); color: var(--text); }
  .haupt a.hier { color: var(--text); background: var(--flaeche); }
  .suche { flex: 1; max-width: 440px; margin-left: auto; height: 42px; border-radius: 12px; background: var(--flaeche);
    display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--meta); border: 1.5px solid transparent; }
  .suche:focus-within { border-color: var(--akzent); }
  .suche input { flex: 1; border: 0; background: transparent; color: var(--text); font: 500 15px 'Bricolage Grotesque', sans-serif; outline: none; }
  .kopf-rechts { gap: 8px; }
  .hochladen { height: 40px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--akzent); color: #121212;
    font: 800 14px 'Bricolage Grotesque', sans-serif; display: flex; align-items: center; gap: 6px; }
  .brotkrumen { font-size: 13px; font-weight: 700; color: var(--meta); padding: 22px 0 0; display: flex; gap: 8px; }
  .brotkrumen a { color: var(--meta); text-decoration: none; }
  .brotkrumen a:hover { color: var(--text); }
  .abschnitt { padding: 36px 0 0; }
  .abschnitt-kopf h2 { font-size: 22px; }

  /* ---------- Startseite ---------- */
  .start { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .start > .hallo { grid-column: 1 / 7; grid-row: 1; align-self: end; padding: 48px 0 18px; gap: 12px; }
  .start > .hallo h1 { font-size: 54px; letter-spacing: -1.6px; line-height: 1.02; }
  .start > .hallo p { font-size: 18px; max-width: 460px; }
  .start > .pillen { grid-column: 1 / 7; grid-row: 2; padding: 0; flex-wrap: wrap; align-self: start; }
  .start > .woche-a { grid-column: 7 / 13; grid-row: 1 / 3; padding-top: 32px; }
  .woche { padding: 22px; }
  .woche .titelbild { height: 230px; }
  .woche .titelbild img { width: 124px; }
  .woche .titelbild img.l2 { width: 140px; }
  .woche h3 { font-size: 32px; }
  .start > .neu-a { grid-column: 1 / 13; padding-left: 0; padding-right: 0; }
  .start > .neu-a .abschnitt-kopf { padding: 0 !important; }
  .start .reihe-quer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0; overflow: visible; }
  .start .kachel-app { padding: 18px; gap: 10px; }
  .start > .feed-a { grid-column: 1 / 9; }
  .start > .forum-a { grid-column: 9 / 13; position: sticky; top: 84px; align-self: start; }
  .start .eintrag { padding: 20px; }
  .start .eintrag img.bild { width: 220px !important; height: 420px !important; }

  /* ---------- App-Detailseite ---------- */
  .detail { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 28px; }
  .detail-links { position: sticky; top: 88px; }
  .detail-links .inhalt { padding: 0; }
  .detail-links .aktionen { margin: 16px 0 0; }
  .detail-rechts .shots { padding: 0 60px 0 0; gap: 14px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .detail-rechts .shots figure { flex-basis: 180px; }
  .detail-rechts .shots img { width: 180px; height: 360px; }
  .detail-rechts .making { margin: 32px 0 0; padding: 24px; }
  .detail-rechts .making h2 { font-size: 28px; }
  .detail-rechts .kommentare { padding: 32px 0 0; max-width: 720px; }
  .bereich-titel { margin: 0 0 14px; font-size: 22px; font-weight: 800; }

  /* ---------- Making-of ---------- */
  .mo-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 64px; max-width: 1140px; align-items: start; }
  .mo-raster > .brotkrumen { grid-column: 1 / 3; }
  .mo-raster > .mo-kopf { grid-column: 1; padding: 18px 0 0; gap: 14px; }
  .mo-raster > .mo-kopf h1 { font-size: 52px; letter-spacing: -1.5px; }
  .mo-raster > .mo-kopf .lead { font-size: 19.5px; }
  .mo-raster > .mo-seite { grid-column: 2; grid-row: 2 / span 4; position: sticky; top: 88px; padding: 18px 0 0; display: flex; flex-direction: column; gap: 14px; }
  .mo-raster > .zeitleiste { grid-column: 1; padding: 32px 0 0; }
  .mo-raster .kapitel h2 { font-size: 24px; }
  .mo-raster .kapitel p { font-size: 16.5px; }
  .mo-raster .kapitel .handy { width: 200px !important; }
  .mo-raster > .abschnitt { grid-column: 1; }
  .mo-app { border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
  .mo-app .zeile { display: flex; gap: 12px; align-items: center; }
  .mo-app b { font-size: 20px; }
  .mo-app span { font-size: 13px; opacity: .8; }
  .mo-app .laden { height: 44px; font-size: 15px; }
  .mo-seite .mini-aktionen { margin: 0; }

  /* ---------- Forum ---------- */
  .forum { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 40px; align-items: start; padding-top: 28px; }
  .forum-seite { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; }
  .forum-seite .forum-kopf { padding: 0; flex-direction: column; align-items: stretch; }
  .forum-seite .forum-kopf h1 { font-size: 36px; }
  .forum-seite .neu-knopf { justify-content: center; height: 44px; }
  .forum-seite .pillen { flex-direction: column; padding: 0; overflow: visible; gap: 2px; }
  .forum-seite .pillen button, .forum-seite .pillen .pille { justify-content: space-between; border: 0; height: 40px; border-radius: 10px; font-size: 14.5px; }
  .forum-seite .pillen button:hover, .forum-seite .pillen .pille:hover { background: var(--flaeche); filter: none; }
  .forum-seite .pillen button.an, .forum-seite .pillen .pille.an { background: var(--flaeche); color: var(--text); border: 0; box-shadow: inset 3px 0 0 var(--akzent); }
  .forum-mitte .abschnitt { padding: 0; }
  .forum-mitte .liste { padding: 4px 0 0; }
  .forum-mitte .thema { padding: 18px 0; }
  .forum-mitte .thema h3 { font-size: 18px; }
  .forum-mitte .thema p { font-size: 14.5px; }
  .forum-rechts { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
  .seitenkasten { background: var(--flaeche); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .seitenkasten h3 { margin: 0; font-size: 15px; font-weight: 800; }
  .seitenkasten .person { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  .seitenkasten .person .av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px; }
  .seitenkasten .person small { margin-left: auto; color: var(--meta); font-size: 12px; white-space: nowrap; }
  .seitenkasten p, .seitenkasten li { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--gedaempft); }
  .seitenkasten ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
  .seitenkasten a.link { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; line-height: 1.35; display: block; }
  .seitenkasten a.link:hover { color: var(--akzent-text); }
  .seitenkasten .leise-zeile { font-size: 12px; color: var(--meta); }

  /* ---------- Forum-Thema ---------- */
  .thema-raster { display: grid; grid-template-columns: minmax(0, 760px) 300px; column-gap: 56px; justify-content: center; align-items: start; }
  .thema-raster > .brotkrumen { grid-column: 1 / 3; }
  .thema-haupt .frage { padding: 18px 0 0; }
  .thema-haupt .frage h1 { font-size: 36px; letter-spacing: -.8px; }
  .thema-haupt .faden { padding: 0; }
  .thema-haupt .beitrag p { font-size: 16px; }
  .thema-haupt .schreiben { position: static; border: 1.5px solid var(--linie); border-radius: 18px; padding: 14px; margin-top: 24px; }
  .thema-seite { position: sticky; top: 88px; padding-top: 18px; display: flex; flex-direction: column; gap: 16px; }
  .verlinkt { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .verlinkt .zeile { display: flex; gap: 12px; align-items: center; }
  .verlinkt .buchstabe { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
  .verlinkt b { font-size: 17px; }
  .verlinkt span.t { font-size: 12.5px; opacity: .8; }
  .verlinkt .laden { height: 42px; border-radius: 13px; font-size: 14px; }
  .stapel { display: flex; }
  .stapel span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--flaeche); margin-left: -6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; }
  .stapel span:first-child { margin-left: 0; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .forum { grid-template-columns: 220px minmax(0, 1fr); }
  .forum-rechts { display: none; }
}