/* Todayly 2.16.0 – responsiver Gesamtaufbau
 * Erweitert das bestehende Layout ohne Eingriffe in Anmeldung, Player oder Moderation.
 * Ladereihenfolge: nach app.css, warmth.css, diary2142.css und comments2150.css.
 */
:root { --todayly-side-width: clamp(224px, 16vw, 278px); }

/* Die Markenleiste ist auf jeder Desktop-Breite bildschirmfüllend. */
.todayly-global-header .header-inner {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: clamp(15px, 2.3vw, 46px);
  gap: clamp(12px, 1.4vw, 27px);
}
.todayly-global-header .brand,
.todayly-global-header .header-radio,
.todayly-global-header .header-radio-details,
.todayly-global-header .todayly-bell { min-width: 0; }
.todayly-global-header .header-radio {
  max-width: min(55vw, 780px);
  margin-left: auto;
}
.todayly-global-header .header-radio-track { max-width: 100%; }

/* Links die Navigation, rechts die gesamte nutzbare Inhaltsbreite. */
.todayly-app-grid {
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: var(--todayly-side-width) minmax(0, 1fr);
}
.todayly-app-content,
.todayly-app-content > .container,
.todayly-app-content > .footer { min-width: 0; width: 100%; }
.todayly-app-content > .container {
  max-width: none;
  margin-inline: 0;
  padding: clamp(22px, 2.1vw, 44px) clamp(20px, 2.5vw, 54px) 85px;
}
.todayly-app-content > .footer {
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(20px, 2.5vw, 54px);
}
.todayly-sidebar { min-width: 0; }

/* Das Tagebuch füllt den Arbeitsbereich. Die rechte Spalte bleibt proportional,
 * die Texte selbst bekommen aus Lesbarkeitsgründen keine endlosen Zeilen. */
.social-shell.social-shell--global {
  width: 100%;
  max-width: 1700px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 20vw, 350px);
  gap: clamp(16px, 1.6vw, 30px);
}
.social-shell--global > *,
.social-center,
.social-right,
.social-post,
.diary-welcome,
.diary-quick-entry { min-width: 0; }
.social-post-text { max-width: 85ch; }
.diary-welcome-image img,
.scene-photo,
.social-photo-grid img { max-width: 100%; }

/* Breite Laptops: Lesespalte vor Zusatzinformationen priorisieren. */
@media (max-width: 1350px) {
  .social-shell.social-shell--global {
    grid-template-columns: minmax(0, 1fr);
  }
  .social-shell--global .social-right { display: none; }
}
/* Auf Laptop- und Tabletbreiten wandert die rechte Inspiration unter
 * das Tagebuch, statt in einer zu schmalen Seitenspalte zu verschwinden. */
@media (min-width: 801px) and (max-width: 1350px) {
  .social-shell.social-shell--global .social-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 18px;
  }
  .social-shell--global .social-rail-block { margin-bottom: 0; }
}
@media (max-width: 1050px) and (min-width: 801px) {
  :root { --todayly-side-width: 210px; }
  .todayly-app-content > .container {
    padding: 26px clamp(16px, 2vw, 26px) 75px;
  }
  .todayly-global-header .header-radio-volume,
  .todayly-global-header .header-radio-home { display: none; }
}

/* Tablet und Handy: Sidebar wird zur ausklappbaren Navigation.
 * Player und Nachrichten-Glocke bleiben unabhängig davon verfügbar. */
@media (max-width: 800px) {
  .todayly-app-grid { display: block; width: 100%; }
  .todayly-global-header .header-inner {
    min-height: 73px;
    padding: 10px clamp(10px, 2.2vw, 18px);
    gap: clamp(7px, 1.5vw, 13px);
  }
  .todayly-global-header .header-radio {
    max-width: none;
    min-width: 0;
  }
  .todayly-app-content > .container {
    width: 100%;
    padding: 22px clamp(13px, 3vw, 22px) 65px;
  }
  .todayly-app-content > .footer {
    padding-inline: clamp(13px, 3vw, 22px);
  }
  .social-shell.social-shell--global {
    display: block;
    max-width: 100%;
  }
  .todayly-sidebar { width: min(83vw, 300px); }
}
@media (max-width: 540px) {
  .todayly-global-header .brand span { display: none; }
  .todayly-global-header .header-radio-volume,
  .todayly-global-header .header-radio-home { display: none; }
  .todayly-app-content > .container { padding-inline: 13px; }
  .diary-quick-entry { gap: 12px; }
  .diary-switcher { width: 100%; }
  .social-comment-compose { min-width: 0; }
}
@media (max-width: 360px) {
  .todayly-app-content > .container { padding-inline: 10px; }
  .todayly-global-header .header-inner { padding-inline: 8px; }
}

/* Gemeinsamer TODAY-Designstandard. */
*, *::before, *::after { border-radius: 0 !important; }