/* ------------------------------------------------- TABLET (431px – 768px) ----------------------------------------------------- */

@media (min-width: 431px) and (max-width: 768px) {

  /* ── Basis ── */
  body {
    font-size: 1.125rem;
  }

  /* ── Headings ── */
  .page-header h1,
  .dashboard-header h1,
  .animal-hero-name {
    font-size: 2rem;
  }

  .section-title,
  .naepfe-card-title {
    font-size: 1.375rem;
  }

  .page-header p,
  .empty-hint,
  .task-label,
  .animal-task-label,
  .naepfe-data-label,
  .naepfe-data-value {
    font-size: 1rem;
  }

  /* ── Buttons ── */
  button,
  .btn-primary,
  .btn-secondary,
  .btn-dashboard,
  .btn-add-child,
  .btn-logout,
  .btn-cancel,
  .btn-confirm-delete,
  .modal-btn-cancel,
  .modal-btn-confirm,
  .modal-btn-delete {
    font-size: 1.0625rem;
    padding: 0.75rem 1rem;
  }

  .modal-actions,
  .register-child-actions,
  .register-animal-form .actions,
  .actions {
    gap: 0.875rem;
  }

  .btn-danger {
    font-size: 1rem;
    padding: 0.75rem 1.8rem;
  }

  .btn-logout {
    display: block;
  }

  /* ── Cards ── */
  .task-card,
  .child-card,
  .mini-kid-card,
  .mini-pet-card {
    padding: 1.25rem;
    min-height: 5rem;
  }

  .naepfe-card {
    padding: 1.25rem;
  }

  .task-card-header h3,
  .mini-kid-card h3,
  .mini-pet-card h3 {
    font-size: 1.0625rem;
  }

  .task-row,
  .animal-task-row {
    padding: 0.875rem 1rem;
  }

  /* ── Forms ── */
  .register-animal-form,
  .register-child-form {
    padding: 1.75rem;
    gap: 0.75rem;
  }

  .register-animal-form input,
  .register-animal-form select,
  .register-child-form input[type="text"] {
    padding: 1rem 1.125rem;
    font-size: 1.0625rem;
  }

  label {
    margin-top: 1rem;
  }

  input[type="email"],
  input[type="password"],
  input[type="text"] {
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
  }

  /* ── Modals ── */
  .kids-modal {
    max-width: 26rem;
    padding: 2.25rem 2rem;
  }

  .kids-modal h2 {
    font-size: 1.375rem;
  }

  .kids-modal .modal-subtitle {
    font-size: 0.9375rem;
  }

  .kids-modal input[type="number"] {
    padding: 0.875rem 1rem;
    font-size: 1.0625rem;
  }

  /* ── Login / Register ── */
  .petcareLogo {
    width: 75%;
    max-width: 14rem;
  }

  .HeroSectionRegister {
    margin-bottom: 1.5rem;
  }

  .IconSection img,
  .IconSection .icon {
    height: clamp(4rem, 8vw, 4.5rem);
    max-width: clamp(4rem, 8vw, 4.5rem);
  }

  /* ── Landing Page ── */
  .HeroText {
    margin: 1.25rem 0;
  }

  .sectionInfo h2,
  .sectionInfo p,
  .sectionCTA {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navigation .btn-secondary,
  .navigation .btn-primary {
    flex: 1;
    max-width: 100%;
  }

  .sectionCTA .btn-primary {
    width: clamp(60%, 80vw, 100%);
  }

  /* ── Pages ── */
  .page {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2rem 2.5rem 8.75rem;
  }

  /* ── Settings ── */
  #panel-hub,
  .panel {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #panel-hub .page-header,
  .panel .page-header {
    max-width: 40rem;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section,
  .settings-card,
  .danger-card,
  .coming-soon-banner,
  .invite-box,
  .add-form,
  .member-list,
  .theme-options,
  .btn-logout,
  .profile-banner {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
  }

  .card-item {
    padding: 1.125rem 1.25rem;
  }

  .card-text strong { font-size: 1.0625rem; }
  .card-text span   { font-size: 0.875rem; }

  .setting-label strong { font-size: 1.0625rem; }
  .setting-label span   { font-size: 0.875rem; }

  .setting-row {
    padding: 1.125rem 1.25rem;
  }

  .profile-info strong { font-size: 1.125rem; }
  .profile-info span   { font-size: 0.875rem; }

  .section-label {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
  }

  .section {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .section-gap { height: 1rem; }

  /* ── Näpfe Detail ── */
  .animal-hero {
    padding: 3rem 2rem 2rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    margin-top: -1rem;
  }

  .btn-back-hero {
    position: absolute;
    top: 1rem;
    left: 2.5rem;
  }

  .canvas-wrapper {
    height: 240px;
  }

  .naepfe-card canvas {
    min-height: 240px !important;
  }

  /* ── Tier hinzufügen ── */
  .icon-picker {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    max-width: 100%;
    margin: 0 auto;
  }

  .icon-option {
    min-width: 4rem;
  }
}

/* ── Icon-Picker 5 Spalten ab 556px ── */
@media (min-width: 556px) and (max-width: 768px) {
  .icon-picker {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ── Statisch ab 581px ── */
@media (min-width: 581px) {

  /* ── Footer ── */
  .bottom-nav {
    justify-content: center;
    gap: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── Login / Register ── */
  .petcareLogo {
    width: 80%;
    max-width: 14rem;
  }

  .HeroSectionRegister,
  #loginForm,
  #registerForm {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
  }

  .form-link {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
  }

  .IconSection {
    justify-content: center;
    gap: 2.95rem;
    margin-left: auto;
    margin-right: auto;
  }

  .IconSection img,
  .IconSection .icon {
    height: 4rem;
    max-width: 4.5rem;
  }

  /* ── Landing Page ── */
  .navigation {
    justify-content: center;
  }

  .navigation .btn-secondary,
  .navigation .btn-primary {
    max-width: 18rem;
  }

  .sectionCTA .btn-primary {
    width: 29rem;
    max-width: 29rem;
  }
}

@media (min-width: 769px) {
  .modal {
    max-width: 100%;
    border-radius: 1.5rem;
  }

  .modal-inner {
    max-width: 44rem;
    margin: 0 auto;
  }
}

/* ------------------------------------------------- SMALL DESKTOP (769px – 1024px) ----------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {

  /* ── Basis ── */
  body {
    font-size: 1.1875rem;
  }

  /* ── Headings ── */
  .page-header h1,
  .dashboard-header h1,
  .animal-hero-name {
    font-size: 2.25rem;
  }

  .section-title,
  .naepfe-card-title {
    font-size: 1.5rem;
  }

  .page-header p,
  .empty-hint,
  .task-label,
  .animal-task-label,
  .naepfe-data-label,
  .naepfe-data-value {
    font-size: 1.0625rem;
  }

  /* ── Buttons ── */
  button,
  .btn-primary,
  .btn-secondary,
  .btn-dashboard,
  .btn-add-child,
  .btn-logout,
  .btn-cancel,
  .btn-confirm-delete,
  .modal-btn-cancel,
  .modal-btn-confirm,
  .modal-btn-delete {
    font-size: 1.125rem;
    padding: 0.875rem 1.25rem;
  }

  .btn-danger {
    font-size: 1.0625rem;
    padding: 0.875rem 2rem;
  }

  /* ── Cards ── */
  .task-card,
  .child-card,
  .mini-kid-card,
  .mini-pet-card {
    padding: 1.375rem;
    min-height: 5rem;
  }

  .naepfe-card {
    padding: 1.375rem;
  }

  .task-row,
  .animal-task-row {
    padding: 1rem 1.125rem;
  }

  /* ── Forms ── */
  .register-animal-form,
  .register-child-form {
    padding: 2rem;
  }

  .register-animal-form input,
  .register-animal-form select,
  .register-child-form input[type="text"] {
    padding: 1.125rem;
    font-size: 1.125rem;
  }

  input[type="email"],
  input[type="password"],
  input[type="text"] {
    padding: 1rem 1.125rem;
    font-size: 1.125rem;
  }

  /* ── Modals ── */
  .kids-modal {
    max-width: 30rem;
    padding: 2.5rem 2.25rem;
  }

  .kids-modal h2 {
    font-size: 1.5rem;
  }

  .kids-modal .modal-subtitle {
    font-size: 1rem;
  }

  .kids-modal input[type="number"] {
    padding: 1rem 1.125rem;
    font-size: 1.125rem;
  }

  /* ── Landing Page ── */
  .HeroText {
    margin: 1.5rem 0;
  }

  .sectionInfo h2,
  .sectionInfo p,
  .sectionCTA {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* ── Pages ── */
  .page {
    max-width: 44rem;
    padding: 2.5rem 3rem 8.75rem;
  }

  /* ── Settings ── */
  #panel-hub,
  .panel {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #panel-hub .page-header,
  .panel .page-header {
    max-width: 44rem;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .section,
  .settings-card,
  .danger-card,
  .coming-soon-banner,
  .invite-box,
  .add-form,
  .member-list,
  .theme-options,
  .btn-logout,
  .profile-banner {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
  }

  .member-list {
    padding: 0 1.5rem;
  }

  .card-item {
    padding: 1.25rem 1.375rem;
  }

  .card-text strong { font-size: 1.125rem; }
  .card-text span   { font-size: 0.9375rem; }

  .setting-label strong { font-size: 1.125rem; }
  .setting-label span   { font-size: 0.9375rem; }

  .setting-row {
    padding: 1.25rem 1.375rem;
  }

  .profile-info strong { font-size: 1.1875rem; }
  .profile-info span   { font-size: 0.9375rem; }

  /* ── Näpfe Detail ── */
  .canvas-wrapper {
    height: 280px;
  }

  .naepfe-card canvas {
    min-height: 280px !important;
  }

  /* ── Tier hinzufügen ── */
  .icon-picker {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ------------------------------------------------- DESKTOP (1025px – 1440px) ----------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1440px) {

  /* ── Basis ── */
  body {
    font-size: 1.25rem;
  }

  /* ── Headings ── */
  .page-header h1,
  .dashboard-header h1,
  .animal-hero-name {
    font-size: 2.5rem;
  }

  .section-title,
  .naepfe-card-title {
    font-size: 1.625rem;
  }

  .page-header p,
  .empty-hint,
  .task-label,
  .animal-task-label,
  .naepfe-data-label,
  .naepfe-data-value {
    font-size: 1.125rem;
  }

  /* ── Buttons ── */
  button,
  .btn-primary,
  .btn-secondary,
  .btn-dashboard,
  .btn-add-child,
  .btn-logout,
  .btn-cancel,
  .btn-confirm-delete,
  .modal-btn-cancel,
  .modal-btn-confirm,
  .modal-btn-delete {
    font-size: 1.125rem;
    padding: 0.875rem 1.25rem;
  }

  .btn-danger {
    font-size: 1.0625rem;
    padding: 0.875rem 2rem;
  }

  /* ── Cards ── */
  .task-card,
  .child-card,
  .mini-kid-card,
  .mini-pet-card {
    padding: 1.375rem;
    min-height: 5rem;
  }

  .naepfe-card {
    padding: 1.375rem;
  }

  .task-row,
  .animal-task-row {
    padding: 1rem 1.125rem;
  }

  /* ── Forms ── */
  .register-animal-form,
  .register-child-form {
    padding: 2rem;
  }

  .register-animal-form input,
  .register-animal-form select,
  .register-child-form input[type="text"] {
    padding: 1.125rem;
    font-size: 1.125rem;
  }

  input[type="email"],
  input[type="password"],
  input[type="text"] {
    padding: 1rem 1.125rem;
    font-size: 1.125rem;
  }

  /* ── Modals ── */
  .kids-modal {
    max-width: 30rem;
    padding: 2.5rem 2.25rem;
  }

  .kids-modal h2 {
    font-size: 1.5rem;
  }

  .kids-modal .modal-subtitle {
    font-size: 1rem;
  }

  .kids-modal input[type="number"] {
    padding: 1rem 1.125rem;
    font-size: 1.125rem;
  }

  /* ── Tier hinzufügen ── */
  .icon-picker {
    grid-template-columns: repeat(5, 1fr);
  }

  /* ── Pages ── */
  .page {
    max-width: 48rem;
    padding: 3rem 4rem 8.75rem;
  }

  /* ── Settings ── */
  #panel-hub,
  .panel {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  #panel-hub .page-header,
  .panel .page-header {
    max-width: 48rem;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section,
  .settings-card,
  .danger-card,
  .coming-soon-banner,
  .invite-box,
  .add-form,
  .member-list,
  .theme-options,
  .btn-logout,
  .profile-banner {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
  }

  .member-list {
    padding: 0 1.5rem;
  }

  .card-item {
    padding: 1.25rem 1.375rem;
  }

  .card-text strong { font-size: 1.125rem; }
  .card-text span   { font-size: 0.9375rem; }

  .setting-label strong { font-size: 1.125rem; }
  .setting-label span   { font-size: 0.9375rem; }

  .setting-row {
    padding: 1.25rem 1.375rem;
  }

  .profile-info strong { font-size: 1.1875rem; }
  .profile-info span   { font-size: 0.9375rem; }

  /* ── Modal ── */
  .modal-inner {
    max-width: 48rem;
  }

  /* ── Charts ── */
  .canvas-wrapper {
    height: 300px;
  }

  .naepfe-card canvas {
    min-height: 300px !important;
  }

  /* ── Landing Page ── */
  .HeroText {
    margin: 2rem 0;
  }

  .sectionInfo h2,
  .sectionInfo p,
  .sectionCTA {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .navigation .btn-secondary,
  .navigation .btn-primary {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }

  .sectionCTA .btn-primary {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }
}

/* ------------------------------------------------- LARGE DESKTOP (1441px+) ----------------------------------------------------- */

@media (min-width: 1441px) {

  /* ── Basis ── */
  body {
    font-size: 1.25rem;
  }

  /* ── Headings ── */
  .page-header h1,
  .dashboard-header h1,
  .animal-hero-name {
    font-size: 2.5rem;
  }

  .section-title,
  .naepfe-card-title {
    font-size: 1.625rem;
  }

  .page-header p,
  .empty-hint,
  .task-label,
  .animal-task-label,
  .naepfe-data-label,
  .naepfe-data-value {
    font-size: 1.125rem;
  }

  /* ── Buttons ── */
  button,
  .btn-primary,
  .btn-secondary,
  .btn-dashboard,
  .btn-add-child,
  .btn-logout,
  .btn-cancel,
  .btn-confirm-delete,
  .modal-btn-cancel,
  .modal-btn-confirm,
  .modal-btn-delete {
    font-size: 1.125rem;
    padding: 0.875rem 1.25rem;
  }

  .btn-danger {
    font-size: 1.0625rem;
    padding: 0.875rem 2rem;
  }

  /* ── Cards ── */
  .task-card,
  .child-card,
  .mini-kid-card,
  .mini-pet-card {
    padding: 1.375rem;
    min-height: 5rem;
  }

  .naepfe-card {
    padding: 1.375rem;
  }

  .task-row,
  .animal-task-row {
    padding: 1rem 1.125rem;
  }

  /* ── Forms ── */
  .register-animal-form,
  .register-child-form {
    padding: 2rem;
  }

  .register-animal-form input,
  .register-animal-form select,
  .register-child-form input[type="text"] {
    padding: 1.125rem;
    font-size: 1.125rem;
  }

  input[type="email"],
  input[type="password"],
  input[type="text"] {
    padding: 1rem 1.125rem;
    font-size: 1.125rem;
  }

  /* ── Modals ── */
  .kids-modal {
    max-width: 30rem;
    padding: 2.5rem 2.25rem;
  }

  .kids-modal h2 {
    font-size: 1.5rem;
  }

  .kids-modal .modal-subtitle {
    font-size: 1rem;
  }

  .kids-modal input[type="number"] {
    padding: 1rem 1.125rem;
    font-size: 1.125rem;
  }

  /* ── Tier hinzufügen ── */
  .icon-picker {
    grid-template-columns: repeat(5, 1fr);
  }

  /* ── Pages ── */
  .page {
    max-width: 48rem;
    padding: 3rem 4rem 8.75rem;
    margin: 0 auto;
  }

  /* ── Settings ── */
  #panel-hub,
  .panel {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  #panel-hub .page-header,
  .panel .page-header {
    max-width: 48rem;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .section,
  .settings-card,
  .danger-card,
  .coming-soon-banner,
  .invite-box,
  .add-form,
  .member-list,
  .theme-options,
  .btn-logout,
  .profile-banner {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
  }

  .member-list {
    padding: 0 1.5rem;
  }

  .card-item {
    padding: 1.25rem 1.375rem;
  }

  .card-text strong { font-size: 1.125rem; }
  .card-text span   { font-size: 0.9375rem; }

  .setting-label strong { font-size: 1.125rem; }
  .setting-label span   { font-size: 0.9375rem; }

  .setting-row {
    padding: 1.25rem 1.375rem;
  }

  .profile-info strong { font-size: 1.1875rem; }
  .profile-info span   { font-size: 0.9375rem; }

  /* ── Modal ── */
  .modal-inner {
    max-width: 48rem;
  }

  /* ── Charts ── */
  .canvas-wrapper {
    height: 300px;
  }

  .naepfe-card canvas {
    min-height: 300px !important;
  }

  /* ── Landing Page ── */
  .HeroText {
    margin: 2rem 0;
  }

  .sectionInfo h2,
  .sectionInfo p,
  .sectionCTA {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .navigation .btn-secondary,
  .navigation .btn-primary {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }

  .sectionCTA .btn-primary {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }
}