{"id":8369,"date":"2026-03-09T17:51:26","date_gmt":"2026-03-09T16:51:26","guid":{"rendered":"https:\/\/www.schulemoerschwil.ch\/?page_id=8369"},"modified":"2026-03-30T14:42:00","modified_gmt":"2026-03-30T13:42:00","slug":"leitbild","status":"publish","type":"page","link":"https:\/\/www.schulemoerschwil.ch\/?page_id=8369","title":{"rendered":"Leitbild"},"content":{"rendered":"\n<style>\n#leitbild-flip-2026{\n  width:100%;\n  margin:0;\n  padding:0;\n  box-sizing:border-box;\n}\n\n#leitbild-flip-2026 *{\n  box-sizing:border-box;\n}\n\n#leitbild-flip-2026 .hero{\n  margin:0 0 30px 0;\n}\n\n#leitbild-flip-2026 .hero img{\n  display:block;\n  width:100%;\n  height:auto;\n}\n\n#leitbild-flip-2026 .grid{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:28px;\n  width:100%;\n  padding:28px;\n}\n\n\/* Karte *\/\n#leitbild-flip-2026 .card{\n  position:relative;\n  perspective:1200px;\n  min-height:340px;\n}\n\n\/* Innenteil f\u00fcr Flip *\/\n#leitbild-flip-2026 .card-inner{\n  position:relative;\n  width:100%;\n  min-height:340px;\n  transition:transform .7s ease;\n  transform-style:preserve-3d;\n}\n\n\/* Desktop Hover Flip *\/\n@media (min-width:1025px){\n  #leitbild-flip-2026 .card:hover .card-inner{\n    transform:rotateY(180deg);\n  }\n}\n\n#leitbild-flip-2026 .card-front,\n#leitbild-flip-2026 .card-back{\n  position:absolute;\n  inset:0;\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  align-items:center;\n  padding:26px 22px;\n  text-align:center;\n  border-radius:24px;\n  backface-visibility:hidden;\n  -webkit-backface-visibility:hidden;\n}\n\n#leitbild-flip-2026 .card-front{\n  background:#f5f7fa;\n  border:1px solid #dfe5ec;\n}\n\n#leitbild-flip-2026 .card-back{\n  background:#4d5a73;\n  border:1px solid #4d5a73;\n  color:#ffffff;\n  transform:rotateY(180deg);\n  gap:12px;\n}\n\n#leitbild-flip-2026 .icon{\n  width:84px;\n  height:84px;\n  object-fit:contain;\n  display:block;\n  margin:0 auto 16px auto;\n}\n\n#leitbild-flip-2026 .front-text{\n  margin:0;\n  color:#4d5a73;\n  font-size:20px;\n  line-height:1.35;\n  font-weight:600;\n}\n\n#leitbild-flip-2026 .back-title{\n  margin:0;\n  font-size:19px;\n  font-weight:600;\n  color:#ffffff;\n  line-height:1.3;\n}\n\n#leitbild-flip-2026 .back-text{\n  margin:0;\n  font-size:16px;\n  line-height:1.5;\n  color:#ffffff;\n}\n\n\/* Mobile Accordion Elemente standardm\u00e4ssig ausblenden *\/\n#leitbild-flip-2026 .mobile-toggle{\n  display:none;\n}\n\n#leitbild-flip-2026 .mobile-panel{\n  display:none;\n}\n\n#leitbild-flip-2026 .mobile-button{\n  display:none;\n}\n\n\/* Tablet + Mobile: kein Hover-Flip mehr, sondern Ausklappen *\/\n@media (max-width:1024px){\n  #leitbild-flip-2026 .grid{\n    grid-template-columns:repeat(2,minmax(0,1fr));\n    padding:22px;\n    gap:22px;\n  }\n\n  #leitbild-flip-2026 .card{\n    min-height:auto;\n    perspective:none;\n  }\n\n  #leitbild-flip-2026 .card-inner{\n    min-height:auto;\n    transform:none !important;\n  }\n\n  #leitbild-flip-2026 .card-front,\n  #leitbild-flip-2026 .card-back{\n    position:relative;\n    inset:auto;\n    transform:none;\n    backface-visibility:visible;\n    -webkit-backface-visibility:visible;\n    min-height:auto;\n  }\n\n  #leitbild-flip-2026 .card-back{\n    display:none;\n  }\n\n  #leitbild-flip-2026 .card-front{\n    border-radius:24px 24px 0 0;\n    padding:22px 18px 18px 18px;\n  }\n\n  #leitbild-flip-2026 .icon{\n    width:76px;\n    height:76px;\n  }\n\n  #leitbild-flip-2026 .front-text{\n    font-size:18px;\n  }\n\n  #leitbild-flip-2026 .mobile-button{\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    gap:8px;\n    margin-top:16px;\n    padding:10px 14px;\n    border:1px solid #cfd6df;\n    border-radius:999px;\n    background:#ffffff;\n    color:#4d5a73;\n    font-size:14px;\n    font-weight:600;\n    line-height:1.2;\n    cursor:pointer;\n  }\n\n  #leitbild-flip-2026 .mobile-button:focus{\n    outline:2px solid #4d5a73;\n    outline-offset:2px;\n  }\n\n#leitbild-flip-2026 .mobile-panel{\n  display:block;\n  max-height:0;\n  overflow:hidden;\n  transition:max-height .35s ease, padding .35s ease;\n  background:#4d5a73;\n  color:#ffffff;\n  border:1px solid #4d5a73;\n  border-top:0;\n  border-radius:0 0 24px 24px;\n  padding:0 18px;\n}\n\n  #leitbild-flip-2026 .mobile-panel-inner{\n    padding:0;\n  }\n\n  #leitbild-flip-2026 .mobile-panel-title{\n    margin:0 0 10px 0;\n    font-size:18px;\n    font-weight:600;\n    line-height:1.3;\n    color:#ffffff;\n  }\n\n  #leitbild-flip-2026 .mobile-panel-text{\n    margin:0;\n    font-size:15px;\n    line-height:1.5;\n    color:#ffffff;\n  }\n\n  #leitbild-flip-2026 .card.is-open .mobile-panel{\n    max-height:500px;\n    padding:18px;\n  }\n\n  #leitbild-flip-2026 .card.is-open .mobile-button{\n    background:#eef2f6;\n  }\n}\n\n\/* Nur Smartphone: 1 Spalte *\/\n@media (max-width:640px){\n  #leitbild-flip-2026 .grid{\n    grid-template-columns:1fr;\n    gap:18px;\n    padding:18px;\n  }\n}\n<\/style>\n\n<div id=\"leitbild-flip-2026\">\n\n  <div class=\"hero\">\n    <img decoding=\"async\" src=\"https:\/\/www.schulemoerschwil.ch\/wp-content\/uploads\/2026\/03\/Titelbild-Leitbild-kompr.jpg\" alt=\"Leitbild der Schule\">\n  <\/div>\n\n  <div class=\"grid\">\n\n    <div class=\"card\">\n      <div class=\"card-inner\">\n        <div class=\"card-front\">\n          <img decoding=\"async\" class=\"icon\" src=\"https:\/\/www.schulemoerschwil.ch\/wp-content\/uploads\/2026\/03\/Leitbild_Piktogramm_01.png\" alt=\"Icon 1\">\n          <p class=\"front-text\">&#8230; stellen den Menschen ins Zentrum<\/p>\n          <button class=\"mobile-button\" type=\"button\" aria-expanded=\"false\">Mehr anzeigen<\/button>\n        <\/div>\n\n        <div class=\"card-back\">\n          <h3 class=\"back-title\">&#8230; stellen den Menschen ins Zentrum<\/h3>\n          <p class=\"back-text\">\n            Wir heissen alle Menschen in ihrer Unterschiedlichkeit in unserer Gemeinschaft willkommen.<br>\n            Wir handeln achtsam und \u00fcbernehmen Verantwortung.<br>\n            Wir achten auf die Gesundheit und das Wohl aller.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"mobile-panel\">\n        <div class=\"mobile-panel-inner\">\n          <h3 class=\"mobile-panel-title\">&#8230; stellen den Menschen ins Zentrum<\/h3>\n          <p class=\"mobile-panel-text\">\n            Wir heissen alle Menschen in ihrer Unterschiedlichkeit in unserer Gemeinschaft willkommen.<br>\n            Wir handeln achtsam und \u00fcbernehmen Verantwortung.<br>\n            Wir achten auf die Gesundheit und das Wohl aller.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <div class=\"card-inner\">\n        <div class=\"card-front\">\n          <img decoding=\"async\" class=\"icon\" src=\"https:\/\/www.schulemoerschwil.ch\/wp-content\/uploads\/2026\/03\/Leitbild_Piktogramm_02.png\" alt=\"Icon 2\">\n          <p class=\"front-text\">&#8230; respektieren einander<\/p>\n          <button class=\"mobile-button\" type=\"button\" aria-expanded=\"false\">Mehr anzeigen<\/button>\n        <\/div>\n\n        <div class=\"card-back\">\n          <h3 class=\"back-title\">&#8230; respektieren einander<\/h3>\n          <p class=\"back-text\">\n            Wir vermitteln und leben einen r\u00fccksichts- und respektvollen Umgang.<br>\n            Wir begegnen uns freundlich und wertsch\u00e4tzend.<br>\n            Wir st\u00e4rken Beziehungen untereinander.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"mobile-panel\">\n        <div class=\"mobile-panel-inner\">\n          <h3 class=\"mobile-panel-title\">&#8230; respektieren einander<\/h3>\n          <p class=\"mobile-panel-text\">\n            Wir vermitteln und leben einen r\u00fccksichts- und respektvollen Umgang.<br>\n            Wir begegnen uns freundlich und wertsch\u00e4tzend.<br>\n            Wir st\u00e4rken Beziehungen untereinander.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <div class=\"card-inner\">\n        <div class=\"card-front\">\n          <img decoding=\"async\" class=\"icon\" src=\"https:\/\/www.schulemoerschwil.ch\/wp-content\/uploads\/2026\/03\/Leitbild_Piktogramm_03.png\" alt=\"Icon 3\">\n          <p class=\"front-text\">&#8230; arbeiten f\u00fcreinander und miteinander<\/p>\n          <button class=\"mobile-button\" type=\"button\" aria-expanded=\"false\">Mehr anzeigen<\/button>\n        <\/div>\n\n        <div class=\"card-back\">\n          <h3 class=\"back-title\">&#8230; arbeiten f\u00fcreinander und miteinander<\/h3>\n          <p class=\"back-text\">\n            Wir kommunizieren sach- und situationsbezogen basierend auf Vertrauen.<br>\n            Wir st\u00e4rken unsere Schulgemeinschaft durch eine konstruktive Zusammenarbeit.<br>\n            Wir vernetzen uns, um vorausschauend und l\u00f6sungsorientiert zu agieren.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"mobile-panel\">\n        <div class=\"mobile-panel-inner\">\n          <h3 class=\"mobile-panel-title\">&#8230; arbeiten f\u00fcreinander und miteinander<\/h3>\n          <p class=\"mobile-panel-text\">\n            Wir kommunizieren sach- und situationsbezogen basierend auf Vertrauen.<br>\n            Wir st\u00e4rken unsere Schulgemeinschaft durch eine konstruktive Zusammenarbeit.<br>\n            Wir vernetzen uns, um vorausschauend und l\u00f6sungsorientiert zu agieren.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <div class=\"card-inner\">\n        <div class=\"card-front\">\n          <img decoding=\"async\" class=\"icon\" src=\"https:\/\/www.schulemoerschwil.ch\/wp-content\/uploads\/2026\/03\/Leitbild_Piktogramm_04.png\" alt=\"Icon 4\">\n          <p class=\"front-text\">&#8230; st\u00e4rken und f\u00f6rdern<\/p>\n          <button class=\"mobile-button\" type=\"button\" aria-expanded=\"false\">Mehr anzeigen<\/button>\n        <\/div>\n\n        <div class=\"card-back\">\n          <h3 class=\"back-title\">&#8230; st\u00e4rken und f\u00f6rdern<\/h3>\n          <p class=\"back-text\">\n            Wir f\u00f6rdern personale, soziale und fachliche Kompetenzen, erm\u00f6glichen Fortschritte und st\u00e4rken damit das Selbstvertrauen.<br>\n            Wir bauen St\u00e4rken aus und unterst\u00fctzen selbstverantwortliches Lernen.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"mobile-panel\">\n        <div class=\"mobile-panel-inner\">\n          <h3 class=\"mobile-panel-title\">&#8230; st\u00e4rken und f\u00f6rdern<\/h3>\n          <p class=\"mobile-panel-text\">\n            Wir f\u00f6rdern personale, soziale und fachliche Kompetenzen, erm\u00f6glichen Fortschritte und st\u00e4rken damit das Selbstvertrauen.<br>\n            Wir bauen St\u00e4rken aus und unterst\u00fctzen selbstverantwortliches Lernen.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <div class=\"card-inner\">\n        <div class=\"card-front\">\n          <img decoding=\"async\" class=\"icon\" src=\"https:\/\/www.schulemoerschwil.ch\/wp-content\/uploads\/2026\/03\/Leitbild_Piktogramm_05.png\" alt=\"Icon 5\">\n          <p class=\"front-text\">&#8230; erm\u00f6glichen Entwicklung in einem sicheren Rahmen<\/p>\n          <button class=\"mobile-button\" type=\"button\" aria-expanded=\"false\">Mehr anzeigen<\/button>\n        <\/div>\n\n        <div class=\"card-back\">\n          <h3 class=\"back-title\">&#8230; erm\u00f6glichen Entwicklung in einem sicheren Rahmen<\/h3>\n          <p class=\"back-text\">\n            Wir schaffen Rahmenbedingungen, die individuelles Lernen, Kreativit\u00e4t und pers\u00f6nliche Weiterentwicklung erm\u00f6glichen.<br>\n            Wir reflektieren uns und unsere Handlungen, erhalten Bew\u00e4hrtes und entwickeln Neues.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"mobile-panel\">\n        <div class=\"mobile-panel-inner\">\n          <h3 class=\"mobile-panel-title\">&#8230; erm\u00f6glichen Entwicklung in einem sicheren Rahmen<\/h3>\n          <p class=\"mobile-panel-text\">\n            Wir schaffen Rahmenbedingungen, die individuelles Lernen, Kreativit\u00e4t und pers\u00f6nliche Weiterentwicklung erm\u00f6glichen.<br>\n            Wir reflektieren uns und unsere Handlungen, erhalten Bew\u00e4hrtes und entwickeln Neues.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"card\">\n      <div class=\"card-inner\">\n        <div class=\"card-front\">\n          <img decoding=\"async\" class=\"icon\" src=\"https:\/\/www.schulemoerschwil.ch\/wp-content\/uploads\/2026\/03\/Leitbild_Piktogramm_06.png\" alt=\"Icon 6\">\n          <p class=\"front-text\">&#8230; tragen Sorge zu Material, Geb\u00e4ude und Natur<\/p>\n          <button class=\"mobile-button\" type=\"button\" aria-expanded=\"false\">Mehr anzeigen<\/button>\n        <\/div>\n\n        <div class=\"card-back\">\n          <h3 class=\"back-title\">&#8230; tragen Sorge zu Material, Geb\u00e4ude und Natur<\/h3>\n          <p class=\"back-text\">\n            Wir pflegen einen nachhaltigen Umgang mit Materialien und Schulgeb\u00e4uden.<br>\n            Wir sorgen f\u00fcr Ordnung und Sauberkeit im Schulzimmer und auf dem Schulgel\u00e4nde.<br>\n            Wir achten und respektieren die Lebensr\u00e4ume von Menschen, Tieren und Pflanzen.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"mobile-panel\">\n        <div class=\"mobile-panel-inner\">\n          <h3 class=\"mobile-panel-title\">&#8230; tragen Sorge zu Material, Geb\u00e4ude und Natur<\/h3>\n          <p class=\"mobile-panel-text\">\n            Wir pflegen einen nachhaltigen Umgang mit Materialien und Schulgeb\u00e4uden.<br>\n            Wir sorgen f\u00fcr Ordnung und Sauberkeit im Schulzimmer und auf dem Schulgel\u00e4nde.<br>\n            Wir achten und respektieren die Lebensr\u00e4ume von Menschen, Tieren und Pflanzen.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<!-- Textblock nach den Kacheln ohne Hintergrund -->\n<div class=\"leitbild-cta\" style=\"padding:30px 28px; text-align:center;\">\n  <p style=\"font-size:15px; line-height:1.6; margin-bottom:20px;\">\n    M\u00f6chten Sie unser vollst\u00e4ndiges Leitbild als Plakat herunterladen? <br> \n    Laden Sie das PDF herunter und erfahren Sie alles \u00fcber unsere Werte und Visionen.\n  <\/p>\n  <a href=\"https:\/\/www.schulemoerschwil.ch\/wp-content\/uploads\/2026\/03\/Leitbild_Schule_Moerschwil_0042225.pdf\" target=\"_blank\" style=\"display:inline-block; padding:14px 28px; background:#4d5a73; color:#ffffff; font-weight:600; font-size:15px; border-radius:12px; text-decoration:none; transition: background .3s;\">\n    Leitbild-Plakat herunterladen\n  <\/a>\n<\/div>\n\n<\/div>\n\n<script>\n(function () {\n function isMobileView() {\n  return window.innerWidth <= 1024;\n}\n\n  function setupLeitbildAccordion() {\n    var root = document.getElementById('leitbild-flip-2026');\n    if (!root) return;\n\n    var cards = root.querySelectorAll('.card');\n\n    cards.forEach(function(card) {\n      var button = card.querySelector('.mobile-button');\n      if (!button) return;\n\n      button.onclick = function () {\n        if (!isMobileView()) return;\n\n        var isOpen = card.classList.contains('is-open');\n        card.classList.toggle('is-open');\n        button.setAttribute('aria-expanded', String(!isOpen));\n        button.textContent = isOpen ? 'Mehr anzeigen' : 'Weniger anzeigen';\n      };\n    });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', setupLeitbildAccordion);\n  } else {\n    setupLeitbildAccordion();\n  }\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8230; stellen den Menschen ins Zentrum Mehr anzeigen &#8230; stellen den Menschen ins Zentrum Wir heissen alle Menschen in ihrer Unterschiedlichkeit in unserer Gemeinschaft willkommen. Wir handeln achtsam und \u00fcbernehmen Verantwortung. Wir achten auf die Gesundheit und das Wohl aller. &#8230; stellen den Menschen ins Zentrum Wir heissen alle Menschen in ihrer Unterschiedlichkeit in unserer [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":314,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8369","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=\/wp\/v2\/pages\/8369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8369"}],"version-history":[{"count":64,"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=\/wp\/v2\/pages\/8369\/revisions"}],"predecessor-version":[{"id":8571,"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=\/wp\/v2\/pages\/8369\/revisions\/8571"}],"up":[{"embeddable":true,"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=\/wp\/v2\/pages\/314"}],"wp:attachment":[{"href":"https:\/\/www.schulemoerschwil.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}